From e1a85ac260e065c069307deb7f908bc46035a3e5 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Tue, 4 Feb 2025 12:45:23 +0100
Subject: [PATCH] Vite: Skip parsing stylesheets with the `?commonjs-proxy`
 flag (#16238)

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>
---
 CHANGELOG.md                            |  3 +-
 integrations/vite/index.test.ts         | 43 +++++++++++++++++++++++++
 packages/@tailwindcss-vite/src/index.ts |  8 +++--
 3 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7ff6cdbb6..f046da58c 100644
--- 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
index eebe11127..c0bee2b87 100644
--- 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
index c7cc111fa..0d7440094 100644
--- 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
 }