new scoped css implementation

Author: yyx990803

lib/id-generator.js

@@ -0,0 +1,12 @@
+// keep track of unique ids for component modules.
+
+var ids = Object.create(null)
+var count = 0
+
+exports.get = function (path) {
+  var id = ids[path]
+  if (!id) {
+    id = ids[path] = ++count
+  }
+  return '_v-' + id
+}

lib/style-rewriter.js

@@ -1,47 +1,27 @@
 var postcss = require('postcss')
-var nested = require('postcss-nested')
 var selectorParser = require('postcss-selector-parser')
-var hash = require('hash-sum')
+var idGen = require('./id-generator')
 
-var liftRE = /^(html|head|body)\b/
-var scopeRE = /:scope\b/
-var processRoot = postcss.plugin('process-root', function () {
+var currentId
+var addId = postcss.plugin('add-id', function () {
   return function (root) {
-    var lifted = 0
-    function lift (node) {
-      node.moveBefore(root.nodes[lifted++])
-    }
     root.each(function (node) {
-      node.each(function (node) {
-        var kept = []
-        selectorParser(function (selectors) {
-          selectors.each(function (selector) {
-            var sel = selector.toString()
-            if (liftRE.test(sel)) {
-              lift(node.clone({
-                selector: sel
-              }))
-            } else {
-              kept.push(sel)
-            }
-          })
-        }).process(node.selector)
-        if (!kept.length) {
-          node.removeSelf()
-        } else {
-          node.selector = kept.join(',').replace(scopeRE, '&')
-        }
-      })
+      node.selector = selectorParser(function (selectors) {
+        selectors.each(function (selector) {
+          selector.append(selectorParser.attribute({
+            attribute: currentId
+          }))
+        })
+      }).process(node.selector).result
     })
   }
 })
 
 module.exports = function (css) {
   this.cacheable()
   var cb = this.async()
-  var cls = '.v-' + hash(this.resourcePath)
-  css = cls + '{' + css + '}'
-  postcss([processRoot, nested])
+  currentId = idGen.get(this.resourcePath)
+  postcss([addId])
     .process(css)
     .then(function (result) {
       cb(null, result)

lib/template-rewriter.js

@@ -1,30 +1,28 @@
 var parse5 = require('parse5')
 var parser = new parse5.Parser()
 var serializer = new parse5.Serializer()
-var hash = require('hash-sum')
+var idGen = require('./id-generator')
 
 module.exports = function (html) {
   this.cacheable()
-  var cls = 'v-' + hash(this.resourcePath)
+  var id = idGen.get(this.resourcePath)
   var tree = parser.parseFragment(html)
-  tree.childNodes.forEach(function (node) {
+  walk(tree, function (node) {
     if (node.attrs) {
-      var hasClass = false
-      for (var i = 0, l = node.attrs.length; i < l; i++) {
-        var attr = node.attrs[i]
-        if (attr.name === 'class') {
-          attr.value += ' ' + cls
-          hasClass = true
-          break
-        }
-      }
-      if (!hasClass) {
-        node.attrs.push({
-          name: 'class',
-          value: cls
-        })
-      }
+      node.attrs.push({
+        name: id,
+        value: ''
+      })
     }
   })
   return serializer.serialize(tree)
 }
+
+function walk (tree, fn) {
+  if (tree.childNodes) {
+    tree.childNodes.forEach(function (node) {
+      fn(node)
+      walk(node, fn)
+    })
+  }
+}

package.json

@@ -23,11 +23,9 @@
     "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",
-    "postcss-nested": "^0.3.2",
     "postcss-selector-parser": "^1.1.2"
   },
   "peerDependencies": {

test/fixtures/scoped-css.vue

@@ -1,13 +1,7 @@
 <style scoped>
-body, h2 {
+.test {
   color: yellow;
 }
-:scope {
-  color: red;
-}
-div:scope.test {
-  color: blue;
-}
 h1 {
   color: green;
 }

test/test.js

@@ -94,22 +94,13 @@ describe('vue-loader', function () {
       entry: './test/fixtures/scoped-css.js'
     }, function (window) {
       var module = window.testModule
-      var cls = '.v-' + hash(require.resolve('./fixtures/scoped-css.vue'))
       expect(module.template).to.contain(
-        '<div class="' + cls.slice(1) + '"><h1>hi</h1></div>\n' +
-        '<p class="abc def ' + cls.slice(1) + '">hi</p>'
+        '<div _v-1=""><h1 _v-1="">hi</h1></div>\n' +
+        '<p class="abc def" _v-1="">hi</p>'
       )
       var style = window.document.querySelector('style').textContent
-      // lift selectors that start with body
-      expect(style).to.contain('body {\n    color: yellow;\n}')
-      expect(style).not.to.contain(cls + ' body')
-      expect(style).to.contain(cls + ' h2 {\n    color: yellow;\n}')
-      // lift and replace :scope inside compound selectors
-      expect(style).to.contain('\ndiv' + cls + '.test {\n    color: blue;\n}')
-      // lift :scope
-      expect(style).to.contain('\n' + cls + ' {\n    color: red;\n}')
-      // nest normal selectors
-      expect(style).to.contain('\n' + cls + ' h1 {\n    color: green;\n}')
+      expect(style).to.contain('.test[_v-1] {\n  color: yellow;\n}')
+      expect(style).to.contain('h1[_v-1] {\n  color: green;\n}')
       done()
     })
   })
@@ -121,8 +112,7 @@ describe('vue-loader', function () {
       var styles = window.document.querySelectorAll('style')
       expect(styles[0].textContent).to.contain('h1 { color: red; }')
       // import with scoped
-      var cls = '.v-' + hash(require.resolve('./fixtures/import-scoped.css'))
-      expect(styles[1].textContent).to.contain(cls + ' h1 {\n    color: green;\n}')
+      expect(styles[1].textContent).to.contain('h1[_v-2] { color: green; }')
       done()
     })
   })