8000 Vite: Skip parsing stylesheets with the `?commonjs-proxy` flag (#16238) · tailwindlabs/tailwindcss@e1a85ac · GitHub
Skip to content

Commit e1a85ac

Browse files
philipp-spiessRobinMalfait
philipp-spiess
and
RobinMalfait
authored
Vite: Skip parsing styl 8000 esheets 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>
1 parent 06dfa39 commit e1a85ac

File tree

3 files changed

+50
-4
lines changed

3 files changed

+50
-4
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
99

1010
### Fixed
1111

12-
- Ensure that the `containers` JS theme key is added to the `--container-*` namespace. ([#16169](https://github.com/tailwindlabs/tailwindcss/pull/16169))
12+
- Ensure that the `containers` JS theme key is added to the `--container-*` namespace ([#16169](https://github.com/tailwindlabs/tailwindcss/pull/16169))
1313
- Fix missing `@keyframes` definition ([#16237](https://github.com/tailwindlabs/tailwindcss/pull/16237))
14+
- Vite: Skip parsing stylesheets with the `?commonjs-proxy` flag ([#16238](https://github.com/tailwindlabs/tailwindcss/pull/16238))
1415

1516
## [4.0.3] - 2025-02-01
1617

‎integrations/vite/index.test.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -841,6 +841,49 @@ test(
841841
},
842842
)
843843

844+
test(
845+
`does not interfere with ?commonjs-proxy modules`,
846+
{
847+
fs: {
848+
'package.json': json`
849+
{
850+
"type": "module",
851+
"dependencies": {
852+
"@tailwindcss/vite": "workspace:^",
853+
"tailwindcss": "workspace:^",
854+
"plotly.js": "^3",
855+
"vite": "^6"
856+
}
857+
}
858+
`,
859+
'vite.config.ts': ts`
860+
import tailwindcss from '@tailwindcss/vite'
861+
import { defineConfig } from 'vite'
862+
863+
export default defineConfig({
864+
build: { cssMinify: false },
865+
plugins: [tailwindcss()],
866+
})
867+
`,
868+
'index.html': html`
869+
<head>
870+
<script type="module" src="./src/index.js"></script>
871+
</head>
872+
`,
873+
'src/index.js': js`import Plotly from 'plotly.js/lib/core'`,
874+
},
875+
},
876+
async ({ exec, expect, fs }) => {
877+
await exec('pnpm vite build')
878+
879+
let files = await fs.glob('dist/**/*.css')
880+
expect(files).toHaveLength(1)
881+
let [filename] = files[0]
882+
883+
await fs.expectFileToContain(filename, [candidate`maplibregl-map`])
884+
},
885+
)
886+
844887
function firstLine(str: string) {
845888
return str.split('\n')[0]
846889
}

‎packages/@tailwindcss-vite/src/index.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import path from 'node:path'
77
import type { Plugin, ResolvedConfig, Rollup, Update, ViteDevServer } from 'vite'
88

99
const DEBUG = env.DEBUG
10-
const SPECIAL_QUERY_RE = /[?&](raw|url)\b/
10+
const SPECIAL_QUERY_RE = /[?&](?:worker|sharedworker|raw|url)\b/
11+
const COMMON_JS_PROXY_RE = /\?commonjs-proxy/
1112
const INLINE_STYLE_ID_RE = /[?&]index\=\d+\.css$/
1213

1314
const IGNORED_DEPENDENCIES = ['tailwind-merge']
@@ -315,8 +316,9 @@ function isPotentialCssRootFile(id: string) {
315316
let isCssFile =
316317
(extension === 'css' || id.includes('&lang.css') || id.match(INLINE_STYLE_ID_RE)) &&
317318
// Don't intercept special static asset resources
318-
!SPECIAL_QUERY_RE.test(id)
319-
319+
!SPECIAL_QUERY_RE.test(id) &&
320+
!COMMON_JS_PROXY_RE.test(id)
321+
if (isCssFile) console.log(id)
320322
return isCssFile
321323
}
322324

0 commit comments

Comments
 (0)