From a4761ea9674b2bf3c4f3062ac2928554a04185ec Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 29 Jan 2025 17:32:06 +0100 Subject: [PATCH] Do not scan `tailwind-merge` sources for candidates (#16005) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- CHANGELOG.md | 1 + integrations/vite/ignored-packages.test.ts | 81 ++++++++++++++++++++++ packages/@tailwindcss-vite/src/index.ts | 14 ++++ 3 files changed, 96 insertions(+) create mode 100644 integrations/vite/ignored-packages.test.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c3837abf..5428fa88f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Find utilities when using the Angular class shorthand syntax ([#15974](https://github.com/tailwindlabs/tailwindcss/pull/15974)) - Find utilities when using functions inside arrays ([#15974](https://github.com/tailwindlabs/tailwindcss/pull/15974)) - Ensure that `@tailwindcss/browser` does not pollute the global namespace ([#15978](https://github.com/tailwindlabs/tailwindcss/pull/15978)) +- Ensure that `tailwind-merge` is not scanned when using the Vite plugin ([#16005](https://github.com/tailwindlabs/tailwindcss/pull/16005)) - Ensure CSS theme variables are available within shadow roots ([#15975](https://github.com/tailwindlabs/tailwindcss/pull/15975)) - Fix crash when project lives in the `/` directory ([#15988](https://github.com/tailwindlabs/tailwindcss/pull/15988)) - Ensure `@custom-variant` has a non-empty selector list ([#16009](https://github.com/tailwindlabs/tailwindcss/pull/16009)) diff --git a/integrations/vite/ignored-packages.test.ts b/integrations/vite/ignored-packages.test.ts new file mode 100644 index 000000000..f7f85ff14 --- /dev/null +++ b/integrations/vite/ignored-packages.test.ts @@ -0,0 +1,81 @@ +import { candidate, css, fetchStyles, html, js, retryAssertion, test, ts, txt } from '../utils' + +const WORKSPACE = { + fs: { + 'package.json': txt` + { + "type": "module", + "dependencies": { + "tailwind-merge": "^2", + "@tailwindcss/vite": "workspace:^", + "tailwindcss": "workspace:^" + }, + "devDependencies": { + "vite": "^6" + } + } + `, + 'vite.config.ts': ts` + import tailwindcss from '@tailwindcss/vite' + import { defineConfig } from 'vite' + + export default defineConfig({ + build: { cssMinify: false }, + plugins: [tailwindcss()], + }) + `, + 'index.html': html` + + + + + `, + 'src/index.js': js` + import { twMerge } from 'tailwind-merge' + + twMerge('underline') + + console.log('underline') + `, + 'src/index.css': css`@import 'tailwindcss/utilities' layer(utilities);`, + }, +} + +test( + 'does not scan tailwind-merge in production builds', + WORKSPACE, + async ({ fs, exec, expect }) => { + await exec('pnpm vite build') + + let files = await fs.glob('dist/**/*.css') + expect(files).toHaveLength(1) + let [, content] = files[0] + + expect(content).toMatchInlineSnapshot(` + "@layer utilities { + .underline { + text-decoration-line: underline; + } + } + " + `) + }, +) + +test('does not scan tailwind-merge in dev builds', WORKSPACE, async ({ spawn, expect }) => { + let process = await spawn('pnpm vite dev') + await process.onStdout((m) => m.includes('ready in')) + + 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 styles = await fetchStyles(url, '/index.html') + + expect(styles).not.toContain(candidate`flex`) + }) +}) diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 2fedf7323..c8976c027 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -9,6 +9,8 @@ import type { Plugin, ResolvedConfig, Rollup, Update, ViteDevServer } from 'vite const DEBUG = env.DEBUG const SPECIAL_QUERY_RE = /[?&](raw|url)\b/ +const IGNORED_DEPENDENCIES = ['tailwind-merge'] + export default function tailwindcss(): Plugin[] { let servers: ViteDevServer[] = [] let config: ResolvedConfig | null = null @@ -62,6 +64,18 @@ export default function tailwindcss(): Plugin[] { }) function scanFile(id: string, content: string, extension: string, isSSR: boolean) { + for (let dependency of IGNORED_DEPENDENCIES) { + // We validated that Vite IDs always use posix style path separators, even on Windows. + // In dev build, Vite precompiles dependencies + if (id.includes(`.vite/deps/${dependency}.js`)) { + return + } + // In prod builds, use the node_modules path + if (id.includes(`/node_modules/${dependency}/`)) { + return + } + } + let updated = false for (let candidate of moduleGraphScanner.scanFiles([{ content, extension }])) { updated = true