fix(css): ensure sass compiler initialized only once (#18128)

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

@@ -2350,7 +2350,7 @@ const makeModernCompilerScssWorker = (
   alias: Alias[],
   _maxWorkers: number | undefined,
 ) => {
-  let compiler: Sass.AsyncCompiler | undefined
+  let compilerPromise: Promise<Sass.AsyncCompiler> | undefined
 
   const worker: Awaited<ReturnType<typeof makeModernScssWorker>> = {
     async run(sassPath, data, options) {
@@ -2358,7 +2358,8 @@ const makeModernCompilerScssWorker = (
       // https://github.com/nodejs/node/issues/31710
       const sass: typeof Sass = (await import(pathToFileURL(sassPath).href))
         .default
-      compiler ??= await sass.initAsyncCompiler()
+      compilerPromise ??= sass.initAsyncCompiler()
+      const compiler = await compilerPromise
 
       const sassOptions = { ...options } as Sass.StringOptions<'async'>
       sassOptions.url = pathToFileURL(options.filename)
@@ -2414,8 +2415,8 @@ const makeModernCompilerScssWorker = (
       } satisfies ScssWorkerResult
     },
     async stop() {
-      compiler?.dispose()
-      compiler = undefined
+      ;(await compilerPromise)?.dispose()
+      compilerPromise = undefined
     },
   }
 

playground/css/__tests__/sass-modern-compiler-build/sass-modern-compiler.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from 'vitest'
+import { findAssetFile, isBuild } from '~utils'
+
+test.runIf(isBuild)('sass modern compiler build multiple entries', () => {
+  expect(findAssetFile(/entry1/, 'sass-modern-compiler-build'))
+    .toMatchInlineSnapshot(`
+    ".entry1{color:red}
+    "
+  `)
+  expect(findAssetFile(/entry2/, 'sass-modern-compiler-build'))
+    .toMatchInlineSnapshot(`
+    ".entry2{color:#00f}
+    "
+  `)
+})

playground/css/sass-modern-compiler-build/entry1.scss

@@ -0,0 +1,3 @@
+.entry1 {
+  color: red;
+}

playground/css/sass-modern-compiler-build/entry2.scss

@@ -0,0 +1,3 @@
+.entry2 {
+  color: blue;
+}

playground/css/vite.config-sass-modern-compiler-build.js

@@ -0,0 +1,27 @@
+import path from 'node:path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    outDir: 'dist/sass-modern-compiler-build',
+    rollupOptions: {
+      input: {
+        entry1: path.join(
+          import.meta.dirname,
+          'sass-modern-compiler-build/entry1.scss',
+        ),
+        entry2: path.join(
+          import.meta.dirname,
+          'sass-modern-compiler-build/entry2.scss',
+        ),
+      },
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
+})