fix script line numbers for babel/eslint and eslint indentation warning

Author: yyx990803

lib/deindent.js

@@ -0,0 +1,41 @@
+// For some reason, if a script code block has a base indent
+// level, the eval-source-map gets messed up. So we have to
+// manually deindent script code blocks here.
+
+var splitRE = /\r?\n/g
+var emptyRE = /^\s*$/
+
+module.exports = function deindent (str) {
+  var lines = str.split(splitRE)
+  var min = Infinity
+  var type, cur, c
+  for (var i = 0; i < lines.length; i++) {
+    var line = lines[i]
+    if (!emptyRE.test(line)) {
+      if (!type) {
+        c = line.charAt(0)
+        if (c === ' ' || c === '\t') {
+          type = c
+        } else {
+          return str
+        }
+      } else {
+        cur = count(line, type)
+        if (cur < min) {
+          min = cur
+        }
+      }
+    }
+  }
+  return lines.map(function (line) {
+    return line.slice(min)
+  }).join('\n')
+}
+
+function count (line, type) {
+  var i = 0
+  while (line.charAt(i) === type) {
+    i++
+  }
+  return i
+}

lib/parser.js

@@ -2,9 +2,10 @@ var parse5 = require('parse5')
 var parser = new parse5.Parser(null, { locationInfo: true })
 var cache = require('lru-cache')(100)
 var SourceMapGenerator = require('source-map').SourceMapGenerator
-var splitRE = /\r?\n/g
-var trimRE = /^(\s|\r?\n)+/
 var hash = require('hash-sum')
+var deindent = require('./deindent')
+var splitRE = /\r?\n/g
+var emptyRE = /^\s*$/
 
 module.exports = function (content, filename) {
 
@@ -78,16 +79,28 @@ module.exports = function (content, filename) {
       }
     }
 
+    // extract part
     var start = node.childNodes[0].__location.start
     var end = node.childNodes[node.childNodes.length - 1].__location.end
-    var result = content.slice(start, end)
-    var trimmedResult = result.replace(trimRE, '')
-    var trimmed = trimmedResult.length - result.length
-    var lineOffset = content.slice(0, start + trimmed).split(splitRE).length
+    var result
+    var lineOffset
+    if (type === 'script') {
+      lineOffset = 0
+      // preserve other parts as commenets so that linters
+      // and babel can output correct line numbers in warnings
+      result =
+        commentScript(content.slice(0, start), lang) +
+        deindent(content.slice(start, end)) +
+        commentScript(content.slice(end), lang)
+    } else {
+      lineOffset = content.slice(0, start).split(splitRE).length - 1
+      result = content.slice(start, end)
+    }
+
+    // generate source map
     var map = new SourceMapGenerator()
     map.setSourceContent(filenameWithHash, content)
-
-    trimmedResult.split(splitRE).forEach(function (line, index) {
+    result.split(splitRE).forEach(function (line, index) {
       map.addMapping({
         source: filenameWithHash,
         original: {
@@ -101,10 +114,18 @@ module.exports = function (content, filename) {
       })
     })
 
+    // workaround for Webpack eval-source-map bug
+    // https://github.com/webpack/webpack/pull/1816
+    // in case the script was piped through another loader
+    // that doesn't pass down the source map properly.
+    if (type === 'script') {
+      result += '\n/* generated by vue-loader */\n'
+    }
+
     output[type].push({
       lang: lang,
       scoped: scoped,
-      content: trimmedResult,
+      content: result,
       map: map.toJSON()
     })
   })
@@ -113,6 +134,28 @@ module.exports = function (content, filename) {
   return output
 }
 
+function commentScript (content, lang) {
+  return content
+    .split(splitRE)
+    .map(function (line) {
+      if (emptyRE.test(line)) {
+        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

test/test.js

@@ -209,7 +209,7 @@ describe('vue-loader', function () {
     }), function (err) {
       expect(err).to.be.null
       getFile('test.output.css', function (data) {
-        expect(data).to.contain('h1 {\n  color: #f00;\n}\nh2 {\n  color: green;\n}')
+        expect(data).to.contain('h1 {\n  color: #f00;\n}\n\nh2 {\n  color: green;\n}')
         done()
       })
     })