mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
88b762b539
Alternative to #16425 Fixes #16585 Fixes #16389 Fixes #16252 Fixes #15794 Fixes #16646 Fixes #16358 This PR changes the Vite plugin to use the file-system to discover potential class names instead of relying on the module-graph. This comes after a lot of testing and various issue reports where builds that span different Vite instances were missing class names. Because we now scan for candidates using the file-system, we can also remove a lot of the bookkeeping necessary to make production builds and development builds work as we no longer have to change the resulting stylesheet based on the `transform` callbacks of other files that might happen later. This change comes at a small performance penalty that is noticeable especially on very large projects with many files to scan. However, we offset that change by fixing an issue that I found in the current Vite integration that did a needless rebuild of the whole Tailwind root whenever any source file changed. Because of how impactful this change is, I expect many normal to medium sized projects to actually see a performance improvement after these changes. Furthermore we do plan to continue to use the module-graph to further improve the performance in dev mode. ## Test plan - Added new integration tests with cases found across the issues above. - Manual testing by adding a local version of the Vite plugin to repos from the issue list above and the [tailwindcss playgrounds](https://github.com/philipp-spiess/tailwindcss-playgrounds).
179 lines
4.9 KiB
TypeScript
179 lines
4.9 KiB
TypeScript
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`])
|
|
},
|
|
)
|