From d428e7e3a05f8da5ea00bb1b6a0827a5cc225899 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Mon, 2 Sep 2024 00:27:03 +0900
Subject: [PATCH] fix(css): fix sass modern source map (#17938)

---
 packages/vite/src/node/plugins/css.ts         |  6 +++++
 .../sass-modern-compiler.spec.ts              |  1 +
 .../__tests__/sass-modern/sass-modern.spec.ts |  1 +
 .../vite.config-sass-modern-compiler.js       | 15 +++++++++++++
 .../css-sourcemap/vite.config-sass-modern.js  | 15 +++++++++++++
 playground/vitestGlobalSetup.ts               | 22 ++++++++++---------
 6 files changed, 50 insertions(+), 10 deletions(-)
 create mode 100644 playground/css-sourcemap/__tests__/sass-modern-compiler/sass-modern-compiler.spec.ts
 create mode 100644 playground/css-sourcemap/__tests__/sass-modern/sass-modern.spec.ts
 create mode 100644 playground/css-sourcemap/vite.config-sass-modern-compiler.js
 create mode 100644 playground/css-sourcemap/vite.config-sass-modern.js

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index e447a486fc39b7..05227b3fc89292 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -2438,6 +2438,12 @@ const scssProcessor = (
           ? JSON.parse(result.map.toString())
           : undefined
 
+        if (map) {
+          map.sources = map.sources.map((url) =>
+            url.startsWith('file://') ? normalizePath(fileURLToPath(url)) : url,
+          )
+        }
+
         return {
           code: result.css.toString(),
           map,
diff --git a/playground/css-sourcemap/__tests__/sass-modern-compiler/sass-modern-compiler.spec.ts b/playground/css-sourcemap/__tests__/sass-modern-compiler/sass-modern-compiler.spec.ts
new file mode 100644
index 00000000000000..371c61a76d0049
--- /dev/null
+++ b/playground/css-sourcemap/__tests__/sass-modern-compiler/sass-modern-compiler.spec.ts
@@ -0,0 +1 @@
+import '../css-sourcemap.spec'
diff --git a/playground/css-sourcemap/__tests__/sass-modern/sass-modern.spec.ts b/playground/css-sourcemap/__tests__/sass-modern/sass-modern.spec.ts
new file mode 100644
index 00000000000000..371c61a76d0049
--- /dev/null
+++ b/playground/css-sourcemap/__tests__/sass-modern/sass-modern.spec.ts
@@ -0,0 +1 @@
+import '../css-sourcemap.spec'
diff --git a/playground/css-sourcemap/vite.config-sass-modern-compiler.js b/playground/css-sourcemap/vite.config-sass-modern-compiler.js
new file mode 100644
index 00000000000000..83ba1b829b55c8
--- /dev/null
+++ b/playground/css-sourcemap/vite.config-sass-modern-compiler.js
@@ -0,0 +1,15 @@
+import { defineConfig, mergeConfig } from 'vite'
+import baseConfig from './vite.config.js'
+
+export default mergeConfig(
+  baseConfig,
+  defineConfig({
+    css: {
+      preprocessorOptions: {
+        sass: {
+          api: 'modern-compiler',
+        },
+      },
+    },
+  }),
+)
diff --git a/playground/css-sourcemap/vite.config-sass-modern.js b/playground/css-sourcemap/vite.config-sass-modern.js
new file mode 100644
index 00000000000000..739507a13caf27
--- /dev/null
+++ b/playground/css-sourcemap/vite.config-sass-modern.js
@@ -0,0 +1,15 @@
+import { defineConfig, mergeConfig } from 'vite'
+import baseConfig from './vite.config.js'
+
+export default mergeConfig(
+  baseConfig,
+  defineConfig({
+    css: {
+      preprocessorOptions: {
+        sass: {
+          api: 'modern',
+        },
+      },
+    },
+  }),
+)
diff --git a/playground/vitestGlobalSetup.ts b/playground/vitestGlobalSetup.ts
index d97dec019d411e..b47918f042e2d2 100644
--- a/playground/vitestGlobalSetup.ts
+++ b/playground/vitestGlobalSetup.ts
@@ -42,16 +42,18 @@ export async function setup({ provide }: GlobalSetupContext): Promise<void> {
       }
     })
   // also setup dedicated copy for "variant" tests
-  await fs.cp(
-    path.resolve(tempDir, 'css'),
-    path.resolve(tempDir, 'css__sass-modern'),
-    { recursive: true },
-  )
-  await fs.cp(
-    path.resolve(tempDir, 'css'),
-    path.resolve(tempDir, 'css__sass-modern-compiler'),
-    { recursive: true },
-  )
+  for (const [original, variants] of [
+    ['css', ['sass-modern', 'sass-modern-compiler']],
+    ['css-sourcemap', ['sass-modern', 'sass-modern-compiler']],
+  ] as const) {
+    for (const variant of variants) {
+      await fs.cp(
+        path.resolve(tempDir, original),
+        path.resolve(tempDir, `${original}__${variant}`),
+        { recursive: true },
+      )
+    }
+  }
 }
 
 export async function teardown(): Promise<void> {