scoped css: adjust id generation

Author: yyx990803

lib/id-generator.js

@@ -1,6 +1,6 @@
 var postcss = require('postcss')
 var selectorParser = require('postcss-selector-parser')
-var idGen = require('./id-generator')
+var hash = require('hash-sum')
 
 var currentId
 var addId = postcss.plugin('add-id', function () {
@@ -20,7 +20,7 @@ var addId = postcss.plugin('add-id', function () {
 module.exports = function (css) {
   this.cacheable()
   var cb = this.async()
-  currentId = idGen.get(this.resourcePath)
+  currentId = '_v-' + hash(this.resourcePath)
   postcss([addId])
     .process(css)
     .then(function (result) {

lib/style-rewriter.js

@@ -1,11 +1,11 @@
 var parse5 = require('parse5')
 var parser = new parse5.Parser()
 var serializer = new parse5.Serializer()
-var idGen = require('./id-generator')
+var hash = require('hash-sum')
 
 module.exports = function (html) {
   this.cacheable()
-  var id = idGen.get(this.resourcePath)
+  var id = '_v-' + hash(this.resourcePath)
   var tree = parser.parseFragment(html)
   walk(tree, function (node) {
     if (node.attrs) {

lib/template-rewriter.js

@@ -23,6 +23,7 @@
     "test": "eslint lib && mocha test/test.js --slow 5000"
   },
   "dependencies": {
+    "hash-sum": "^1.0.2",
     "loader-utils": "^0.2.10",
     "parse5": "^1.5.0",
     "postcss": "^4.1.16",

package.json

@@ -94,13 +94,14 @@ describe('vue-loader', function () {
       entry: './test/fixtures/scoped-css.js'
     }, function (window) {
       var module = window.testModule
+      var id = '_v-' + hash(require.resolve('./fixtures/scoped-css.vue'))
       expect(module.template).to.contain(
-        '<div _v-1=""><h1 _v-1="">hi</h1></div>\n' +
-        '<p class="abc def" _v-1="">hi</p>'
+        '<div ' + id + '=""><h1 ' + id + '="">hi</h1></div>\n' +
+        '<p class="abc def" ' + id + '="">hi</p>'
       )
       var style = window.document.querySelector('style').textContent
-      expect(style).to.contain('.test[_v-1] {\n  color: yellow;\n}')
-      expect(style).to.contain('h1[_v-1] {\n  color: green;\n}')
+      expect(style).to.contain('.test[' + id + '] {\n  color: yellow;\n}')
+      expect(style).to.contain('h1[' + id + '] {\n  color: green;\n}')
       done()
     })
   })
@@ -112,7 +113,8 @@ describe('vue-loader', function () {
       var styles = window.document.querySelectorAll('style')
       expect(styles[0].textContent).to.contain('h1 { color: red; }')
       // import with scoped
-      expect(styles[1].textContent).to.contain('h1[_v-2] { color: green; }')
+      var id = '_v-' + hash(require.resolve('./fixtures/import-scoped.css'))
+      expect(styles[1].textContent).to.contain('h1[' + id + '] { color: green; }')
       done()
     })
   })