Repository: vuejs/vue-loader
Pull request #961 (2017-08-31 12:18:29)

docs(EN,JA,RU): fix webpack template utils filename
Replace the file path `build/util.js` by the correct `build/utils.js` of the [webpack template](https://github.com/vuejs-templates/webpack/blob/master/template/build/utils.js)

Jinjiang: +1
Btw it seems `zh-cn` miss this section. I will create another PR for it.
Thanks.

Patch:
diff --git a/docs/en/configurations/pre-processors.md b/docs/en/configurations/pre-processors.md
index ba24a9b..caf92e2 100644
--- a/docs/en/configurations/pre-processors.md
+++ b/docs/en/configurations/pre-processors.md
@@ -56,7 +56,7 @@ Then add the following webpack rule:
 }
 ```
 
-As an example, if you are using [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack), modify `build/util.js` like so:
+As an example, if you are using [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack), modify `build/utils.js` like so:
 
 ``` js
 scss: generateLoaders('sass').concat(
diff --git a/docs/ja/configurations/pre-processors.md b/docs/ja/configurations/pre-processors.md
index 5b6c76b..7d41a2a 100644
--- a/docs/ja/configurations/pre-processors.md
+++ b/docs/ja/configurations/pre-processors.md
@@ -56,7 +56,7 @@ npm install sass-resources-loader --save-dev
 }
 ```
 
-例として、[vuejs-templates/webpack](https://github.com/vuejs-templates/webpack) を使用している場合、 `build/util.js` を以下のように変更してください:
+例として、[vuejs-templates/webpack](https://github.com/vuejs-templates/webpack) を使用している場合、 `build/utils.js` を以下のように変更してください:
 
 ``` js
 scss: generateLoaders('sass').concat(
diff --git a/docs/ja/features/postcss.md b/docs/ja/features/postcss.md
index 3ae7d33..07bff8d 100644
--- a/docs/ja/features/postcss.md
+++ b/docs/ja/features/postcss.md
@@ -1,6 +1,6 @@
 # PostCSS
 
-`vue-loader`により処理されたCSSのアウトプットはスコープされたCSSにに書き換えるために[PostCSS](https://github.com/postcss/postcss) を通します。カスタムされた PostCSSプラグインをプロセスに追加することが出来ます。例えば、[autoprefixer](https://github.com/postcss/autoprefixer) や [CSSNext](http://cssnext.io/)があります。
+`vue-loader`により処理されたCSSのアウトプットはスコープされたCSSに書き換えるために[PostCSS](https://github.com/postcss/postcss) を通します。カスタムされた PostCSSプラグインをプロセスに追加することが出来ます。例えば、[autoprefixer](https://github.com/postcss/autoprefixer) や [CSSNext](http://cssnext.io/)があります。
 
 ## 設定ファイルの使用
 
diff --git a/docs/ru/configurations/pre-processors.md b/docs/ru/configurations/pre-processors.md
index 921a7b4..dcad1fd 100644
--- a/docs/ru/configurations/pre-processors.md
+++ b/docs/ru/configurations/pre-processors.md
@@ -56,7 +56,7 @@ npm install sass-resources-loader --save-dev
 }
 ```
 
-Например, если вы используете [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack), измените файл `build/util.js` таким образом:
+Например, если вы используете [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack), измените файл `build/utils.js` таким образом:
 
 ``` js
 scss: generateLoaders('sass').concat(
diff --git a/lib/parser.js b/lib/parser.js
index 6643990..55db356 100644
--- a/lib/parser.js
+++ b/lib/parser.js
@@ -6,7 +6,7 @@ var SourceMapGenerator = require('source-map').SourceMapGenerator
 var splitRE = /\r?\n/g
 var emptyRE = /^(?:\/\/)?\s*$/
 
-module.exports = function (content, filename, needMap) {
+module.exports = function (content, filename, needMap, sourceRoot) {
   var cacheKey = hash(filename + content)
   // source-map cache busting for hot-reloadded modules
   var filenameWithHash = filename + '?' + cacheKey
@@ -18,7 +18,8 @@ module.exports = function (content, filename, needMap) {
       output.script.map = generateSourceMap(
         filenameWithHash,
         content,
-        output.script.content
+        output.script.content,
+        sourceRoot
       )
     }
     if (output.styles) {
@@ -27,7 +28,8 @@ module.exports = function (content, filename, needMap) {
           style.map = generateSourceMap(
             filenameWithHash,
             content,
-            style.content
+            style.content,
+            sourceRoot
           )
         }
       })
@@ -37,8 +39,8 @@ module.exports = function (content, filename, needMap) {
   return output
 }
 
-function generateSourceMap (filename, source, generated) {
-  var map = new SourceMapGenerator()
+function generateSourceMap (filename, source, generated, sourceRoot) {
+  var map = new SourceMapGenerator({ sourceRoot })
   map.setSourceContent(filename, source)
   generated.split(splitRE).forEach((line, index) => {
     if (!emptyRE.test(line)) {
diff --git a/lib/selector.js b/lib/selector.js
index 7a72775..75c32b2 100644
--- a/lib/selector.js
+++ b/lib/selector.js
@@ -10,8 +10,10 @@ module.exports = function (content) {
   this.cacheable()
   var query = loaderUtils.getOptions(this) || {}
   var context = (this._compiler && this._compiler.context) || this.options.context || process.cwd()
-  var filename = path.relative(context, this.resourcePath).replace(/\..+$/, '.vue')
-  var parts = parse(content, filename, this.sourceMap)
+  var filename = path.basename(this.resourcePath)
+  filename = filename.substring(0, filename.lastIndexOf(path.extname(filename))) + '.vue'
+  var sourceRoot = path.dirname(path.relative(context, this.resourcePath))
+  var parts = parse(content, filename, this.sourceMap, sourceRoot)
   var part = parts[query.type]
   if (Array.isArray(part)) {
     part = part[query.index]
diff --git a/lib/style-compiler/plugins/scope-id.js b/lib/style-compiler/plugins/scope-id.js
index 20aba44..c2f2c25 100644
--- a/lib/style-compiler/plugins/scope-id.js
+++ b/lib/style-compiler/plugins/scope-id.js
@@ -11,7 +11,7 @@ module.exports = postcss.plugin('add-id', function (opts) {
         if (node.type === 'atrule') {
           if (node.name === 'media' || node.name === 'supports') {
             node.each(rewriteSelector)
-          } else if (node.name === 'keyframes') {
+          } else if (/-?keyframes$/.test(node.name)) {
             // register keyframes
             keyframes[node.params] = node.params = node.params + '-' + opts.id
           }


Test patch:
diff --git a/test/fixtures/scoped-css.vue b/test/fixtures/scoped-css.vue
index 1b5aa02..ef2d41b 100644
--- a/test/fixtures/scoped-css.vue
+++ b/test/fixtures/scoped-css.vue
@@ -19,6 +19,10 @@ h1 {
   from { color: red; }
   to { color: green; }
 }
+@-webkit-keyframes color {
+  from { color: red; }
+  to { color: green; }
+}
 .foo p >>> .bar {
   color: red;
 }
diff --git a/test/test.js b/test/test.js
index 0bce47f..c5b56a0 100644
--- a/test/test.js
+++ b/test/test.js
@@ -237,6 +237,7 @@ describe('vue-loader', function () {
       expect(style).to.contain(`.anim[${id}] {\n  animation: color-${id} 5s infinite, other 5s;`)
       expect(style).to.contain(`.anim-2[${id}] {\n  animation-name: color-${id}`)
       expect(style).to.contain(`@keyframes color-${id} {`)
+      expect(style).to.contain(`@-webkit-keyframes color-${id} {`)
       // >>> combinator
       expect(style).to.contain(`.foo p[${id}] .bar {\n  color: red;\n}`)
       done()