From aa77d5b2778229e3caad31a5b06d369e155ed597 Mon Sep 17 00:00:00 2001
From: Qingyu Wang <wangqingyu.c0l1n@bytedance.com>
Date: Fri, 27 Feb 2026 15:38:32 +0800
Subject: [PATCH] test: add @reference support verification

---
 test/at-reference/index.test.ts               | 29 +++++++++++++++++++
 test/at-reference/src/App.module.css          |  5 ++++
 test/at-reference/src/index.js                |  7 +++++
 test/at-reference/src/theme.css               |  3 ++
 test/css-modules/index.test.ts                |  1 +
 .../src/components/Button.module.css          |  3 ++
 test/css-modules/src/theme.css                |  3 ++
 7 files changed, 51 insertions(+)
 create mode 100644 test/at-reference/index.test.ts
 create mode 100644 test/at-reference/src/App.module.css
 create mode 100644 test/at-reference/src/index.js
 create mode 100644 test/at-reference/src/theme.css
 create mode 100644 test/css-modules/src/theme.css

diff --git a/test/at-reference/index.test.ts b/test/at-reference/index.test.ts
new file mode 100644
index 0000000..a48ce7e
--- /dev/null
+++ b/test/at-reference/index.test.ts
@@ -0,0 +1,29 @@
+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('should handle @reference directive correctly in 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('#test-div');
+  // Check if the custom color defined in theme.css is applied via @apply in the module
+  await expect(locator).toHaveCSS('background-color', 'rgb(18, 52, 86)'); // #123456
+
+  await server.close();
+});
diff --git a/test/at-reference/src/App.module.css b/test/at-reference/src/App.module.css
new file mode 100644
index 0000000..3d3ff6e
--- /dev/null
+++ b/test/at-reference/src/App.module.css
@@ -0,0 +1,5 @@
+@reference "./theme.css";
+
+.myButton {
+  @apply bg-custom-brand;
+}
diff --git a/test/at-reference/src/index.js b/test/at-reference/src/index.js
new file mode 100644
index 0000000..018bf33
--- /dev/null
+++ b/test/at-reference/src/index.js
@@ -0,0 +1,7 @@
+import styles from './App.module.css';
+
+const div = document.createElement('div');
+div.id = 'test-div';
+div.className = styles.myButton;
+div.textContent = 'Test Button';
+document.body.appendChild(div);
diff --git a/test/at-reference/src/theme.css b/test/at-reference/src/theme.css
new file mode 100644
index 0000000..074e442
--- /dev/null
+++ b/test/at-reference/src/theme.css
@@ -0,0 +1,3 @@
+@theme {
+  --color-custom-brand: #123456;
+}
diff --git a/test/css-modules/index.test.ts b/test/css-modules/index.test.ts
index 4f22f11..a4966d9 100644
--- a/test/css-modules/index.test.ts
+++ b/test/css-modules/index.test.ts
@@ -22,6 +22,7 @@ test('can co-exist with CSS modules', async ({ page }) => {
   const locator = page.locator('#button');
   await expect(locator).toHaveCSS('display', 'flex');
   await expect(locator).toHaveCSS('color', 'rgb(17, 34, 51)');
+  await expect(locator).toHaveCSS('background-color', 'rgb(170, 187, 204)');
 
   await server.close();
 });
diff --git a/test/css-modules/src/components/Button.module.css b/test/css-modules/src/components/Button.module.css
index 39b1b3d..be4b217 100644
--- a/test/css-modules/src/components/Button.module.css
+++ b/test/css-modules/src/components/Button.module.css
@@ -1,3 +1,6 @@
+@reference "../theme.css";
+
 .button {
   color: #112233;
+  @apply bg-btn-bg;
 }
diff --git a/test/css-modules/src/theme.css b/test/css-modules/src/theme.css
new file mode 100644
index 0000000..ae05d12
--- /dev/null
+++ b/test/css-modules/src/theme.css
@@ -0,0 +1,3 @@
+@theme {
+  --color-btn-bg: #aabbcc;
+}