support /deep/ and >>> (#120)

* support /deep/ and >>>

* fix eslint warning
add test for deep and >>>

* simplify code

Author: sunnylost

src/style/css.js

@@ -6,17 +6,53 @@ import camelcase from 'camelcase'
 import genScopeID from '../gen-scope-id'
 import debug from '../debug'
 
+/**
+ * filter invalid tag, e.g. percentage, keyword(from, to)...
+ * @param tag
+ * @returns {boolean}
+ */
+function isInvalidTag (tag) {
+    if (
+        tag === 'from' ||
+        tag === 'to' ||
+        /^\d/.test(tag)
+    ) {
+        return true
+    }
+}
+
 const addScopeID = postcss.plugin('add-scope-id', options => {
     const selectorTransformer = selectorParser(selectors => {
         selectors.each(selector => {
             let target = null
             selector.each(n => {
+                if (n.type === 'combinator' && n.value === '>>>') {
+                    n.value = ' '
+                    n.spaces.before = n.spaces.after = ''
+                    return false
+                }
+
+                if (n.type === 'tag') {
+                    if (n.value === '/deep/') {
+                        const next = n.next()
+
+                        if (next.type === 'combinator' && next.value === ' ') {
+                            next.remove()
+                        }
+
+                        n.remove()
+                        return false
+                    } else if (isInvalidTag(n.value)) {
+                        return
+                    }
+                }
+
                 if (n.type !== 'pseudo' && n.type !== 'combinator') {
                     target = n
                 }
             })
 
-            selector.insertAfter(target, selectorParser.attribute({
+            target && selector.insertAfter(target, selectorParser.attribute({
                 attribute: options.scopeID
             }))
         })

test/expects/scoped-css-with-deep-tag.css

@@ -0,0 +1,22 @@
+.test[data-v-00b08a60] a {
+    color: red;
+}
+
+.test[data-v-00b08a60] .text {
+    background-color: red;
+}
+
+@keyframes test {
+    0% {
+        color: red;
+    }
+
+    50% {
+        color: green;
+    }
+
+    100% {
+        color: yellow;
+    }
+}
+      

test/expects/scoped-css-with-deep-tag.js

@@ -0,0 +1,3 @@
+var scopedCssWithDeepTag = { template: "<div class=\"test\">Foo</div>",_scopeId: 'data-v-00b08a60',};
+
+export default scopedCssWithDeepTag;

test/fixtures/scoped-css-with-deep-tag.vue

@@ -0,0 +1,31 @@
+<template>
+<div class="test">Foo</div>
+</template>
+
+<script lang="babel">
+export default {}
+</script>
+
+<style lang="css" scoped>
+.test /deep/ a {
+    color: red;
+}
+
+.test >>> .text {
+    background-color: red;
+}
+
+@keyframes test {
+    0% {
+        color: red;
+    }
+
+    50% {
+        color: green;
+    }
+
+    100% {
+        color: yellow;
+    }
+}
+</style>

test/test.js

@@ -57,6 +57,7 @@ function test(name) {
                       'pug',
                       'scoped-css',
                       'scoped-css-with-no-auto-style',
+                      'scoped-css-with-deep-tag',
                       'scss',
                       'sass',
                       'pug',