test(v4): add @reference support verification

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();
+});

test/at-reference/src/App.module.css

@@ -0,0 +1,5 @@
+@reference "./theme.css";
+
+.myButton {
+  @apply bg-custom-brand;
+}

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);

test/at-reference/src/theme.css

@@ -0,0 +1,3 @@
+@theme {
+  --color-custom-brand: #123456;
+}

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();
 });

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

@@ -1,3 +1,6 @@
+@reference "../theme.css";
+
 .button {
   color: #112233;
+  @apply bg-btn-bg;
 }

test/css-modules/src/theme.css

@@ -0,0 +1,3 @@
+@theme {
+  --color-btn-bg: #aabbcc;
+}