feat(css)!: change default sass api to modern/modern-compiler

docs/config/shared-options.md

@@ -225,7 +225,7 @@ Note if an inline config is provided, Vite will not search for other PostCSS con
 
 Specify options to pass to CSS pre-processors. The file extensions are used as keys for the options. The supported options for each preprocessors can be found in their respective documentation:
 
-- `sass`/`scss` - top level option `api: "legacy" | "modern" | "modern-compiler"` (default `"legacy"`) allows switching which sass API to use. For the best performance, it's recommended to use `api: "modern-compiler"` with `sass-embedded` package. [Options (legacy)](https://sass-lang.com/documentation/js-api/interfaces/LegacyStringOptions), [Options (modern)](https://sass-lang.com/documentation/js-api/interfaces/stringoptions/).
+- `sass`/`scss` - top level option `api: "modern-compiler" | "modern" | "legacy"` (default `"modern-compiler"` if `sass-embedded`, otherwise `"modern"`) allows switching which sass API to use. For the best performance, it's recommended to use `api: "modern-compiler"` with `sass-embedded` package. `"legacy"` API is deprecated and will be removed in Vite 7. [Options (modern)](https://sass-lang.com/documentation/js-api/interfaces/stringoptions/), [Options (legacy)](https://sass-lang.com/documentation/js-api/interfaces/LegacyStringOptions).
 - `less` - [Options](https://lesscss.org/usage/#less-options).
 - `styl`/`stylus` - Only [`define`](https://stylus-lang.com/docs/js.html#define-name-node) is supported, which can be passed as an object.
 

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

@@ -2400,9 +2400,9 @@ const scssProcessor = (
     },
     async process(source, root, options, resolvers) {
       const sassPackage = loadSassPackage(root)
-      // TODO: change default in v6
-      // options.api ?? sassPackage.name === "sass-embedded" ? "modern-compiler" : "modern";
-      const api = options.api ?? 'legacy'
+      const api =
+        options.api ??
+        (sassPackage.name === 'sass-embedded' ? 'modern-compiler' : 'modern')
 
       if (!workerMap.has(options.alias)) {
         workerMap.set(
@@ -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/vite.config.js

@@ -61,6 +61,7 @@ export default defineConfig({
     },
     preprocessorOptions: {
       scss: {
+        api: 'legacy',
         additionalData: `$injectedColor: orange;`,
         importer: [
           function (url) {