feat: css sourcemap support during dev (#7173)

Author: sapphi-red

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
           )
         }
       }

packages/plugin-vue/src/style.ts

@@ -1,14 +1,17 @@
 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(
   code: string,
   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
   }
 }

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)
+  }
+}