fix(css): backport #18113, fix missing source file warning with sass modern api custom importer (#18183)

sapphi-red · hi-ogawa · web-flow · commit 7d47fc1c7490 · 2024-09-24T13:11:46.000+09:00
Co-authored-by: Hiroshi Ogawa &lt;hi.ogawa.zz@gmail.com&gt;
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -2267,7 +2267,7 @@ const makeModernScssWorker = (
               fileURLToPath(canonicalUrl),
               options.filename,
             )
-            return { contents, syntax }
+            return { contents, syntax, sourceMapUrl: canonicalUrl }
           },
         }
         sassOptions.importers = [
@@ -2353,7 +2353,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

Original file line number	Diff line number	Diff line change
`@@ -2267,7 +2267,7 @@ const makeModernScssWorker = (`
`2267`	`2267`	`fileURLToPath(canonicalUrl),`
`2268`	`2268`	`options.filename,`
`2269`	`2269`	`)`
`2270`		`- return { contents, syntax }`
	`2270`	`+ return { contents, syntax, sourceMapUrl: canonicalUrl }`
`2271`	`2271`	`},`
`2272`	`2272`	`}`
`2273`	`2273`	`sassOptions.importers = [`
`@@ -2353,7 +2353,7 @@ const makeModernCompilerScssWorker = (`
`2353`	`2353`	`)`
`2354`	`2354`	`const contents =`
`2355`	`2355`	`result.contents ?? (await fsp.readFile(result.file, 'utf-8'))`
`2356`		`- return { contents, syntax }`
	`2356`	`+ return { contents, syntax, sourceMapUrl: canonicalUrl }`
`2357`	`2357`	`},`
`2358`	`2358`	`}`
`2359`	`2359`	`sassOptions.importers = [`