fix(css): fix sass modern source map (#17938)

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,

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

@@ -0,0 +1 @@
+import '../css-sourcemap.spec'

playground/css-sourcemap/__tests__/sass-modern/sass-modern.spec.ts

@@ -0,0 +1 @@
+import '../css-sourcemap.spec'

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',
+        },
+      },
+    },
+  }),
+)

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',
+        },
+      },
+    },
+  }),
+)

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> {