Vite: Remove module-graph scanner

CHANGELOG.md

@@ -14,6 +14,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Remove invalid `!important` on CSS variable declarations ([#16668](https://github.com/tailwindlabs/tailwindcss/pull/16668))
+- Vite: Automatic source detection now ignores files and directories specified in your `.gitignore` file ([#16631](https://github.com/tailwindlabs/tailwindcss/pull/16631))
+- Vite: Ensure setups with multiple Vite builds work as expected ([#16631](https://github.com/tailwindlabs/tailwindcss/pull/16631))
+- Vite: Ensure Astro production builds contain classes for client-only components ([#16631](https://github.com/tailwindlabs/tailwindcss/pull/16631))
+- Vite: Ensure utility classes are read without escaping special characters ([#16631](https://github.com/tailwindlabs/tailwindcss/pull/16631))
 
 ## [4.0.7] - 2025-02-18
 

integrations/vite/astro.test.ts

@@ -1,4 +1,4 @@
-import { candidate, fetchStyles, html, json, retryAssertion, test, ts } from '../utils'
+import { candidate, fetchStyles, html, js, json, retryAssertion, test, ts } from '../utils'
 
 test(
   'dev mode',
@@ -19,11 +19,7 @@ test(
         import { defineConfig } from 'astro/config'
 
         // https://astro.build/config
-        export default defineConfig({
-          vite: {
-            plugins: [tailwindcss()],
-          },
-        })
+        export default defineConfig({ vite: { plugins: [tailwindcss()] } })
       `,
       'src/pages/index.astro': html`
        <div class="underline">Hello, world!</div>
@@ -70,3 +66,58 @@ test(
     })
   },
 )
+
+test(
+  'build mode',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "astro": "^4.15.2",
+            "react": "^19",
+            "react-dom": "^19",
+            "@astrojs/react": "^4",
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          }
+        }
+      `,
+      'astro.config.mjs': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import react from '@astrojs/react'
+        import { defineConfig } from 'astro/config'
+
+        // https://astro.build/config
+        export default defineConfig({ vite: { plugins: [tailwindcss()] }, integrations: [react()] })
+      `,
+      'src/pages/index.astro': html`
+        ---
+        import ClientOnly from './client-only';
+        ---
+
+        <div class="underline">Hello, world!</div>
+
+        <ClientOnly client:only="react" />
+
+        <style is:global>
+          @import 'tailwindcss';
+        </style>
+      `,
+      'src/pages/client-only.jsx': js`
+        export default function ClientOnly() {
+          return <div className="overline">Hello, world!</div>
+        }
+      `,
+    },
+  },
+  async ({ fs, exec, expect }) => {
+    await exec('pnpm astro build')
+
+    let files = await fs.glob('dist/**/*.css')
+    expect(files).toHaveLength(1)
+
+    await fs.expectFileToContain(files[0][0], [candidate`underline`, candidate`overline`])
+  },
+)

integrations/vite/index.test.ts

@@ -174,21 +174,10 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
         return Boolean(url)
       })
 
-      // Candidates are resolved lazily, so the first visit of index.html
-      // will only have candidates from this file.
       await retryAssertion(async () => {
         let styles = await fetchStyles(url, '/index.html')
         expect(styles).toContain(candidate`underline`)
         expect(styles).toContain(candidate`flex`)
-        expect(styles).not.toContain(candidate`font-bold`)
-      })
-
-      // Going to about.html will extend the candidate list to include
-      // candidates from about.html.
-      await retryAssertion(async () => {
-        let styles = await fetchStyles(url, '/about.html')
-        expect(styles).toContain(candidate`underline`)
-        expect(styles).toContain(candidate`flex`)
         expect(styles).toContain(candidate`font-bold`)
       })
 
@@ -696,7 +685,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
 })
 
 test(
-  `demote Tailwind roots to regular CSS files and back to Tailwind roots while restoring all candidates`,
+  `demote Tailwind roots to regular CSS files and back to Tailwind roots`,
   {
     fs: {
       'package.json': json`
@@ -750,19 +739,9 @@ test(
       return Boolean(url)
     })
 
-    // Candidates are resolved lazily, so the first visit of index.html
-    // will only have candidates from this file.
     await retryAssertion(async () => {
       let styles = await fetchStyles(url, '/index.html')
       expect(styles).toContain(candidate`underline`)
-      expect(styles).not.toContain(candidate`font-bold`)
-    })
-
-    // Going to about.html will extend the candidate list to include
-    // candidates from about.html.
-    await retryAssertion(async () => {
-      let styles = await fetchStyles(url, '/about.html')
-      expect(styles).toContain(candidate`underline`)
       expect(styles).toContain(candidate`font-bold`)
     })
 

integrations/vite/react-router.test.ts

@@ -0,0 +1,178 @@
+import { candidate, css, fetchStyles, json, retryAssertion, test, ts, txt } from '../utils'
+
+const WORKSPACE = {
+  'package.json': json`
+    {
+      "type": "module",
+      "dependencies": {
+        "@react-router/dev": "^7",
+        "@react-router/node": "^7",
+        "@react-router/serve": "^7",
+        "@tailwindcss/vite": "workspace:^",
+        "@types/node": "^20",
+        "@types/react-dom": "^19",
+        "@types/react": "^19",
+        "isbot": "^5",
+        "react-dom": "^19",
+        "react-router": "^7",
+        "react": "^19",
+        "tailwindcss": "workspace:^",
+        "vite": "^5"
+      }
+    }
+  `,
+  'react-router.config.ts': ts`
+    import type { Config } from '@react-router/dev/config'
+    export default { ssr: true } satisfies Config
+  `,
+  'vite.config.ts': ts`
+    import { defineConfig } from 'vite'
+    import { reactRouter } from '@react-router/dev/vite'
+    import tailwindcss from '@tailwindcss/vite'
+
+    export default defineConfig({
+      plugins: [tailwindcss(), reactRouter()],
+    })
+  `,
+  'app/routes/home.tsx': ts`
+    export default function Home() {
+      return <h1 className="font-bold">Welcome to React Router</h1>
+    }
+  `,
+  'app/app.css': css`@import 'tailwindcss';`,
+  'app/routes.ts': ts`
+    import { type RouteConfig, index } from '@react-router/dev/routes'
+    export default [index('routes/home.tsx')] satisfies RouteConfig
+  `,
+  'app/root.tsx': ts`
+    import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router'
+    import './app.css'
+    export function Layout({ children }: { children: React.ReactNode }) {
+      return (
+        <html lang="en">
+          <head>
+            <meta charSet="utf-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1" />
+            <Meta />
+            <Links />
+          </head>
+          <body>
+            {children}
+            <ScrollRestoration />
+            <Scripts />
+          </body>
+        </html>
+      )
+    }
+
+    export default function App() {
+      return <Outlet />
+    }
+  `,
+}
+
+test('dev mode', { fs: WORKSPACE }, async ({ fs, spawn, expect }) => {
+  let process = await spawn('pnpm react-router dev')
+
+  let url = ''
+  await process.onStdout((m) => {
+    let match = /Local:\s*(http.*)\//.exec(m)
+    if (match) url = match[1]
+    return Boolean(url)
+  })
+
+  await retryAssertion(async () => {
+    let css = await fetchStyles(url)
+    expect(css).toContain(candidate`font-bold`)
+  })
+
+  await retryAssertion(async () => {
+    await fs.write(
+      'app/routes/home.tsx',
+      ts`
+        export default function Home() {
+          return <h1 className="font-bold underline">Welcome to React Router</h1>
+        }
+      `,
+    )
+
+    let css = await fetchStyles(url)
+    expect(css).toContain(candidate`underline`)
+    expect(css).toContain(candidate`font-bold`)
+  })
+})
+
+test('build mode', { fs: WORKSPACE }, async ({ spawn, exec, expect }) => {
+  await exec('pnpm react-router build')
+  let process = await spawn('pnpm react-router-serve ./build/server/index.js')
+
+  let url = ''
+  await process.onStdout((m) => {
+    let match = /\[react-router-serve\]\s*(http.*)\ \/?/.exec(m)
+    if (match) url = match[1]
+    return url != ''
+  })
+
+  await retryAssertion(async () => {
+    let css = await fetchStyles(url)
+    expect(css).toContain(candidate`font-bold`)
+  })
+})
+
+test(
+  'build mode using ?url stylesheet imports should only build one stylesheet (requires `file-system` scanner)',
+  {
+    fs: {
+      ...WORKSPACE,
+      'app/root.tsx': ts`
+        import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router'
+        import styles from './app.css?url'
+        export const links: Route.LinksFunction = () => [{ rel: 'stylesheet', href: styles }]
+        export function Layout({ children }: { children: React.ReactNode }) {
+          return (
+            <html lang="en">
+              <head>
+                <meta charSet="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <Meta />
+                <Links />
+              </head>
+              <body class="dark">
+                {children}
+                <ScrollRestoration />
+                <Scripts />
+              </body>
+            </html>
+          )
+        }
+
+        export default function App() {
+          return <Outlet />
+        }
+      `,
+      'vite.config.ts': ts`
+        import { defineConfig } from 'vite'
+        import { reactRouter } from '@react-router/dev/vite'
+        import tailwindcss from '@tailwindcss/vite'
+
+        export default defineConfig({
+          plugins: [tailwindcss(), reactRouter()],
+        })
+      `,
+      '.gitignore': txt`
+        node_modules/
+        build/
+      `,
+    },
+  },
+  async ({ fs, exec, expect }) => {
+    await exec('pnpm react-router build')
+
+    let files = await fs.glob('build/client/assets/**/*.css')
+
+    expect(files).toHaveLength(1)
+    let [filename] = files[0]
+
+    await fs.expectFileToContain(filename, [candidate`font-bold`])
+  },
+)