proper source map support

Author: yyx990803

lib/loader.js

@@ -130,7 +130,7 @@ module.exports = function (content) {
     }
   }
 
-  var parts = parse(content)
+  var parts = parse(content, fileName)
   var hasLocalStyles = false
   var output = 'var __vue_script__, __vue_template__\n'
 

lib/parser.js

@@ -1,10 +1,14 @@
 var parse5 = require('parse5')
 var parser = new parse5.Parser(null, { locationInfo: true })
 var cache = require('lru-cache')(100)
+var SourceNode = require('source-map').SourceNode
+var SourceMapGenerator = require('source-map').SourceMapGenerator
+var splitRE = /\n\r|\n|\r/g
 
-module.exports = function (content) {
+module.exports = function (content, filename) {
 
-  var output = cache.get(content)
+  var cacheKey = filename + 'XXX' + content
+  var output = cache.get(cacheKey)
   if (output) return output
 
   output = {
@@ -73,54 +77,37 @@ module.exports = function (content) {
 
     var start = node.childNodes[0].__location.start
     var end = node.childNodes[node.childNodes.length - 1].__location.end
-
-    var result
-    if (type === 'script') {
-      result =
-        commentScript(content.slice(0, start), lang) +
-        content.slice(start, end) +
-        commentScript(content.slice(end), lang) +
-        // workaround for Webpack eval-source-map bug
-        // https://github.com/webpack/webpack/pull/1816
-        '\n/* generated by vue-loader */\n'
-    } else {
-      result = content.slice(start, end).trim()
-    }
+    var result = content.slice(start, end)
+    var lineOffset = content.slice(0, start).split(splitRE).length - 1
+    var map = new SourceMapGenerator()
+    map.setSourceContent(filename, content)
+
+    result.split(splitRE).forEach(function (line, index) {
+      map.addMapping({
+        source: filename,
+        original: {
+          line: index + 1 + lineOffset,
+          column: 0
+        },
+        generated: {
+          line: index + 1,
+          column: 0
+        }
+      })
+    })
 
     output[type].push({
       lang: lang,
       scoped: scoped,
-      content: result
+      content: result,
+      map: map.toJSON()
     })
   })
 
-  cache.set(content, output)
+  cache.set(cacheKey, output)
   return output
 }
 
-function commentScript (content, lang) {
-  return content
-    .split(/\n\r|\n|\r/g)
-    .map(function (line) {
-      if (line.trim() === '') {
-        return line
-      }
-
-      switch (lang) {
-        case 'coffee':
-        case 'coffee-jsx':
-        case 'coffee-redux':
-          return '# ' + line
-        case 'purs':
-        case 'ulmus':
-          return '-- ' + line
-        default:
-          return '// ' + line
-      }
-    })
-    .join('\n')
-}
-
 function getAttribute (node, name) {
   if (node.attrs) {
     var i = node.attrs.length

lib/selector.js

@@ -1,9 +1,12 @@
+var path = require('path')
 var parse = require('./parser')
 var loaderUtils = require('loader-utils')
 
 module.exports = function (content) {
   this.cacheable()
   var query = loaderUtils.parseQuery(this.query)
-  var parts = parse(content)
-  return parts[query.type][query.index].content
+  var filename = path.basename(this.resourcePath)
+  var parts = parse(content, filename)
+  var part = parts[query.type][query.index]
+  this.callback(null, part.content, part.map)
 }

package.json

@@ -36,7 +36,8 @@
     "object-assign": "^4.0.0",
     "parse5": "^1.5.0",
     "postcss": "^5.0.10",
-    "postcss-selector-parser": "^1.1.2"
+    "postcss-selector-parser": "^1.1.2",
+    "source-map": "^0.5.3"
   },
   "peerDependencies": {
     "vue-html-loader": "^1.0.0",