feat: support originalFilename (#17867)

Author: sapphi-red

package.json

@@ -68,7 +68,7 @@
     "playwright-chromium": "^1.46.0",
     "prettier": "3.3.3",
     "rimraf": "^5.0.10",
-    "rollup": "^4.13.0",
+    "rollup": "^4.20.0",
     "rollup-plugin-esbuild": "^6.1.1",
     "simple-git-hooks": "^2.11.1",
     "tslib": "^2.6.3",

packages/vite/package.json

@@ -87,7 +87,7 @@
   "dependencies": {
     "esbuild": "^0.21.3",
     "postcss": "^8.4.41",
-    "rollup": "^4.13.0"
+    "rollup": "^4.20.0"
   },
   "optionalDependencies": {
     "fsevents": "~2.3.3"

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

@@ -43,7 +43,7 @@ const assetCache = new WeakMap<ResolvedConfig, Map<string, string>>()
 // For the manifest, we need to preserve the original file path and isEntry
 // for CSS assets. We keep a map from referenceId to this information.
 export interface GeneratedAssetMeta {
-  originalName: string
+  originalFileName: string
   isEntry?: boolean
 }
 export const generatedAssets = new WeakMap<
@@ -371,15 +371,15 @@ async function fileToBuiltUrl(
     const { search, hash } = parseUrl(id)
     const postfix = (search || '') + (hash || '')
 
+    const originalFileName = normalizePath(path.relative(config.root, file))
     const referenceId = pluginContext.emitFile({
+      type: 'asset',
       // Ignore directory structure for asset file names
       name: path.basename(file),
-      type: 'asset',
+      originalFileName,
       source: content,
     })
-
-    const originalName = normalizePath(path.relative(config.root, file))
-    generatedAssets.get(config)!.set(referenceId, { originalName })
+    generatedAssets.get(config)!.set(referenceId, { originalFileName })
 
     url = `__VITE_ASSET__${referenceId}__${postfix ? `$_${postfix}__` : ``}` // TODO_BASE
   }

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

@@ -424,8 +424,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
     } else {
       return path.dirname(
         assetFileNames({
-          name: cssAssetName,
           type: 'asset',
+          name: cssAssetName,
+          originalFileName: null,
           source: '/* vite internal call, ignore */',
         }),
       )
@@ -646,7 +647,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       let s: MagicString | undefined
       const urlEmitTasks: Array<{
         cssAssetName: string
-        originalFilename: string
+        originalFileName: string
         content: string
         start: number
         end: number
@@ -658,9 +659,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         while ((match = cssUrlAssetRE.exec(code))) {
           const [full, idHex] = match
           const id = Buffer.from(idHex, 'hex').toString()
-          const originalFilename = cleanUrl(id)
+          const originalFileName = cleanUrl(id)
           const cssAssetName = ensureFileExt(
-            path.basename(originalFilename),
+            path.basename(originalFileName),
             '.css',
           )
           if (!styles.has(id)) {
@@ -675,7 +676,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
           urlEmitTasks.push({
             cssAssetName,
-            originalFilename,
+            originalFileName,
             content: cssContent,
             start: match.index,
             end: match.index + full.length,
@@ -701,19 +702,18 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
         for (const {
           cssAssetName,
-          originalFilename,
+          originalFileName,
           content,
           start,
           end,
         } of urlEmitTasks) {
           const referenceId = this.emitFile({
-            name: cssAssetName,
             type: 'asset',
+            name: cssAssetName,
+            originalFileName,
             source: content,
           })
-          generatedAssets
-            .get(config)!
-            .set(referenceId, { originalName: originalFilename })
+          generatedAssets.get(config)!.set(referenceId, { originalFileName })
 
           const filename = this.getFileName(referenceId)
           chunk.viteMetadata!.importedAssets.add(cleanUrl(filename))
@@ -751,7 +751,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
               (!chunk.facadeModuleId || !isCSSRequest(chunk.facadeModuleId))
                 ? path.basename(cssFullAssetName)
                 : cssFullAssetName
-            const originalFilename = getChunkOriginalFileName(
+            const originalFileName = getChunkOriginalFileName(
               chunk,
               config.root,
               opts.format,
@@ -766,13 +766,14 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
             // emit corresponding css file
             const referenceId = this.emitFile({
-              name: cssAssetName,
               type: 'asset',
+              name: cssAssetName,
+              originalFileName,
               source: chunkCSS,
             })
             generatedAssets
               .get(config)!
-              .set(referenceId, { originalName: originalFilename, isEntry })
+              .set(referenceId, { originalFileName, isEntry })
             chunk.viteMetadata!.importedCss.add(this.getFileName(referenceId))
           } else if (!config.build.ssr) {
             // legacy build and inline css

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

@@ -934,6 +934,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         )
         this.emitFile({
           type: 'asset',
+          originalFileName: normalizedId,
           fileName: shortEmitName,
           source: result,
         })

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

@@ -9,7 +9,6 @@ import type { ResolvedConfig } from '..'
 import type { Plugin } from '../plugin'
 import { normalizePath, sortObjectKeys } from '../utils'
 import { generatedAssets } from './asset'
-import type { GeneratedAssetMeta } from './asset'
 
 const endsWithJSRE = /\.[cm]?js$/
 
@@ -111,18 +110,20 @@ export function manifestPlugin(config: ResolvedConfig): Plugin {
         return manifestChunk
       }
 
-      const fileNameToAssetMeta = new Map<string, GeneratedAssetMeta>()
       const assets = generatedAssets.get(config)!
-      assets.forEach((asset, referenceId) => {
-        try {
-          const fileName = this.getFileName(referenceId)
-          fileNameToAssetMeta.set(fileName, asset)
-        } catch (error: unknown) {
-          // The asset was generated as part of a different output option.
-          // It was already handled during the previous run of this plugin.
-          assets.delete(referenceId)
+      const entryCssAssetFileNames = new Set()
+      for (const [id, asset] of assets.entries()) {
+        if (asset.isEntry) {
+          try {
+            const fileName = this.getFileName(id)
+            entryCssAssetFileNames.add(fileName)
+          } catch (error: unknown) {
+            // The asset was generated as part of a different output option.
+            // It was already handled during the previous run of this plugin.
+            assets.delete(id)
+          }
         }
-      })
+      }
 
       const fileNameToAsset = new Map<string, ManifestChunk>()
 
@@ -132,9 +133,9 @@ export function manifestPlugin(config: ResolvedConfig): Plugin {
           manifest[getChunkName(chunk)] = createChunk(chunk)
         } else if (chunk.type === 'asset' && typeof chunk.name === 'string') {
           // Add every unique asset to the manifest, keyed by its original name
-          const assetMeta = fileNameToAssetMeta.get(chunk.fileName)
-          const src = assetMeta?.originalName ?? chunk.name
-          const asset = createAsset(chunk, src, assetMeta?.isEntry)
+          const src = chunk.originalFileName ?? chunk.name
+          const isEntry = entryCssAssetFileNames.has(chunk.fileName)
+          const asset = createAsset(chunk, src, isEntry)
 
           // If JS chunk and asset chunk are both generated from the same source file,
           // prioritize JS chunk as it contains more information
@@ -147,15 +148,15 @@ export function manifestPlugin(config: ResolvedConfig): Plugin {
       }
 
       // Add deduplicated assets to the manifest
-      assets.forEach(({ originalName }, referenceId) => {
-        if (!manifest[originalName]) {
+      for (const [referenceId, { originalFileName }] of assets.entries()) {
+        if (!manifest[originalFileName]) {
           const fileName = this.getFileName(referenceId)
           const asset = fileNameToAsset.get(fileName)
           if (asset) {
-            manifest[originalName] = asset
+            manifest[originalFileName] = asset
           }
         }
-      })
+      }
 
       outputCount++
       const output = config.build.rollupOptions?.output

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

@@ -20,7 +20,11 @@ import {
 import { cleanUrl } from '../../shared/utils'
 import { fileToUrl } from './asset'
 
-type WorkerBundleAsset = { fileName: string; source: string | Uint8Array }
+type WorkerBundleAsset = {
+  fileName: string
+  originalFileName: string | null
+  source: string | Uint8Array
+}
 
 interface WorkerCache {
   // save worker all emit chunk avoid rollup make the same asset unique.
@@ -111,6 +115,7 @@ async function bundleWorkerEntry(
       } else if (outputChunk.type === 'chunk') {
         saveEmitWorkerAsset(config, {
           fileName: outputChunk.fileName,
+          originalFileName: null,
           source: outputChunk.code,
         })
       }
@@ -136,6 +141,7 @@ function emitSourcemapForWorkerEntry(
       const mapFileName = chunk.fileName + '.map'
       saveEmitWorkerAsset(config, {
         fileName: mapFileName,
+        originalFileName: null,
         source: data,
       })
     }
@@ -169,6 +175,7 @@ export async function workerFileToUrl(
     fileName = outputChunk.fileName
     saveEmitWorkerAsset(config, {
       fileName,
+      originalFileName: null,
       source: outputChunk.code,
     })
     workerMap.bundle.set(id, fileName)
@@ -447,6 +454,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
         this.emitFile({
           type: 'asset',
           fileName: asset.fileName,
+          originalFileName: asset.originalFileName,
           source: asset.source,
         })
       })