Skip to content

Commit e77f9f3

Browse files
authored
test(v4): add basic CSS modules coexistence (#80)
## Summary - Add a minimal CSS Modules fixture under - \ (entry)\n - \ (CSS module) - Add a Playwright test in \ that ensures Tailwind utilities still work () while CSS Modules styles are applied (), without relying on \ or \. ## Notes - Only the new CSS Modules test and its fixtures are included; existing plugin behavior and other tests are untouched.
1 parent 0e50b6d commit e77f9f3

File tree

3 files changed

+40
-0
lines changed

3 files changed

+40
-0
lines changed

test/css-modules/index.test.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { dirname } from 'node:path';
2+
import { fileURLToPath } from 'node:url';
3+
import { expect, test } from '@playwright/test';
4+
import { createRsbuild } from '@rsbuild/core';
5+
import { pluginTailwindCSS } from '../../src';
6+
7+
const __dirname = dirname(fileURLToPath(import.meta.url));
8+
9+
test('can co-exist with CSS modules', async ({ page }) => {
10+
const rsbuild = await createRsbuild({
11+
cwd: __dirname,
12+
rsbuildConfig: {
13+
plugins: [pluginTailwindCSS()],
14+
},
15+
});
16+
17+
await rsbuild.build();
18+
const { server, urls } = await rsbuild.preview();
19+
20+
await page.goto(urls[0]);
21+
22+
const locator = page.locator('#button');
23+
await expect(locator).toHaveCSS('display', 'flex');
24+
await expect(locator).toHaveCSS('color', 'rgb(17, 34, 51)');
25+
26+
await server.close();
27+
});
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.button {
2+
color: #112233;
3+
}

test/css-modules/src/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import styles from './components/Button.module.css';
2+
3+
const root = document.getElementById('root');
4+
5+
const button = document.createElement('button');
6+
button.id = 'button';
7+
button.className = `flex ${styles.button}`;
8+
button.textContent = 'CSS Modules button';
9+
10+
root.appendChild(button);

0 commit comments

Comments
 (0)