fix(css): sourcemap crash with postcss (#7982)

Author: sapphi-red

packages/playground/vue-sourcemap/Css.vue

@@ -2,6 +2,7 @@
   <p class="css">&lt;css&gt;</p>
   <p :class="$style['css-module']">&lt;css&gt; module</p>
   <p class="css-scoped">&lt;css&gt; scoped</p>
+  <p class="css-scoped-nested">&lt;css&gt; scoped with nested</p>
 </template>
 
 <style>
@@ -21,3 +22,13 @@
   color: red;
 }
 </style>
+
+<style scoped>
+.css-scoped-nested {
+  color: red;
+  .dummy {
+    color: green;
+  }
+  font-weight: bold;
+}
+</style>

packages/playground/vue-sourcemap/__tests__/serve.spec.ts

@@ -80,7 +80,7 @@ if (!isBuild) {
     const map = extractSourcemap(css)
     expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
       Object {
-        "mappings": ";AAOA;EACE,UAAU;AACZ",
+        "mappings": ";AAQA;EACE,UAAU;AACZ",
         "sources": Array [
           "/root/Css.vue",
         ],
@@ -89,6 +89,7 @@ if (!isBuild) {
         <p class=\\"css\\">&lt;css&gt;</p>
         <p :class=\\"$style['css-module']\\">&lt;css&gt; module</p>
         <p class=\\"css-scoped\\">&lt;css&gt; scoped</p>
+        <p class=\\"css-scoped-nested\\">&lt;css&gt; scoped with nested</p>
       </template>
 
       <style>
@@ -108,6 +109,16 @@ if (!isBuild) {
         color: red;
       }
       </style>
+
+      <style scoped>
+      .css-scoped-nested {
+        color: red;
+        .dummy {
+          color: green;
+        }
+        font-weight: bold;
+      }
+      </style>
       ",
         ],
         "version": 3,
@@ -120,7 +131,7 @@ if (!isBuild) {
     const map = extractSourcemap(css)
     expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
       Object {
-        "mappings": ";AAaA;EACE,UAAU;AACZ",
+        "mappings": ";AAcA;EACE,UAAU;AACZ",
         "sources": Array [
           "/root/Css.vue",
         ],
@@ -129,6 +140,7 @@ if (!isBuild) {
         <p class=\\"css\\">&lt;css&gt;</p>
         <p :class=\\"$style['css-module']\\">&lt;css&gt; module</p>
         <p class=\\"css-scoped\\">&lt;css&gt; scoped</p>
+        <p class=\\"css-scoped-nested\\">&lt;css&gt; scoped with nested</p>
       </template>
 
       <style>
@@ -148,6 +160,16 @@ if (!isBuild) {
         color: red;
       }
       </style>
+
+      <style scoped>
+      .css-scoped-nested {
+        color: red;
+        .dummy {
+          color: green;
+        }
+        font-weight: bold;
+      }
+      </style>
       ",
         ],
         "version": 3,
@@ -160,7 +182,7 @@ if (!isBuild) {
     const map = extractSourcemap(css)
     expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
       Object {
-        "mappings": ";AAmBA;EACE,UAAU;AACZ",
+        "mappings": ";AAoBA;EACE,UAAU;AACZ",
         "sources": Array [
           "/root/Css.vue",
         ],
@@ -169,6 +191,7 @@ if (!isBuild) {
         <p class=\\"css\\">&lt;css&gt;</p>
         <p :class=\\"$style['css-module']\\">&lt;css&gt; module</p>
         <p class=\\"css-scoped\\">&lt;css&gt; scoped</p>
+        <p class=\\"css-scoped-nested\\">&lt;css&gt; scoped with nested</p>
       </template>
 
       <style>
@@ -188,6 +211,16 @@ if (!isBuild) {
         color: red;
       }
       </style>
+
+      <style scoped>
+      .css-scoped-nested {
+        color: red;
+        .dummy {
+          color: green;
+        }
+        font-weight: bold;
+      }
+      </style>
       ",
         ],
         "version": 3,

packages/playground/vue-sourcemap/package.json

@@ -11,7 +11,8 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "workspace:*",
     "less": "^4.1.2",
-    "sass": "^1.43.4"
+    "sass": "^1.43.4",
+    "postcss-nested": "^5.0.6"
   },
   "dependencies": {
     "vue": "^3.2.31"

packages/playground/vue-sourcemap/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('postcss-nested')]
+}

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

@@ -877,32 +877,23 @@ export function formatPostcssSourceMap(
 ): ExistingRawSourceMap {
   const inputFileDir = path.dirname(file)
 
-  const sources: string[] = []
-  const sourcesContent: string[] = []
-  for (const [i, source] of rawMap.sources.entries()) {
-    // remove <no source> from sources, to prevent source map to be combined incorrectly
-    if (source === '<no source>') continue
-
+  const sources = rawMap.sources.map((source) => {
     const cleanSource = cleanUrl(decodeURIComponent(source))
 
     // postcss returns virtual files
     if (/^<.+>$/.test(cleanSource)) {
-      sources.push(`\0${cleanSource}`)
-    } else {
-      sources.push(normalizePath(path.resolve(inputFileDir, cleanSource)))
+      return `\0${cleanSource}`
     }
 
-    if (rawMap.sourcesContent) {
-      sourcesContent.push(rawMap.sourcesContent[i])
-    }
-  }
+    return normalizePath(path.resolve(inputFileDir, cleanSource))
+  })
 
   return {
     file,
     mappings: rawMap.mappings,
     names: rawMap.names,
     sources,
-    sourcesContent,
+    sourcesContent: rawMap.sourcesContent,
     version: rawMap.version
   }
 }