From f3fdda2a5cb9de50c897c79003aa58182cd9269b Mon Sep 17 00:00:00 2001 From: ArcherGu <34826812+ArcherGu@users.noreply.github.com> Date: Wed, 22 Apr 2026 23:25:01 +0800 Subject: [PATCH] fix(vite): avoid resolving JS plugins to browser CSS entries (#19949) Edit: some edits by @RobinMalfait --- ## Summary Fix a regression in `@tailwindcss/vite` introduced by `#19803` where JS plugin resolution could incorrectly resolve a package to its `browser` CSS entry. In cases like `daisyui`, Vite can resolve `@plugin "daisyui"` to `daisyui.css` instead of the package's JS entry, which causes Tailwind to try to load a CSS file as a JS plugin and fail with: ```txt Unknown file extension ".css" ``` This change keeps the `aliasOnly: false` behavior from `#19803` so tsconfig path resolution still works, but adds a JS-entry guard to `customJsResolver` in `@tailwindcss/vite`. If Vite resolves a plugin request to a non-JS file like `.css`, the custom resolver now returns `undefined` so Tailwind's internal fallback resolver can resolve the package as a JS plugin entry instead. I also added integration coverage for a package whose `main`/`module` points to JS while `browser` points to CSS, and verified that `@plugin "pkg"` still resolves to the JS entry in both build and dev mode. ## Test plan Added new integration tests in `integrations/vite/resolvers.test.ts` covering a package with: - `main` / `module` -> JS - `browser` -> CSS - `@plugin "pkg"` -> should resolve to JS, not CSS Verified with: ```sh pnpm test:integrations vite/resolvers.test.ts -t "browser points to CSS" pnpm test:integrations vite/resolvers.test.ts -t "resolves tsconfig paths" ``` These verify that: - `@plugin` no longer resolves to a CSS browser entry - the original tsconfig paths fix from `#19803` still works in both build and dev mode --- Maintainer edits: Instead of hardcoding file extensions, first try to resolve aliases and then fallback to the default resolving system we had before. We still check for a `.css` extension, even in the JS resolver because some dependencies (like `daisyUI`) put the CSS file there instead of in an `exports.style`. If we detect that, we still fallback to the default resolving logic. This should be compatible with the original issue we were trying to fix where we wanted to make Vite aliases work. Fixes: #19950 [ci-all] --------- Co-authored-by: Robin Malfait --- CHANGELOG.md | 4 + integrations/vite/resolvers.test.ts | 225 ++++++++++++++++++++++++ packages/@tailwindcss-vite/src/index.ts | 26 ++- 3 files changed, 253 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6118fd88f..8d7e57da1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - _Experimental_: add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901)) +### Fixed + +- Ensure `@plugin` resolves package JavaScript entries instead of browser CSS entries when using `@tailwindcss/vite` ([#19949](https://github.com/tailwindlabs/tailwindcss/pull/19949)) + ## [4.2.4] - 2026-04-21 ### Fixed diff --git a/integrations/vite/resolvers.test.ts b/integrations/vite/resolvers.test.ts index f2f4b8a0b..5ff5df5b1 100644 --- a/integrations/vite/resolvers.test.ts +++ b/integrations/vite/resolvers.test.ts @@ -10,6 +10,7 @@ import { test, ts, txt, + yaml, } from '../utils' test( @@ -288,6 +289,230 @@ test( }, ) +test( + 'resolves package plugins to JS entries in production build when browser points to CSS', + { + fs: { + 'package.json': json` + { + "type": "module", + "dependencies": { + "@tailwindcss/vite": "workspace:^", + "plugin-browser-css": "workspace:*", + "tailwindcss": "workspace:^" + }, + "devDependencies": { + "vite": "^8" + } + } + `, + 'pnpm-workspace.yaml': yaml` + # + packages: + - packages/* + `, + 'packages/plugin-browser-css/package.json': json` + { + "name": "plugin-browser-css", + "version": "1.0.0", + "type": "module", + "main": "./index.js", + "module": "./index.js", + "browser": "./browser.css" + } + `, + 'packages/plugin-browser-css/index.js': js` + export default function ({ addUtilities }) { + addUtilities({ '.browser-css-plugin': { 'border-bottom': '1px solid green' } }) + } + `, + 'packages/plugin-browser-css/browser.css': css` + .should-not-be-loaded-as-a-plugin { + display: none; + } + `, + 'vite.config.ts': ts` + import tailwindcss from '@tailwindcss/vite' + import { defineConfig } from 'vite' + + export default defineConfig({ + build: { cssMinify: false }, + plugins: [tailwindcss()], + }) + `, + 'index.html': html` + + + + + +
Hello, world!
+ + + `, + 'src/index.css': css` + @import 'tailwindcss'; + @plugin 'plugin-browser-css'; + `, + }, + }, + async ({ fs, exec, expect }) => { + await exec('pnpm vite build') + + let files = await fs.glob('dist/**/*.css') + expect(files).toHaveLength(1) + let [filename] = files[0] + + await fs.expectFileToContain(filename, [candidate`browser-css-plugin`]) + }, +) + +test( + 'resolves package plugins to JS entries in dev mode when browser points to CSS', + { + fs: { + 'package.json': json` + { + "type": "module", + "dependencies": { + "@tailwindcss/vite": "workspace:^", + "plugin-browser-css": "workspace:*", + "tailwindcss": "workspace:^" + }, + "devDependencies": { + "vite": "^8" + } + } + `, + 'pnpm-workspace.yaml': yaml` + # + packages: + - packages/* + `, + 'packages/plugin-browser-css/package.json': json` + { + "name": "plugin-browser-css", + "version": "1.0.0", + "type": "module", + "main": "./index.js", + "module": "./index.js", + "browser": "./browser.css" + } + `, + 'packages/plugin-browser-css/index.js': js` + export default function ({ addUtilities }) { + addUtilities({ '.browser-css-plugin': { 'border-bottom': '1px solid green' } }) + } + `, + 'packages/plugin-browser-css/browser.css': css` + .should-not-be-loaded-as-a-plugin { + display: none; + } + `, + 'vite.config.ts': ts` + import tailwindcss from '@tailwindcss/vite' + import { defineConfig } from 'vite' + + export default defineConfig({ + build: { cssMinify: false }, + plugins: [tailwindcss()], + }) + `, + 'index.html': html` + + + + + +
Hello, world!
+ + + `, + 'src/index.css': css` + @import 'tailwindcss'; + @plugin 'plugin-browser-css'; + `, + }, + }, + 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).toContain(candidate`browser-css-plugin`) + }) + }, +) + +test( + 'resolves package plugins in dev mode when package exports CSS files', + { + fs: { + 'package.json': json` + { + "type": "module", + "dependencies": { + "@tailwindcss/vite": "workspace:^", + "daisyui": "^5", + "tailwindcss": "workspace:^" + }, + "devDependencies": { + "vite": "^8" + } + } + `, + '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.css': css` + @import 'tailwindcss'; + @plugin 'daisyui'; + `, + }, + }, + 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).toContain('.btn') + expect(styles).toContain('.btn-primary') + }) + }, +) + describe.each(['postcss', 'lightningcss'])('%s', (transformer) => { test( 'resolves aliases in production build', diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 5b376937c..b0c25b5d7 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -71,10 +71,21 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] { return resolved } customJsResolver = async (id: string, base: string) => { - let resolved = await jsResolver(id, base, false, isSSR) + // Resolve Vite aliases first so `@plugin "@/foo"` keeps working, but + // let bare package specifiers fall through to Node-style resolution. + let resolved = await jsResolver(id, base, true, isSSR) + if (resolved && resolved !== id) { + if (path.isAbsolute(resolved)) return resolved + if (resolved[0] === '.') return path.resolve(base, resolved) + } + + // Fall back to Vite's full resolver for features like tsconfigPaths, + // but reject CSS results since plugins must resolve to executable code. + resolved = await jsResolver(id, base, false, isSSR) if (!resolved) return if (resolved === id) return if (!path.isAbsolute(resolved)) return + if (resolved.endsWith('.css')) return return resolved } } else { @@ -127,10 +138,21 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] { return resolved } customJsResolver = async (id: string, base: string) => { - let resolved = await jsResolver(env, id, base, false) + // Resolve Vite aliases first so `@plugin "@/foo"` keeps working, but + // let bare package specifiers fall through to Node-style resolution. + let resolved = await jsResolver(env, id, base, true) + if (resolved && resolved !== id) { + if (path.isAbsolute(resolved)) return resolved + if (resolved[0] === '.') return path.resolve(base, resolved) + } + + // Fall back to Vite's full resolver for features like tsconfigPaths, + // but reject CSS results since plugins must resolve to executable code. + resolved = await jsResolver(env, id, base, false) if (!resolved) return if (resolved === id) return if (!path.isAbsolute(resolved)) return + if (resolved.endsWith('.css')) return return resolved } }