lift rules that start with body

Author: yyx990803

lib/style-rewriter.js

@@ -4,15 +4,22 @@ var hash = require('hash-sum')
 
 var currentClass
 var rootRE = /:root\b/g
+var liftRE = /^(html|head|body)\b/
 var processRoot = postcss.plugin('process-root', function () {
   return function (root) {
+    var lifted = 0
+    function lift (node) {
+      node.moveBefore(root.nodes[lifted++])
+    }
     root.each(function (node) {
       node.each(function (node) {
-        if (rootRE.test(node.selector)) {
+        var sel = node.selector
+        if (liftRE.test(sel)) {
+          lift(node)
+        } else if (rootRE.test(sel)) {
           // replace :root selector
-          node.selector = node.selector.replace(rootRE, currentClass)
-          // move the node to the outer scope to avoid nesting
-          node.moveBefore(root.nodes[0])
+          node.selector = sel.replace(rootRE, currentClass)
+          lift(node)
         }
       })
     })

test/fixtures/local-css.vue

@@ -1,4 +1,7 @@
 <style local>
+body {
+  color: yellow;
+}
 :root {
   color: red;
 }

test/test.js

@@ -100,9 +100,15 @@ describe('vue-loader', function () {
         '<p class="abc def ' + cls.slice(1) + '">hi</p>'
       )
       var style = window.document.querySelector('style').textContent
-      expect(style).to.contain('div' + cls + '.test {\n    color: blue;\n}')
-      expect(style).to.contain(cls + ' {\n    color: red;\n}')
-      expect(style).to.contain(cls + ' h1 {\n    color: green;\n}')
+      // 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('\ndiv' + cls + '.test {\n    color: blue;\n}')
+      // lift :root
+      expect(style).to.contain('\n' + cls + ' {\n    color: red;\n}')
+      // nest normal selectors
+      expect(style).to.contain('\n' + cls + ' h1 {\n    color: green;\n}')
       done()
     })
   })