fix: vite plugin css resolution issue

ArcherGu · ArcherGu · commit 0d9ddac01ede · 2026-04-22T00:00:32.000+08:00
diff --git a/integrations/vite/resolvers.test.ts b/integrations/vite/resolvers.test.ts
@@ -10,8 +10,70 @@ import {
   test,
   ts,
   txt,
+  yaml,
 } from '../utils'
 
+const browserCssPluginFixture = {
+  '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`
+    <head>
+      <link rel="stylesheet" href="./src/index.css" />
+    </head>
+    <body>
+      <div class="browser-css-plugin">Hello, world!</div>
+    </body>
+  `,
+  'src/index.css': css`
+    @import 'tailwindcss';
+    @plugin 'plugin-browser-css';
+  `,
+}
+
 test(
   'resolves tsconfig paths in production build',
   {
@@ -288,6 +350,45 @@ test(
   },
 )
 
+test(
+  'resolves package plugins to JS entries in production build when browser points to CSS',
+  {
+    fs: browserCssPluginFixture,
+  },
+  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: browserCssPluginFixture,
+  },
+  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`)
+    })
+  },
+)
+
 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
@@ -25,6 +25,18 @@ const DEBUG = env.DEBUG
 const SPECIAL_QUERY_RE = /[?&](?:worker|sharedworker|raw|url)\b/
 const COMMON_JS_PROXY_RE = /\?commonjs-proxy/
 const INLINE_STYLE_ID_RE = /[?&]index=\d+\.css$/
+const JS_EXTENSIONS = new Set([
+  'js',
+  'cjs',
+  'mjs',
+  'ts',
+  'cts',
+  'mts',
+  'jsx',
+  'tsx',
+  'json',
+  'node',
+])
 
 export type PluginOptions = {
   /**
@@ -75,6 +87,7 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
         if (!resolved) return
         if (resolved === id) return
         if (!path.isAbsolute(resolved)) return
+        if (!isPotentialJsRootFile(resolved)) return
         return resolved
       }
     } else {
@@ -131,6 +144,7 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
         if (!resolved) return
         if (resolved === id) return
         if (!path.isAbsolute(resolved)) return
+        if (!isPotentialJsRootFile(resolved)) return
         return resolved
       }
     }
@@ -359,6 +373,10 @@ function isPotentialCssRootFile(id: string) {
   return isCssFile
 }
 
+function isPotentialJsRootFile(id: string) {
+  return JS_EXTENSIONS.has(getExtension(id))
+}
+
 function idToPath(id: string) {
   return path.resolve(id.replace(/\?.*$/, ''))
 }
