From 4cc53224e9b207aa6a5a111e40ed0a0464cf37f4 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Mon, 23 Sep 2024 22:50:31 +0900
Subject: [PATCH] fix(css): ensure sass compiler initialized only once (#18128)

---
 packages/vite/src/node/plugins/css.ts         |  9 ++++---
 .../sass-modern-compiler.spec.ts              | 15 +++++++++++
 .../sass-modern-compiler-build/entry1.scss    |  3 +++
 .../sass-modern-compiler-build/entry2.scss    |  3 +++
 .../vite.config-sass-modern-compiler-build.js | 27 +++++++++++++++++++
 5 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 playground/css/__tests__/sass-modern-compiler-build/sass-modern-compiler.spec.ts
 create mode 100644 playground/css/sass-modern-compiler-build/entry1.scss
 create mode 100644 playground/css/sass-modern-compiler-build/entry2.scss
 create mode 100644 playground/css/vite.config-sass-modern-compiler-build.js

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 7f177952966aba..8361dd1580dcba 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/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
     },
   }
 
diff --git a/playground/css/__tests__/sass-modern-compiler-build/sass-modern-compiler.spec.ts b/playground/css/__tests__/sass-modern-compiler-build/sass-modern-compiler.spec.ts
new file mode 100644
index 00000000000000..98bba744b175d5
--- /dev/null
+++ b/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}
+    "
+  `)
+})
diff --git a/playground/css/sass-modern-compiler-build/entry1.scss b/playground/css/sass-modern-compiler-build/entry1.scss
new file mode 100644
index 00000000000000..e21334eb8337bc
--- /dev/null
+++ b/playground/css/sass-modern-compiler-build/entry1.scss
@@ -0,0 +1,3 @@
+.entry1 {
+  color: red;
+}
diff --git a/playground/css/sass-modern-compiler-build/entry2.scss b/playground/css/sass-modern-compiler-build/entry2.scss
new file mode 100644
index 00000000000000..eca3004c9d247f
--- /dev/null
+++ b/playground/css/sass-modern-compiler-build/entry2.scss
@@ -0,0 +1,3 @@
+.entry2 {
+  color: blue;
+}
diff --git a/playground/css/vite.config-sass-modern-compiler-build.js b/playground/css/vite.config-sass-modern-compiler-build.js
new file mode 100644
index 00000000000000..b44ef1e354d4d9
--- /dev/null
+++ b/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',
+      },
+    },
+  },
+})