Vite: Skip parsing stylesheets with the ?commonjs-proxy flag (#16238)

philipp-spiess · RobinMalfait · web-flow · commit e1a85ac260e0 · 2025-02-04T12:45:23.000+01:00
Fixes #16233 Vite has a number of special parameters that can be appended to `.css` files that make it actually load as a JavaScript module. One such parameter that we haven't handled before is the `?commonjs-proxy` flag. When importing e.g. `plotly.js/lib/core`, the dependency tree would eventually load a file called `*.css?commonjs-proxy`. We previously scanned this for candidates even though it was not, in-fact, a stylesheet. This PR fixes this by adding the `?commonjs-proxy` to the ignore list. I have also updated `SPECIAL_QUERY_RE` to more closely match the Vite implementation. It does seem like this was the only condition we were missing, though: https://github.com/vitejs/vite/blob/2b2299cbac37548a163f0523c0cb92eb70a9aacf/packages/vite/src/node/plugins/css.ts#L511-L517 ## Test plan Add and import `plotly.js/lib/core` into a Vite app. I also added an integration test to do that. Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,8 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- Ensure that the `containers` JS theme key is added to the `--container-*` namespace. ([#16169](https://github.com/tailwindlabs/tailwindcss/pull/16169))
+- Ensure that the `containers` JS theme key is added to the `--container-*` namespace ([#16169](https://github.com/tailwindlabs/tailwindcss/pull/16169))
 - Fix missing `@keyframes` definition ([#16237](https://github.com/tailwindlabs/tailwindcss/pull/16237))
+- Vite: Skip parsing stylesheets with the `?commonjs-proxy` flag ([#16238](https://github.com/tailwindlabs/tailwindcss/pull/16238))
 
 ## [4.0.3] - 2025-02-01
 
diff --git a/integrations/vite/index.test.ts b/integrations/vite/index.test.ts
@@ -841,6 +841,49 @@ test(
   },
 )
 
+test(
+  `does not interfere with ?commonjs-proxy modules`,
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^",
+            "plotly.js": "^3",
+            "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`
+        <head>
+          <script type="module" src="./src/index.js"></script>
+        </head>
+      `,
+      'src/index.js': js`import Plotly from 'plotly.js/lib/core'`,
+    },
+  },
+  async ({ exec, expect, fs }) => {
+    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`maplibregl-map`])
+  },
+)
+
 function firstLine(str: string) {
   return str.split('\n')[0]
 }
diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
@@ -7,7 +7,8 @@ import path from 'node:path'
 import type { Plugin, ResolvedConfig, Rollup, Update, ViteDevServer } from 'vite'
 
 const DEBUG = env.DEBUG
-const SPECIAL_QUERY_RE = /[?&](raw|url)\b/
+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 IGNORED_DEPENDENCIES = ['tailwind-merge']
@@ -315,8 +316,9 @@ function isPotentialCssRootFile(id: string) {
   let isCssFile =
     (extension === 'css' || id.includes('&lang.css') || id.match(INLINE_STYLE_ID_RE)) &&
     // Don't intercept special static asset resources
-    !SPECIAL_QUERY_RE.test(id)
-
+    !SPECIAL_QUERY_RE.test(id) &&
+    !COMMON_JS_PROXY_RE.test(id)
+  if (isCssFile) console.log(id)
   return isCssFile
 }
 
