fix: fix css file or contents missing error in build watch (vitejs#3742)

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

@@ -27,17 +27,21 @@ const assetHashToFilenameMap = new WeakMap<
   ResolvedConfig,
   Map<string, string>
 >()
+// save hashes of the files that has been emitted in build watch
+const emittedHashesSet: Set<string> = new Set()
 
 /**
  * Also supports loading plain strings with import text from './foo.txt?raw'
  */
 export function assetPlugin(config: ResolvedConfig): Plugin {
+  // assetHashToFilenameMap initialization in buildStart causes getAssetFilename to return undefined
+  assetHashToFilenameMap.set(config, new Map())
   return {
     name: 'vite:asset',
 
     buildStart() {
       assetCache.set(config, new Map())
-      assetHashToFilenameMap.set(config, new Map())
+      emittedHashesSet.clear()
     },
 
     resolveId(id) {
@@ -202,8 +206,6 @@ async function fileToBuiltUrl(
   }
 
   const file = cleanUrl(id)
-  const { search, hash } = parseUrl(id)
-  const postfix = (search || '') + (hash || '')
   const content = await fsp.readFile(file)
 
   let url
@@ -223,21 +225,25 @@ async function fileToBuiltUrl(
     // https://bundlers.tooling.report/hashing/asset-cascade/
     // https://github.com/rollup/rollup/issues/3415
     const map = assetHashToFilenameMap.get(config)!
-
     const contentHash = getAssetHash(content)
+    const { search, hash } = parseUrl(id)
+    const postfix = (search || '') + (hash || '')
+    const basename = path.basename(file)
+    const ext = path.extname(basename)
+    const fileName = path.posix.join(
+      config.build.assetsDir,
+      `${basename.slice(0, -ext.length)}.${contentHash}${ext}`
+    )
     if (!map.has(contentHash)) {
-      const basename = path.basename(file)
-      const ext = path.extname(basename)
-      const fileName = path.posix.join(
-        config.build.assetsDir,
-        `${basename.slice(0, -ext.length)}.${contentHash}${ext}`
-      )
       map.set(contentHash, fileName)
+    }
+    if (!emittedHashesSet.has(contentHash)) {
       pluginContext.emitFile({
         fileName,
         type: 'asset',
         source: content
       })
+      emittedHashesSet.add(contentHash)
     }
 
     url = `__VITE_ASSET__${contentHash}__${postfix ? `$_${postfix}__` : ``}`

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

@@ -223,7 +223,8 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
  * Plugin applied after user plugins
  */
 export function cssPostPlugin(config: ResolvedConfig): Plugin {
-  let styles: Map<string, string>
+  // styles initialization in buildStart causes a styling loss in watch
+  const styles: Map<string, string> = new Map<string, string>()
   let pureCssChunks: Set<string>
 
   // when there are multiple rollup outputs and extracting CSS, only emit once,
@@ -236,7 +237,6 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
     buildStart() {
       // Ensure new caches for every build (i.e. rebuilding in watch mode)
-      styles = new Map<string, string>()
       pureCssChunks = new Set<string>()
       outputToExtractedCSSMap = new Map<NormalizedOutputOptions, string>()
     },