Add integration test for Vite CSS module support (#14349)

Wanted to make sure stuff works with CSS modules for both the postcss
and the lightningcss pipeline.

integrations/cli/config.test.ts

@@ -1,4 +1,4 @@
-import { candidate, css, html, js, json, test } from '../utils'
+import { candidate, css, html, js, json, test, ts } from '../utils'
 
 test(
   'Config files (CJS)',
@@ -99,7 +99,7 @@ test(
       'index.html': html`
         <div class="text-primary"></div>
       `,
-      'tailwind.config.ts': js`
+      'tailwind.config.ts': ts`
         export default {
           theme: {
             extend: {

integrations/utils.ts

@@ -37,7 +37,10 @@ interface TestContext {
     write(filePath: string, content: string): Promise<void>
     read(filePath: string): Promise<string>
     glob(pattern: string): Promise<[string, string][]>
-    expectFileToContain(filePath: string, contents: string | string[]): Promise<void>
+    expectFileToContain(
+      filePath: string,
+      contents: string | string[] | RegExp | RegExp[],
+    ): Promise<void>
     expectFileNotToContain(filePath: string, contents: string | string[]): Promise<void>
   }
 }
@@ -297,8 +300,12 @@ export function test(
           async expectFileToContain(filePath, contents) {
             return retryAssertion(async () => {
               let fileContent = await this.read(filePath)
-              for (let content of contents) {
-                expect(fileContent).toContain(content)
+              for (let content of Array.isArray(contents) ? contents : [contents]) {
+                if (content instanceof RegExp) {
+                  expect(fileContent).toMatch(content)
+                } else {
+                  expect(fileContent).toContain(content)
+                }
               }
             })
           },
@@ -542,7 +549,6 @@ export async function fetchStyles(port: number, path = '/'): Promise<string> {
   let stylesheets: string[] = []
 
   let paths: string[] = []
-  let match
   for (let match of html.matchAll(linkRegex)) {
     let path: string = match[1]
     if (path.startsWith('./')) {

integrations/vite/css-modules.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect } from 'vitest'
+import { css, html, test, ts, txt } from '../utils'
+
+for (let transformer of ['postcss', 'lightningcss']) {
+  describe(transformer, () => {
+    test(
+      `dev mode`,
+      {
+        fs: {
+          'package.json': txt`
+            {
+              "type": "module",
+              "dependencies": {
+                "@tailwindcss/vite": "workspace:^",
+                "tailwindcss": "workspace:^"
+              },
+              "devDependencies": {
+                ${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''}
+                "vite": "^5.3.5"
+              }
+            }
+          `,
+          'vite.config.ts': ts`
+            import tailwindcss from '@tailwindcss/vite'
+            import { defineConfig } from 'vite'
+
+            export default defineConfig({
+              css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
+              build: { cssMinify: false },
+              plugins: [tailwindcss()],
+            })
+          `,
+          'index.html': html`
+            <head>
+              <script type="module" src="/src/component.ts"></script>
+            </head>
+            <body>
+              <div id="root" />
+            </body>
+          `,
+          'src/component.ts': ts`
+            import { foo } from './component.module.css'
+            let root = document.getElementById('root')
+            root.className = foo
+            root.innerText = 'Hello, world!'
+          `,
+          'src/component.module.css': css`
+            @import 'tailwindcss/utilities';
+
+            .foo {
+              @apply underline;
+            }
+          `,
+        },
+      },
+      async ({ exec, fs }) => {
+        await exec(`pnpm vite build`)
+
+        let files = await fs.glob('dist/**/*.css')
+        expect(files).toHaveLength(1)
+        let [filename] = files[0]
+
+        await fs.expectFileToContain(filename, [
+          /\.[^f]*_foo[^t]*text-decoration-line: underline;/gi,
+        ])
+      },
+    )
+  })
+}

integrations/vite/index.test.ts

@@ -10,9 +10,11 @@ import {
   retryAssertion,
   test,
   ts,
+  txt,
   yaml,
 } from '../utils'
-;['postcss', 'lightningcss'].forEach((transformer) => {
+
+for (let transformer of ['postcss', 'lightningcss']) {
   describe(transformer, () => {
     test(
       `production build`,
@@ -24,7 +26,7 @@ import {
             packages:
               - project-a
           `,
-          'project-a/package.json': json`
+          'project-a/package.json': txt`
             {
               "type": "module",
               "dependencies": {
@@ -101,7 +103,7 @@ import {
             packages:
               - project-a
           `,
-          'project-a/package.json': json`
+          'project-a/package.json': txt`
             {
               "type": "module",
               "dependencies": {
@@ -109,6 +111,7 @@ import {
                 "tailwindcss": "workspace:^"
               },
               "devDependencies": {
+                ${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''}
                 "vite": "^5.3.5"
               }
             }
@@ -254,7 +257,7 @@ import {
             packages:
               - project-a
           `,
-          'project-a/package.json': json`
+          'project-a/package.json': txt`
             {
               "type": "module",
               "dependencies": {
@@ -262,6 +265,7 @@ import {
                 "tailwindcss": "workspace:^"
               },
               "devDependencies": {
+                ${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''}
                 "vite": "^5.3.5"
               }
             }
@@ -382,7 +386,7 @@ import {
       },
     )
   })
-})
+}
 
 test(
   `demote Tailwind roots to regular CSS files and back to Tailwind roots while restoring all candidates`,