fix(css): handle pure css chunk heuristic with special queries (#12091)

Author: bluwy

packages/vite/src/node/plugins/css.ts

@@ -464,15 +464,17 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       let isPureCssChunk = true
       const ids = Object.keys(chunk.modules)
       for (const id of ids) {
-        if (
-          !isCSSRequest(id) ||
-          cssModuleRE.test(id) ||
-          commonjsProxyRE.test(id)
-        ) {
-          isPureCssChunk = false
-        }
         if (styles.has(id)) {
           chunkCSS += styles.get(id)
+          // a css module contains JS, so it makes this not a pure css chunk
+          if (cssModuleRE.test(id)) {
+            isPureCssChunk = false
+          }
+        } else {
+          // if the module does not have a style, then it's not a pure css chunk.
+          // this is true because in the `transform` hook above, only modules
+          // that are css gets added to the `styles` map.
+          isPureCssChunk = false
         }
       }
 

playground/css-codesplit/__tests__/css-codesplit.spec.ts

@@ -5,6 +5,7 @@ test('should load all stylesheets', async () => {
   expect(await getColor('h1')).toBe('red')
   expect(await getColor('h2')).toBe('blue')
   expect(await getColor('.dynamic')).toBe('green')
+  expect(await getColor('.chunk')).toBe('magenta')
 })
 
 test('should load dynamic import with inline', async () => {
@@ -40,4 +41,8 @@ describe.runIf(isBuild)('build', () => {
     expect(manifest['index.html'].css.length).toBe(2)
     expect(manifest['other.js'].css.length).toBe(1)
   })
+
+  test('should not mark a css chunk with ?url and normal import as pure css chunk', () => {
+    expect(findAssetFile(/chunk-.*\.js$/)).toBeTruthy()
+  })
 })

playground/css-codesplit/chunk.css

@@ -0,0 +1,3 @@
+.chunk {
+  color: magenta;
+}

playground/css-codesplit/index.html

@@ -12,5 +12,7 @@ <h2>This should be blue</h2>
   <button class="order-bulk-update">change to green</button>
 </p>
 
+<p class="chunk">This should be magenta</p>
+
 <script type="module" src="/main.js"></script>
 <div id="app"></div>

playground/css-codesplit/main.js

@@ -2,6 +2,12 @@ import './style.css'
 import './main.css'
 import './order'
 
+import './chunk.css'
+import chunkCssUrl from './chunk.css?url'
+
+// use this to not treeshake
+globalThis.__test_chunkCssUrl = chunkCssUrl
+
 import('./async.css')
 
 import('./inline.css?inline').then((css) => {

playground/css-codesplit/other.js

@@ -1 +1,6 @@
 import './style.css'
+import './chunk.css'
+import chunkCssUrl from './chunk.css?url'
+
+// use this to not treeshake
+globalThis.__test_chunkCssUrl = chunkCssUrl

playground/css-codesplit/vite.config.js

@@ -8,6 +8,14 @@ module.exports = {
         main: resolve(__dirname, './index.html'),
         other: resolve(__dirname, './other.js'),
       },
+      output: {
+        manualChunks(id) {
+          // make `chunk.css` it's own chunk for easier testing of pure css chunks
+          if (id.includes('chunk.css')) {
+            return 'chunk'
+          }
+        },
+      },
     },
   },
 }