From 9c5103ae6ddcc8117a35f221bedb6a3f0814a721 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=A0=20/=20green?= <green@sapphi.red>
Date: Tue, 22 Mar 2022 08:09:23 +0900
Subject: [PATCH] feat: css sourcemap support during dev (#7173)

---
 packages/plugin-vue/src/index.ts |  3 ++-
 packages/plugin-vue/src/style.ts | 27 +++++++++++++++++++++++----
 scripts/jestPerTestSetup.ts      | 10 ++++++++++
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts
index fb1bce3c..28a15996 100644
--- a/packages/plugin-vue/src/index.ts
+++ b/packages/plugin-vue/src/index.ts
@@ -235,7 +235,8 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
             descriptor,
             Number(query.index),
             options,
-            this
+            this,
+            filename
           )
         }
       }
diff --git a/packages/plugin-vue/src/style.ts b/packages/plugin-vue/src/style.ts
index ad9d9814..c124f3ec 100644
--- a/packages/plugin-vue/src/style.ts
+++ b/packages/plugin-vue/src/style.ts
@@ -1,6 +1,8 @@
 import type { SFCDescriptor } from 'vue/compiler-sfc'
-import type { TransformPluginContext } from 'rollup'
+import type { ExistingRawSourceMap, TransformPluginContext } from 'rollup'
 import type { ResolvedOptions } from '.'
+import type { RawSourceMap } from 'source-map'
+import { formatPostcssSourceMap } from 'vite'
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export async function transformStyle(
@@ -8,7 +10,8 @@ export async function transformStyle(
   descriptor: SFCDescriptor,
   index: number,
   options: ResolvedOptions,
-  pluginContext: TransformPluginContext
+  pluginContext: TransformPluginContext,
+  filename: string
 ) {
   const block = descriptor.styles[index]
   // vite already handles pre-processors and CSS module so this is only
@@ -19,7 +22,14 @@ export async function transformStyle(
     id: `data-v-${descriptor.id}`,
     isProd: options.isProduction,
     source: code,
-    scoped: block.scoped
+    scoped: block.scoped,
+    postcssOptions: {
+      map: {
+        from: filename,
+        inline: false,
+        annotation: false
+      }
+    }
   })
 
   if (result.errors.length) {
@@ -36,8 +46,17 @@ export async function transformStyle(
     return null
   }
 
+  const map = result.map
+    ? formatPostcssSourceMap(
+        // version property of result.map is declared as string
+        // but actually it is a number
+        result.map as Omit<RawSourceMap, 'version'> as ExistingRawSourceMap,
+        filename
+      )
+    : ({ mappings: '' } as any)
+
   return {
     code: result.code,
-    map: result.map || ({ mappings: '' } as any)
+    map: map
   }
 }
diff --git a/scripts/jestPerTestSetup.ts b/scripts/jestPerTestSetup.ts
index 9c15edf9..312d254a 100644
--- a/scripts/jestPerTestSetup.ts
+++ b/scripts/jestPerTestSetup.ts
@@ -114,6 +114,8 @@ beforeAll(async () => {
         customLogger: createInMemoryLogger(serverLogs)
       }
 
+      setupConsoleWarnCollector(serverLogs)
+
       global.serverLogs = serverLogs
 
       if (!isBuildTest) {
@@ -263,3 +265,11 @@ function createInMemoryLogger(logs: string[]): Logger {
 
   return logger
 }
+
+function setupConsoleWarnCollector(logs: string[]) {
+  const warn = console.warn
+  console.warn = (...args) => {
+    serverLogs.push(args.join(' '))
+    return warn.call(console, ...args)
+  }
+}