fix scoped css for rules with pseudo classes

vuejs · Oct 30, 2015 · b14b1e7 · b14b1e7
1 parent e8611e5
commit b14b1e7
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/lib/style-rewriter.js b/lib/style-rewriter.js
@@ -9,7 +9,11 @@ var addId = postcss.plugin('add-id', function () {
     root.each(function (node) {
       node.selector = selectorParser(function (selectors) {
         selectors.each(function (selector) {
-          selector.append(selectorParser.attribute({
+          var node = null
+          selector.each(function (n) {
+            if (n.type !== 'pseudo') node = n
+          })
+          selector.insertAfter(node, selectorParser.attribute({
             attribute: currentId
           }))
         })

diff --git a/test/fixtures/scoped-css.vue b/test/fixtures/scoped-css.vue
@@ -2,6 +2,9 @@
 .test {
   color: yellow;
 }
+.test:after {
+  content: 'bye!';
+}
 h1 {
   color: green;
 }

diff --git a/test/test.js b/test/test.js
@@ -101,6 +101,7 @@ describe('vue-loader', function () {
       )
       var style = window.document.querySelector('style').textContent
       expect(style).to.contain('.test[' + id + '] {\n  color: yellow;\n}')
+      expect(style).to.contain('.test[' + id + ']:after {\n  content: \'bye!\';\n}')
       expect(style).to.contain('h1[' + id + '] {\n  color: green;\n}')
       done()
     })