test: add tailwindcss bundle false test case (#699)

Author: SoonIter

pnpm-lock.yaml

@@ -0,0 +1,7 @@
+{
+  "name": "tailwindcss-bundle-false-test",
+  "private": true,
+  "devDependencies": {
+    "tailwindcss": "^3.4.17"
+  }
+}

tests/integration/style/tailwindcss/bundle-false/package.json

@@ -0,0 +1,9 @@
+const path = require('node:path');
+
+export default {
+  plugins: {
+    tailwindcss: {
+      config: path.join(__dirname, './tailwind.config.cjs'),
+    },
+  },
+};

tests/integration/style/tailwindcss/bundle-false/postcss.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from '@rslib/core';
+import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  lib: [
+    generateBundleEsmConfig({
+      bundle: false,
+    }),
+    generateBundleCjsConfig({
+      bundle: false,
+    }),
+  ],
+  tools: {
+    lightningcssLoader: false,
+  },
+  output: {
+    target: 'web',
+  },
+});

tests/integration/style/tailwindcss/bundle-false/rslib.config.ts

@@ -0,0 +1 @@
+@tailwind utilities;

tests/integration/style/tailwindcss/bundle-false/src/index.css

@@ -0,0 +1,7 @@
+import './index.css';
+
+const div = document.createElement('div');
+
+div.classList.add('text-3xl', 'font-bold', 'underline', 'alert');
+
+export { div };

tests/integration/style/tailwindcss/bundle-false/src/index.ts

@@ -0,0 +1,10 @@
+const path = require('node:path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [path.join(__dirname, './src/**/*.{html,js,ts,jsx,tsx}')],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

tests/integration/style/tailwindcss/bundle-false/tailwind.config.cjs

@@ -30,3 +30,31 @@ test('should extract css when using tailwindcss successfully in bundle', async (
     '.underline {',
   ]);
 });
+
+test('should extract css when using tailwindcss successfully in bundleless', async () => {
+  const fixturePath = join(__dirname, 'bundle-false');
+  const { contents } = await buildAndGetResults({ fixturePath, type: 'css' });
+  const esmFiles = Object.keys(contents.esm);
+  expect(esmFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/tailwindcss/bundle-false/dist/esm/index.css",
+    ]
+  `);
+  expectFileContainContent(contents.esm, 'index.css', [
+    '.text-3xl {',
+    '.font-bold {',
+    '.underline {',
+  ]);
+
+  const cjsFiles = Object.keys(contents.cjs);
+  expect(cjsFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/tailwindcss/bundle-false/dist/cjs/index.css",
+    ]
+  `);
+  expectFileContainContent(contents.cjs, 'index.css', [
+    '.text-3xl {',
+    '.font-bold {',
+    '.underline {',
+  ]);
+});