support >>> combinator

Author: yyx990803

lib/style-compiler/plugins/scope-id.js

@@ -22,6 +22,12 @@ module.exports = postcss.plugin('add-id', function (opts) {
         selectors.each(function (selector) {
           var node = null
           selector.each(function (n) {
+            // "deep" combinator
+            if (n.type === 'combinator' && n.value === '>>>') {
+              n.value = ' '
+              n.spaces.before = n.spaces.after = ''
+              return false
+            }
             if (n.type !== 'pseudo') node = n
           })
           selector.insertAfter(node, selectorParser.attribute({

test/fixtures/scoped-css.vue

@@ -19,6 +19,9 @@ h1 {
   from { color: red; }
   to { color: green; }
 }
+.foo p >>> .bar {
+  color: red;
+}
 </style>
 
 <template>

test/test.js

@@ -227,6 +227,8 @@ describe('vue-loader', function () {
       expect(style).to.contain(`.anim[${id}] {\n  animation: color-${id} 5s infinite, other 5s;`)
       expect(style).to.contain(`.anim-2[${id}] {\n  animation-name: color-${id}`)
       expect(style).to.contain(`@keyframes color-${id} {`)
+      // >>> combinator
+      expect(style).to.contain(`.foo p[${id}] .bar {\n  color: red;\n}`)
       done()
     })
   })