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 <malfait.robin@gmail.com>
This commit is contained in:
ArcherGu
GitHub
parent
69ad7cc5ec
commit
f3fdda2a5c
3 changed files with 253 additions and 2 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="./src/index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser-css-plugin">Hello, world!</div>
|
||||
</body>
|
||||
</html>
|
||||
`,
|
||||
'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`
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="./src/index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser-css-plugin">Hello, world!</div>
|
||||
</body>
|
||||
</html>
|
||||
`,
|
||||
'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`
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="./src/index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<button class="btn btn-primary">Hello, world!</button>
|
||||
</body>
|
||||
</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',
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue