fix(css): css file emit synchronously

package.json

@@ -79,7 +79,7 @@
     "prompts": "^2.4.2",
     "resolve": "^1.22.1",
     "rimraf": "^4.4.0",
-    "rollup": "^3.20.0",
+    "rollup": "^3.20.1",
     "semver": "^7.3.8",
     "simple-git-hooks": "^2.8.1",
     "tslib": "^2.5.0",

packages/vite/package.json

@@ -69,7 +69,7 @@
     "esbuild": "^0.17.5",
     "postcss": "^8.4.21",
     "resolve": "^1.22.1",
-    "rollup": "^3.20.0"
+    "rollup": "^3.20.1"
   },
   "optionalDependencies": {
     "fsevents": "~2.3.2"

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

@@ -316,6 +316,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
   // styles initialization in buildStart causes a styling loss in watch
   const styles: Map<string, string> = new Map<string, string>()
   let pureCssChunks: Set<RenderedChunk>
+  let emitTasks: Set<{ name: string; emit: () => Promise<void> }>
+  let sortedEmitTasks: { name: string; emit: () => Promise<void> }[]
+  let emitTaskRunning = false
 
   // when there are multiple rollup outputs and extracting CSS, only emit once,
   // since output formats have no effect on the generated CSS.
@@ -352,6 +355,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       pureCssChunks = new Set<RenderedChunk>()
       outputToExtractedCSSMap = new Map<NormalizedOutputOptions, string>()
       hasEmitted = false
+      emitTasks = new Set<{ name: string; emit: () => Promise<void> }>()
+      sortedEmitTasks = []
+      emitTaskRunning = false
     },
 
     async transform(css, id, options) {
@@ -562,20 +568,53 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           const cssFileName = ensureFileExt(cssAssetName, '.css')
 
           chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName)
-          chunkCSS = await finalizeCss(chunkCSS, true, config)
-
-          // emit corresponding css file
-          const referenceId = this.emitFile({
-            name: path.basename(cssFileName),
-            type: 'asset',
-            source: chunkCSS,
+          const emitName = path.basename(cssFileName)
+
+          emitTasks.add({
+            name: emitName,
+            emit: async () => {
+              chunkCSS = await finalizeCss(chunkCSS, true, config)
+
+              // emit corresponding css file
+              const referenceId = this.emitFile({
+                name: emitName,
+                type: 'asset',
+                source: chunkCSS,
+              })
+              const originalName = isPreProcessor(lang)
+                ? cssAssetName
+                : cssFileName
+              const isEntry = chunk.isEntry && isPureCssChunk
+              generatedAssets
+                .get(config)!
+                .set(referenceId, { originalName, isEntry })
+              chunk.viteMetadata!.importedCss.add(this.getFileName(referenceId))
+            },
           })
-          const originalName = isPreProcessor(lang) ? cssAssetName : cssFileName
-          const isEntry = chunk.isEntry && isPureCssChunk
-          generatedAssets
-            .get(config)!
-            .set(referenceId, { originalName, isEntry })
-          chunk.viteMetadata!.importedCss.add(this.getFileName(referenceId))
+
+          const runEmitTasks = async () => {
+            if (emitTaskRunning) {
+              return
+            }
+            emitTaskRunning = true
+            for (const { emit } of sortedEmitTasks) {
+              await emit()
+            }
+          }
+
+          // wait for collecting all emitFile
+          await sortedEmitTasks
+
+          if (!sortedEmitTasks.length) {
+            sortedEmitTasks = Array.from(emitTasks).sort((next, cur) => {
+              return next.name.length > cur.name.length ||
+                (next.name.length === cur.name.length && next.name > cur.name)
+                ? 1
+                : -1
+            })
+          }
+
+          await runEmitTasks()
         } else if (!config.build.ssr) {
           // legacy build and inline css