test: more tests on TailwindCSS configuration (#74)

Author: colinaaa

test/plugin/config/tailwind.config.js

@@ -0,0 +1,17 @@
+import plugin from 'tailwindcss/plugin';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  // Intentionally empty to ensure the plugin overrides it.
+  content: [],
+  plugins: [
+    plugin(({ addUtilities }) => {
+      addUtilities({
+        '.from-plugin': {
+          position: 'fixed',
+          top: '0px',
+        },
+      });
+    }),
+  ],
+};

test/plugin/index.test.ts

@@ -0,0 +1,58 @@
+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';
+import { getRandomPort, supportESM } from '../helper';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+test('plugin', async ({ page }) => {
+  test.skip(
+    !supportESM(),
+    'Skip since the tailwindcss version does not support ESM configuration',
+  );
+
+  const rsbuild = await createRsbuild({
+    cwd: __dirname,
+    rsbuildConfig: {
+      plugins: [
+        pluginTailwindCSS({
+          config: './config/tailwind.config.js',
+        }),
+      ],
+      server: {
+        port: getRandomPort(),
+      },
+    },
+  });
+
+  await rsbuild.build();
+  const { server, urls } = await rsbuild.preview();
+
+  try {
+    await page.goto(urls[0]);
+    await page.waitForSelector('#test', { state: 'attached' });
+
+    const style = await page.evaluate(() => {
+      const el = document.getElementById('test');
+
+      if (!el) {
+        throw new Error('#test not found');
+      }
+
+      const computed = window.getComputedStyle(el);
+      return {
+        position: computed.getPropertyValue('position'),
+        top: computed.getPropertyValue('top'),
+      };
+    });
+
+    expect(style.position).toBe('fixed');
+    expect(style.top).toBe('0px');
+  } finally {
+    await server.close();
+  }
+});

test/plugin/src/index.js

@@ -0,0 +1,8 @@
+import 'tailwindcss/utilities.css';
+
+const root = document.getElementById('root');
+const element = document.createElement('div');
+element.id = 'test';
+element.className = 'from-plugin';
+element.textContent = 'plugin';
+root.appendChild(element);

test/prefix/config/tailwind.config.js

@@ -0,0 +1,6 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  // Intentionally empty to ensure the plugin overrides it.
+  content: [],
+  prefix: 'tw-',
+};

test/prefix/index.test.ts

@@ -0,0 +1,53 @@
+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';
+import { getRandomPort, supportESM } from '../helper';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+test('prefix', async ({ page }) => {
+  test.skip(
+    !supportESM(),
+    'Skip since the tailwindcss version does not support ESM configuration',
+  );
+
+  const rsbuild = await createRsbuild({
+    cwd: __dirname,
+    rsbuildConfig: {
+      plugins: [
+        pluginTailwindCSS({
+          config: './config/tailwind.config.js',
+        }),
+      ],
+      server: {
+        port: getRandomPort(),
+      },
+    },
+  });
+
+  await rsbuild.build();
+  const { server, urls } = await rsbuild.preview();
+
+  try {
+    await page.goto(urls[0]);
+    await page.waitForSelector('#test', { state: 'attached' });
+
+    const display = await page.evaluate(() => {
+      const el = document.getElementById('test');
+
+      if (!el) {
+        throw new Error('#test not found');
+      }
+
+      return window.getComputedStyle(el).getPropertyValue('display');
+    });
+
+    expect(display).toBe('flex');
+  } finally {
+    await server.close();
+  }
+});

test/prefix/src/index.js

@@ -0,0 +1,8 @@
+import 'tailwindcss/utilities.css';
+
+const root = document.getElementById('root');
+const element = document.createElement('div');
+element.id = 'test';
+element.className = 'tw-flex';
+element.textContent = 'prefix';
+root.appendChild(element);

test/theme/config/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  // Intentionally empty to ensure the plugin overrides it.
+  content: [],
+  theme: {
+    extend: {
+      colors: {
+        brand: '#010203',
+      },
+    },
+  },
+};

test/theme/index.test.ts

@@ -0,0 +1,53 @@
+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';
+import { getRandomPort, supportESM } from '../helper';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+test('theme', async ({ page }) => {
+  test.skip(
+    !supportESM(),
+    'Skip since the tailwindcss version does not support ESM configuration',
+  );
+
+  const rsbuild = await createRsbuild({
+    cwd: __dirname,
+    rsbuildConfig: {
+      plugins: [
+        pluginTailwindCSS({
+          config: './config/tailwind.config.js',
+        }),
+      ],
+      server: {
+        port: getRandomPort(),
+      },
+    },
+  });
+
+  await rsbuild.build();
+  const { server, urls } = await rsbuild.preview();
+
+  try {
+    await page.goto(urls[0]);
+    await page.waitForSelector('#test', { state: 'attached' });
+
+    const color = await page.evaluate(() => {
+      const el = document.getElementById('test');
+
+      if (!el) {
+        throw new Error('#test not found');
+      }
+
+      return window.getComputedStyle(el).getPropertyValue('color');
+    });
+
+    expect(color).toBe('rgb(1, 2, 3)');
+  } finally {
+    await server.close();
+  }
+});

test/theme/src/index.js

@@ -0,0 +1,8 @@
+import 'tailwindcss/utilities.css';
+
+const root = document.getElementById('root');
+const element = document.createElement('div');
+element.id = 'test';
+element.className = 'text-brand';
+element.textContent = 'theme';
+root.appendChild(element);

test/with-resource-query/index.test.ts

@@ -26,6 +26,7 @@ test('should dev with resource query on rspack', async ({ page }) => {
   const { server, urls } = await rsbuild.startDevServer();
 
   await page.goto(urls[0]);
+  await page.waitForSelector('#test', { state: 'attached' });
 
   const display = await page.evaluate(() => {
     const el = document.getElementById('test');
@@ -62,6 +63,7 @@ test('should build with resource query on rspack', async ({ page }) => {
   const { server, urls } = await rsbuild.preview();
 
   await page.goto(urls[0]);
+  await page.waitForSelector('#test', { state: 'attached' });
 
   const display = await page.evaluate(() => {
     const el = document.getElementById('test');