test(v4): add basic CSS modules coexistence

test/css-modules/index.test.ts

@@ -0,0 +1,27 @@
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { expect, test } from '@playwright/test';
+import { createRsbuild } from '@rsbuild/core';
+import { pluginTailwindCSS } from '../../src';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+test('can co-exist with CSS modules', async ({ page }) => {
+  const rsbuild = await createRsbuild({
+    cwd: __dirname,
+    rsbuildConfig: {
+      plugins: [pluginTailwindCSS()],
+    },
+  });
+
+  await rsbuild.build();
+  const { server, urls } = await rsbuild.preview();
+
+  await page.goto(urls[0]);
+
+  const locator = page.locator('#button');
+  await expect(locator).toHaveCSS('display', 'flex');
+  await expect(locator).toHaveCSS('color', 'rgb(17, 34, 51)');
+
+  await server.close();
+});

test/css-modules/src/components/Button.module.css

@@ -0,0 +1,3 @@
+.button {
+  color: #112233;
+}

test/css-modules/src/index.js

@@ -0,0 +1,10 @@
+import styles from './components/Button.module.css';
+
+const root = document.getElementById('root');
+
+const button = document.createElement('button');
+button.id = 'button';
+button.className = `flex ${styles.button}`;
+button.textContent = 'CSS Modules button';
+
+root.appendChild(button);