Skip to content

Commit a4761ea

Browse files
Do not scan tailwind-merge sources for candidates (#16005)
Resolves #15722 This PR adds a list of ignored dependencies (in the current form only `tailwind-merge`) to the Vite extension which, when included in the dependency tree, are no longer scanned by the Tailwind CSS compiler for candidates. This is to work around an issue where some dependencies contain vast lists of valid Tailwind CSS class names which would otherwise always be inlined in the build. ## Test plan This was tested in our Vite playground on both dev and prod builds across macOS and Windows: ### Windows prod build before ![telegram-cloud-photo-size-4-5823632138052944949-y](https://github.com/user-attachments/assets/a2bca1c7-cef3-4f04-a588-cbf1afdbdd37) ### Windows prod build after This includes a debug `console.log(…)` to make sure it matches the right module. ![telegram-cloud-photo-size-4-5823632138052944951-y](https://github.com/user-attachments/assets/109b82c5-1946-4d44-b812-d68474686eb7) ### Windows dev build after This includes a debug `console.log(…)` to make sure it matches the right module. ![telegram-cloud-photo-size-4-5823632138052944948-y](https://github.com/user-attachments/assets/41cbe7f1-f997-4c6c-b5fe-01d574f7a999)
1 parent 9fef2bd commit a4761ea

File tree

3 files changed

+96
-0
lines changed

3 files changed

+96
-0
lines changed

Diff for: CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
2626
- Find utilities when using the Angular class shorthand syntax ([#15974](https://github.com/tailwindlabs/tailwindcss/pull/15974))
2727
- Find utilities when using functions inside arrays ([#15974](https://github.com/tailwindlabs/tailwindcss/pull/15974))
2828
- Ensure that `@tailwindcss/browser` does not pollute the global namespace ([#15978](https://github.com/tailwindlabs/tailwindcss/pull/15978))
29+
- Ensure that `tailwind-merge` is not scanned when using the Vite plugin ([#16005](https://github.com/tailwindlabs/tailwindcss/pull/16005))
2930
- Ensure CSS theme variables are available within shadow roots ([#15975](https://github.com/tailwindlabs/tailwindcss/pull/15975))
3031
- Fix crash when project lives in the `/` directory ([#15988](https://github.com/tailwindlabs/tailwindcss/pull/15988))
3132
- Ensure `@custom-variant` has a non-empty selector list ([#16009](https://github.com/tailwindlabs/tailwindcss/pull/16009))

Diff for: integrations/vite/ignored-packages.test.ts

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { candidate, css, fetchStyles, html, js, retryAssertion, test, ts, txt } from '../utils'
2+
3+
const WORKSPACE = {
4+
fs: {
5+
'package.json': txt`
6+
{
7+
"type": "module",
8+
"dependencies": {
9+
"tailwind-merge": "^2",
10+
"@tailwindcss/vite": "workspace:^",
11+
"tailwindcss": "workspace:^"
12+
},
13+
"devDependencies": {
14+
"vite": "^6"
15+
}
16+
}
17+
`,
18+
'vite.config.ts': ts`
19+
import tailwindcss from '@tailwindcss/vite'
20+
import { defineConfig } from 'vite'
21+
22+
export default defineConfig({
23+
build: { cssMinify: false },
24+
plugins: [tailwindcss()],
25+
})
26+
`,
27+
'index.html': html`
28+
<head>
29+
<link rel="stylesheet" href="./src/index.css" />
30+
<script type="module" src="./src/index.js"></script>
31+
</head>
32+
`,
33+
'src/index.js': js`
34+
import { twMerge } from 'tailwind-merge'
35+
36+
twMerge('underline')
37+
38+
console.log('underline')
39+
`,
40+
'src/index.css': css`@import 'tailwindcss/utilities' layer(utilities);`,
41+
},
42+
}
43+
44+
test(
45+
'does not scan tailwind-merge in production builds',
46+
WORKSPACE,
47+
async ({ fs, exec, expect }) => {
48+
await exec('pnpm vite build')
49+
50+
let files = await fs.glob('dist/**/*.css')
51+
expect(files).toHaveLength(1)
52+
let [, content] = files[0]
53+
54+
expect(content).toMatchInlineSnapshot(`
55+
"@layer utilities {
56+
.underline {
57+
text-decoration-line: underline;
58+
}
59+
}
60+
"
61+
`)
62+
},
63+
)
64+
65+
test('does not scan tailwind-merge in dev builds', WORKSPACE, async ({ spawn, expect }) => {
66+
let process = await spawn('pnpm vite dev')
67+
await process.onStdout((m) => m.includes('ready in'))
68+
69+
let url = ''
70+
await process.onStdout((m) => {
71+
let match = /Local:\s*(http.*)\//.exec(m)
72+
if (match) url = match[1]
73+
return Boolean(url)
74+
})
75+
76+
await retryAssertion(async () => {
77+
let styles = await fetchStyles(url, '/index.html')
78+
79+
expect(styles).not.toContain(candidate`flex`)
80+
})
81+
})

Diff for: packages/@tailwindcss-vite/src/index.ts

+14
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import type { Plugin, ResolvedConfig, Rollup, Update, ViteDevServer } from 'vite
99
const DEBUG = env.DEBUG
1010
const SPECIAL_QUERY_RE = /[?&](raw|url)\b/
1111

12+
const IGNORED_DEPENDENCIES = ['tailwind-merge']
13+
1214
export default function tailwindcss(): Plugin[] {
1315
let servers: ViteDevServer[] = []
1416
let config: ResolvedConfig | null = null
@@ -62,6 +64,18 @@ export default function tailwindcss(): Plugin[] {
6264
})
6365

6466
function scanFile(id: string, content: string, extension: string, isSSR: boolean) {
67+
for (let dependency of IGNORED_DEPENDENCIES) {
68+
// We validated that Vite IDs always use posix style path separators, even on Windows.
69+
// In dev build, Vite precompiles dependencies
70+
if (id.includes(`.vite/deps/${dependency}.js`)) {
71+
return
72+
}
73+
// In prod builds, use the node_modules path
74+
if (id.includes(`/node_modules/${dependency}/`)) {
75+
return
76+
}
77+
}
78+
6579
let updated = false
6680
for (let candidate of moduleGraphScanner.scanFiles([{ content, extension }])) {
6781
updated = true

0 commit comments

Comments
 (0)