:root -> scoped

Author: yyx990803

lib/style-rewriter.js

@@ -1,10 +1,10 @@
 var postcss = require('postcss')
 var nested = require('postcss-nested')
+var selectorParser = require('postcss-selector-parser')
 var hash = require('hash-sum')
 
-var currentClass
-var rootRE = /:root\b/g
 var liftRE = /^(html|head|body)\b/
+var scopeRE = /:scope\b/
 var processRoot = postcss.plugin('process-root', function () {
   return function (root) {
     var lifted = 0
@@ -13,13 +13,23 @@ var processRoot = postcss.plugin('process-root', function () {
     }
     root.each(function (node) {
       node.each(function (node) {
-        var sel = node.selector
-        if (liftRE.test(sel)) {
-          lift(node)
-        } else if (rootRE.test(sel)) {
-          // replace :root selector
-          node.selector = sel.replace(rootRE, currentClass)
-          lift(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, '&')
         }
       })
     })
@@ -29,7 +39,7 @@ var processRoot = postcss.plugin('process-root', function () {
 module.exports = function (css) {
   this.cacheable()
   var cb = this.async()
-  var cls = currentClass = '.v-' + hash(this.resourcePath)
+  var cls = '.v-' + hash(this.resourcePath)
   css = cls + '{' + css + '}'
   postcss([processRoot, nested])
     .process(css)

test/fixtures/scoped-css.vue

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

test/test.js

@@ -103,9 +103,10 @@ describe('vue-loader', function () {
       // lift selectors that start with body
       expect(style).to.contain('body {\n    color: yellow;\n}')
       expect(style).not.to.contain(cls + ' body')
-      // lift and replace :root inside compound selectors
+      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 :root
+      // 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}')