fix: strip pure CSS chunk imports when chunkImportMap is enabled (#22841)

Author: sapphi-red

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

@@ -94,7 +94,7 @@ import { type DevEnvironment } from '..'
 import type { PackageCache } from '../packages'
 import { findNearestMainPackageData } from '../packages'
 import { nodeResolveWithVite } from '../nodeResolve'
-import { addToHTMLProxyTransformResult } from './html'
+import { addToHTMLProxyTransformResult, getImportMap } from './html'
 import {
   assetUrlRE,
   cssEntriesMap,
@@ -1072,8 +1072,21 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           .map((pureCssChunk) => prelimaryNameToChunkMap[pureCssChunk.fileName])
           .filter(Boolean)
 
+        let importMapReverseMapping: Record<string, string> | undefined
+        if (config.build.chunkImportMap) {
+          const importMap = getImportMap(bundle, config)!
+          importMapReverseMapping = Object.fromEntries(
+            Object.entries(importMap.mapping).map(([k, v]) => [v, k]),
+          )
+        }
+        const pureCssChunkNamesInCode = importMapReverseMapping
+          ? pureCssChunkNames.map(
+              (name) => importMapReverseMapping![name] ?? name,
+            )
+          : pureCssChunkNames
+
         const replaceEmptyChunk = getEmptyChunkReplacer(
-          pureCssChunkNames,
+          pureCssChunkNamesInCode,
           opts.format,
         )
 

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

@@ -1669,3 +1669,34 @@ export function getImportMapFilename(config: ResolvedConfig): string {
   }
   return 'importmap.json'
 }
+
+/**
+ * Read and parse the chunk import map asset from the bundle.
+ * Returns `undefined` when the import map is not present in the bundle.
+ */
+export function getImportMap(
+  bundle: OutputBundle,
+  config: ResolvedConfig,
+):
+  | {
+      asset: OutputAsset
+      /** import map entries with the base stripped (placeholder name -> real name) */
+      mapping: Record<string, string>
+    }
+  | undefined {
+  const asset = bundle[getImportMapFilename(config)] as OutputAsset | undefined
+  if (!asset) return undefined
+
+  const content: { imports: Record<string, string> } = JSON.parse(
+    typeof asset.source === 'string'
+      ? asset.source
+      : new TextDecoder().decode(asset.source),
+  )
+  const mapping = Object.fromEntries(
+    Object.entries(content.imports).map(([k, v]) => [
+      k.slice(config.base.length),
+      v.slice(config.base.length),
+    ]),
+  )
+  return { asset, mapping }
+}

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

@@ -2,7 +2,7 @@ import path from 'node:path'
 import MagicString from 'magic-string'
 import type { ImportSpecifier } from 'es-module-lexer'
 import { init, parse as parseImports } from 'es-module-lexer'
-import type { OutputAsset, SourceMap } from 'rolldown'
+import type { SourceMap } from 'rolldown'
 import { viteBuildImportAnalysisPlugin as nativeBuildImportAnalysisPlugin } from 'rolldown/experimental'
 import type { RawSourceMap } from '@jridgewell/remapping'
 import convertSourceMap from 'convert-source-map'
@@ -13,7 +13,7 @@ import { toOutputFilePathInJS } from '../build'
 import { genSourceMapUrl } from '../server/sourcemap'
 import type { PartialEnvironment } from '../baseEnvironment'
 import { removedPureCssFilesCache } from './css'
-import { getImportMapFilename } from './html'
+import { getImportMap, getImportMapFilename } from './html'
 
 type FileDep = {
   url: string
@@ -351,20 +351,8 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin[] {
       let importMapMapping: Record<string, string> | undefined
       let importMapReverseMapping: Record<string, string> | undefined
       if (config.build.chunkImportMap) {
-        const decoder = new TextDecoder()
-        const importMap = bundle[getImportMapFilename(config)]! as OutputAsset
-        const importMapContent: { imports: Record<string, string> } =
-          JSON.parse(
-            typeof importMap.source === 'string'
-              ? importMap.source
-              : decoder.decode(importMap.source),
-          )
-        importMapMapping = Object.fromEntries(
-          Object.entries(importMapContent.imports).map(([k, v]) => [
-            k.slice(config.base.length),
-            v.slice(config.base.length),
-          ]),
-        )
+        const importMap = getImportMap(bundle, config)!
+        importMapMapping = importMap.mapping
         importMapReverseMapping = Object.fromEntries(
           Object.entries(importMapMapping).map(([k, v]) => [v, k]),
         )
@@ -373,7 +361,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin[] {
           this.emitFile({
             type: 'asset',
             fileName: 'importmap.legacy.json',
-            source: importMap.source,
+            source: importMap.asset.source,
           })
           delete bundle[getImportMapFilename(config)]
         }

playground/chunk-importmap/__tests__/chunk-importmap.spec.ts

@@ -35,6 +35,15 @@ test('dynamic css', async () => {
   await expect.poll(() => getColor('.dynamic')).toBe('red')
 })
 
+// a CSS-only module shared by multiple chunks becomes a pure CSS chunk that is
+// removed from the output. The import map must not keep referencing its removed
+// JS file, otherwise chunks importing it 404 and fail to execute
+// (https://github.com/vitejs/vite/issues/22740)
+test('shared pure css chunk', async () => {
+  await expect.poll(() => page.textContent('.shared-js')).toBe('shared-js: ok')
+  await expect.poll(() => getColor('.shared')).toBe('green')
+})
+
 test('worker', async () => {
   await expect.poll(() => page.textContent('.worker')).toBe('worker: pong')
 })

playground/chunk-importmap/dynamic.js

@@ -1,3 +1,4 @@
 import './dynamic.css'
+import './shared-dep.js'
 
 document.querySelector('.dynamic-js').textContent = 'dynamic-js: ok'

playground/chunk-importmap/dynamic2.js

@@ -0,0 +1,3 @@
+import './shared-dep.js'
+
+document.querySelector('.shared-js').textContent = 'shared-js: ok'

playground/chunk-importmap/index.html

@@ -12,9 +12,11 @@
 
   <p class="static">static</p>
   <p class="dynamic">dynamic</p>
+  <p class="shared">shared</p>
 
   <p class="static-js">static-js: error</p>
   <p class="dynamic-js">dynamic-js: error</p>
+  <p class="shared-js">shared-js: error</p>
 
   <p class="worker">worker: ping</p>
 </body>

playground/chunk-importmap/index.js

@@ -1,5 +1,6 @@
 import './static.js'
 import('./dynamic.js')
+import('./dynamic2.js')
 
 import myWorker from './worker.js?worker'
 

playground/chunk-importmap/shared-dep.js

@@ -0,0 +1,4 @@
+// CSS-only module (no JS exports) shared by multiple dynamic chunks, so it is
+// hoisted into a shared pure CSS chunk that those chunks import statically
+// (https://github.com/vitejs/vite/issues/22740)
+import './shared-styles.css'

playground/chunk-importmap/shared-styles.css

@@ -0,0 +1,3 @@
+.shared {
+  color: green;
+}