From 7f9f8f1f84b6fcf3cee45208f929050a842bd535 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=A0=20/=20green?= <green@sapphi.red>
Date: Mon, 2 May 2022 03:51:18 +0900
Subject: [PATCH] fix(css): sourcemap crash with postcss (#7982)

---
 packages/playground/vue-sourcemap/Css.vue     | 11 ++++++
 .../vue-sourcemap/__tests__/serve.spec.ts     | 39 +++++++++++++++++--
 .../playground/vue-sourcemap/package.json     |  3 +-
 .../vue-sourcemap/postcss.config.js           |  3 ++
 packages/vite/src/node/plugins/css.ts         | 19 +++------
 pnpm-lock.yaml                                |  2 +
 6 files changed, 59 insertions(+), 18 deletions(-)
 create mode 100644 packages/playground/vue-sourcemap/postcss.config.js

diff --git a/packages/playground/vue-sourcemap/Css.vue b/packages/playground/vue-sourcemap/Css.vue
index 19668de8d33965..4f677c7b84dfbd 100644
--- a/packages/playground/vue-sourcemap/Css.vue
+++ b/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>
diff --git a/packages/playground/vue-sourcemap/__tests__/serve.spec.ts b/packages/playground/vue-sourcemap/__tests__/serve.spec.ts
index 08b4c04face111..7dfa271deea322 100644
--- a/packages/playground/vue-sourcemap/__tests__/serve.spec.ts
+++ b/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,
diff --git a/packages/playground/vue-sourcemap/package.json b/packages/playground/vue-sourcemap/package.json
index 286940b01efa58..25bd2b725b7e65 100644
--- a/packages/playground/vue-sourcemap/package.json
+++ b/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"
diff --git a/packages/playground/vue-sourcemap/postcss.config.js b/packages/playground/vue-sourcemap/postcss.config.js
new file mode 100644
index 00000000000000..9ea26b495d91b5
--- /dev/null
+++ b/packages/playground/vue-sourcemap/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('postcss-nested')]
+}
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index cff7eaaf3e4c52..b3ea3338cecc04 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/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
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 73be476b1c911b..7c177126794187 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -730,6 +730,7 @@ importers:
     specifiers:
       '@vitejs/plugin-vue': workspace:*
       less: ^4.1.2
+      postcss-nested: ^5.0.6
       sass: ^1.43.4
       vue: ^3.2.31
     dependencies:
@@ -737,6 +738,7 @@ importers:
     devDependencies:
       '@vitejs/plugin-vue': link:../../plugin-vue
       less: 4.1.2
+      postcss-nested: 5.0.6
       sass: 1.45.1
 
   packages/playground/wasm: