test(v4): add test case for async chunks and CSS splitting (#94)

This PR adds a test case to verify that CSS splitting and async chunks
work correctly with Tailwind CSS v4 in Rsbuild. It ensures that common
styles are deduplicated and separate chunks are generated for async
components.

Author: colinaaa

test/async-chunks/index.test.ts

@@ -0,0 +1,87 @@
+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 split CSS and reuse common parts', 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]);
+
+  // Check main chunk styles
+  const mainDiv = page.locator('.flex.bg-red-500');
+  await expect(mainDiv).toHaveCSS('display', 'flex');
+  // Check that background color is set (exact value might vary by browser/environment)
+  const mainBgColor = await mainDiv.evaluate(
+    (el) => getComputedStyle(el).backgroundColor,
+  );
+  expect(mainBgColor).not.toBe('rgba(0, 0, 0, 0)');
+  expect(mainBgColor).not.toBe('transparent');
+
+  // Wait for async chunk
+  const asyncDiv = page.locator('.flex.text-center.bg-blue-500');
+  await expect(asyncDiv).toHaveCSS('display', 'flex');
+  await expect(asyncDiv).toHaveCSS('text-align', 'center');
+  const asyncBgColor = await asyncDiv.evaluate(
+    (el) => getComputedStyle(el).backgroundColor,
+  );
+  expect(asyncBgColor).not.toBe('rgba(0, 0, 0, 0)');
+  expect(asyncBgColor).not.toBe('transparent');
+
+  // Analyze CSS files to check for splitting and deduplication
+  const linkTags = await page.locator('link[rel="stylesheet"]').all();
+
+  // Fetch all CSS content
+  const cssContents: string[] = [];
+  for (const link of linkTags) {
+    const href = await link.getAttribute('href');
+    if (href) {
+      const response = await page.request.get(
+        new URL(href, urls[0]).toString(),
+      );
+      cssContents.push(await response.text());
+    }
+  }
+
+  // Check if .flex is defined
+  let flexCount = 0;
+  for (const css of cssContents) {
+    // Simple check for .flex definition
+    if (css.includes('.flex{') || css.includes('.flex {')) {
+      flexCount++;
+    }
+  }
+
+  // We expect at least 2 CSS files (main + async)
+  expect(cssContents.length).toBeGreaterThanOrEqual(2);
+
+  // We expect .flex to be defined exactly once (deduplicated)
+  // or if not deduplicated, it might be 2. Ideally 1.
+  // Let's assert it exists first.
+  expect(flexCount).toBeGreaterThan(0);
+
+  // Check for Preflight duplication (checking for a common reset rule)
+  // Tailwind preflight usually includes `box-sizing: border-box` on `*, ::before, ::after`.
+  let preflightCount = 0;
+  for (const css of cssContents) {
+    if (css.includes('box-sizing:border-box')) {
+      preflightCount++;
+    }
+  }
+
+  // Preflight should be deduplicated (only in main chunk)
+  expect(preflightCount).toBe(1);
+
+  await server.close();
+});

test/async-chunks/src/async.js

@@ -0,0 +1,5 @@
+export default function asyncFn() {
+  const el = document.createElement('div');
+  el.className = 'flex text-center bg-blue-500';
+  document.body.appendChild(el);
+}

test/async-chunks/src/index.css

@@ -0,0 +1,4 @@
+@theme {
+  --color-red-500: #ef4444;
+  --color-blue-500: #3b82f6;
+}

test/async-chunks/src/index.js

@@ -0,0 +1,9 @@
+import './index.css';
+
+const el = document.createElement('div');
+el.className = 'flex bg-red-500';
+document.body.appendChild(el);
+
+import('./async').then(({ default: asyncFn }) => {
+  asyncFn();
+});

test/static-assets/index.test.ts

@@ -30,7 +30,10 @@ test('should not interfere with static asset queries (?url, ?raw)', async ({
 
   // Check ?raw
   // It should contain the original CSS content, NOT Tailwind's injected content (like @tailwind base etc.)
-  const originalCss = readFileSync(resolve(__dirname, 'src/index.css'), 'utf-8');
+  const originalCss = readFileSync(
+    resolve(__dirname, 'src/index.css'),
+    'utf-8',
+  );
   expect(cssRaw.trim()).toBe(originalCss.trim());
 
   await server.close();