fix(css): fix missing source file warning with sass modern api custom…

… importer (#18113)
vitejs · Sep 24, 2024 · d7763a5 · d7763a5
1 parent 4cc5322
commit d7763a5
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -2300,7 +2300,7 @@ const makeModernScssWorker = (
               fileURLToPath(canonicalUrl),
               options.filename,
             )
-            return { contents, syntax }
+            return { contents, syntax, sourceMapUrl: canonicalUrl }
           },
         }
         sassOptions.importers = [
@@ -2395,7 +2395,7 @@ const makeModernCompilerScssWorker = (
           )
           const contents =
             result.contents ?? (await fsp.readFile(result.file, 'utf-8'))
-          return { contents, syntax }
+          return { contents, syntax, sourceMapUrl: canonicalUrl }
         },
       }
       sassOptions.importers = [

diff --git a/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts b/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts
@@ -139,14 +139,19 @@ describe.runIf(isServe)('serve', () => {
     expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
       {
         "ignoreList": [],
-        "mappings": "AACE;EACE",
+        "mappings": "AAGE;EACE,UCJM",
         "sources": [
           "/root/imported.sass",
+          "/root/imported-nested.sass",
         ],
         "sourcesContent": [
-          ".imported
+          "@import "/imported-nested.sass"
+
+      .imported
         &-sass
-          color: red
+          color: $primary
+      ",
+          "$primary: red
       ",
         ],
         "version": 3,

diff --git a/playground/css-sourcemap/imported-nested.sass b/playground/css-sourcemap/imported-nested.sass
@@ -0,0 +1 @@
+$primary: red
diff --git a/playground/css-sourcemap/imported.sass b/playground/css-sourcemap/imported.sass
@@ -1,3 +1,5 @@
+@import "/imported-nested.sass"
+
 .imported
   &-sass
-    color: red
+    color: $primary