Merge pull request #2091 from didi/fix-source-map-error

Fix source map error

Author: hiyuki

packages/webpack-plugin/lib/parser.js

@@ -14,7 +14,7 @@ module.exports = (content, { filePath, needMap, mode, env }) => {
   output = compiler.parseComponent(content, {
     mode,
     filePath,
-    // pad: 'line', // stylus编译遇到大量空行时会出现栈溢出，故注释掉
+    pad: 'line',
     env
   })
   if (needMap) {

packages/webpack-plugin/lib/script-setup-compiler/index.js

@@ -1,5 +1,6 @@
 const babylon = require('@babel/parser')
 const MagicString = require('magic-string')
+const { SourceMapConsumer, SourceMapGenerator } = require('source-map')
 const traverse = require('@babel/traverse').default
 const t = require('@babel/types')
 const formatCodeFrame = require('@babel/code-frame')
@@ -625,7 +626,12 @@ function compileScriptSetup (
   _s.appendRight(endOffset, '})')
 
   return {
-    content: _s.toString()
+    content: _s.toString(),
+    map: _s.generateMap({
+      source: filePath,
+      hires: true,
+      includeContent: true
+    })
   }
 }
 
@@ -1165,14 +1171,30 @@ function getCtor (ctorType) {
   return ctor
 }
 
-module.exports = function (content) {
+module.exports = async function (content, sourceMap) {
   const { queryObj } = parseRequest(this.resource)
   const { ctorType, lang } = queryObj
   const filePath = this.resourcePath
-  const { content: callbackContent } = compileScriptSetup({
+  const callback = this.async()
+  let finalSourceMap = null
+  const {
+    content: callbackContent,
+    map
+  } = compileScriptSetup({
     content,
     lang
   }, ctorType, filePath)
-
-  this.callback(null, callbackContent)
+  finalSourceMap = map
+  if (sourceMap) {
+    const compiledMapConsumer = await new SourceMapConsumer(map)
+    const compiledMapGenerator = SourceMapGenerator.fromSourceMap(compiledMapConsumer)
+
+    const originalConsumer = await new SourceMapConsumer(sourceMap)
+    compiledMapGenerator.applySourceMap(
+      originalConsumer,
+      filePath // 需要确保与原始映射的source路径一致
+    )
+    finalSourceMap = compiledMapGenerator.toJSON()
+  }
+  callback(null, callbackContent, finalSourceMap)
 }

packages/webpack-plugin/lib/template-compiler/compiler.js

@@ -581,7 +581,8 @@ function parseComponent (content, options) {
       let text = content.slice(currentBlock.start, currentBlock.end)
       // pad content so that linters and pre-processors can output correct
       // line numbers in errors and warnings
-      if (options.pad) {
+      // stylus编译遇到大量空行时会出现栈溢出，故针对stylus不走pad
+      if (options.pad && !(currentBlock.tag === 'style' && currentBlock.lang === 'stylus')) {
         text = padContent(currentBlock, options.pad) + text
       }
       currentBlock.content = text