From 9d90df78907ae5b53a151668992bdfe8faaa74f9 Mon Sep 17 00:00:00 2001
From: Qingyu Wang <wangqingyu.c0l1n@bytedance.com>
Date: Thu, 26 Feb 2026 19:27:46 +0800
Subject: [PATCH] test: add basic CSS modules coexistence

---
 test/css-modules/index.test.ts                | 27 +++++++++++++++++++
 .../src/components/Button.module.css          |  3 +++
 test/css-modules/src/index.js                 | 10 +++++++
 3 files changed, 40 insertions(+)
 create mode 100644 test/css-modules/index.test.ts
 create mode 100644 test/css-modules/src/components/Button.module.css
 create mode 100644 test/css-modules/src/index.js

diff --git a/test/css-modules/index.test.ts b/test/css-modules/index.test.ts
new file mode 100644
index 0000000..4f22f11
--- /dev/null
+++ b/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();
+});
diff --git a/test/css-modules/src/components/Button.module.css b/test/css-modules/src/components/Button.module.css
new file mode 100644
index 0000000..39b1b3d
--- /dev/null
+++ b/test/css-modules/src/components/Button.module.css
@@ -0,0 +1,3 @@
+.button {
+  color: #112233;
+}
diff --git a/test/css-modules/src/index.js b/test/css-modules/src/index.js
new file mode 100644
index 0000000..38bd8a6
--- /dev/null
+++ b/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);