From d1e066543724ea64212f0266467b6baabef6b2ba Mon Sep 17 00:00:00 2001
From: sunnylost <sunnylost@gmail.com>
Date: Wed, 16 Aug 2017 18:44:54 +0800
Subject: [PATCH 1/3] support /deep/ and >>>

---
 src/style/css.js | 41 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/style/css.js b/src/style/css.js
index 89f7540..f721d1b 100644
--- a/src/style/css.js
+++ b/src/style/css.js
@@ -6,17 +6,56 @@ 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 ) {
+    let isValid = false
+
+    if (tag === 'from' ||
+        tag === 'to' ||
+        tag.match(/^\d/)
+    ) {
+        isValid = true
+    }
+
+    return isValid
+}
+
 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/') {
+                        let 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
             }))
         })

From 67689671509a2edda8f04502707f0ae39aed84ed Mon Sep 17 00:00:00 2001
From: sunnylost <sunnylost@gmail.com>
Date: Thu, 17 Aug 2017 13:36:07 +0800
Subject: [PATCH 2/3] fix eslint warning add test for deep and >>>

---
 src/style/css.js                           |  6 ++---
 test/expects/scoped-css-with-deep-tag.css  | 22 +++++++++++++++
 test/expects/scoped-css-with-deep-tag.js   |  3 +++
 test/fixtures/scoped-css-with-deep-tag.vue | 31 ++++++++++++++++++++++
 test/test.js                               |  1 +
 5 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 test/expects/scoped-css-with-deep-tag.css
 create mode 100644 test/expects/scoped-css-with-deep-tag.js
 create mode 100644 test/fixtures/scoped-css-with-deep-tag.vue

diff --git a/src/style/css.js b/src/style/css.js
index f721d1b..49653e8 100644
--- a/src/style/css.js
+++ b/src/style/css.js
@@ -11,7 +11,7 @@ import debug from '../debug'
  * @param tag
  * @returns {boolean}
  */
-function isInvalidTag( tag ) {
+function isInvalidTag (tag) {
     let isValid = false
 
     if (tag === 'from' ||
@@ -37,7 +37,7 @@ const addScopeID = postcss.plugin('add-scope-id', options => {
 
                 if (n.type === 'tag') {
                     if (n.value === '/deep/') {
-                        let next = n.next()
+                        const next = n.next()
 
                         if (next.type === 'combinator' && next.value === ' ') {
                             next.remove()
@@ -45,7 +45,7 @@ const addScopeID = postcss.plugin('add-scope-id', options => {
 
                         n.remove()
                         return false
-                    } else if ( isInvalidTag( n.value ) ) {
+                    } else if (isInvalidTag(n.value)) {
                         return
                     }
                 }
diff --git a/test/expects/scoped-css-with-deep-tag.css b/test/expects/scoped-css-with-deep-tag.css
new file mode 100644
index 0000000..bffe2ce
--- /dev/null
+++ b/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;
+    }
+}
+      
diff --git a/test/expects/scoped-css-with-deep-tag.js b/test/expects/scoped-css-with-deep-tag.js
new file mode 100644
index 0000000..e635aa5
--- /dev/null
+++ b/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;
diff --git a/test/fixtures/scoped-css-with-deep-tag.vue b/test/fixtures/scoped-css-with-deep-tag.vue
new file mode 100644
index 0000000..05a428e
--- /dev/null
+++ b/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>
diff --git a/test/test.js b/test/test.js
index 44ce9c0..3d4bede 100644
--- a/test/test.js
+++ b/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',

From 6f0dfa98f966b7850806d6a65f196b18516f4f57 Mon Sep 17 00:00:00 2001
From: sunnylost <sunnylost@gmail.com>
Date: Thu, 17 Aug 2017 22:39:53 +0800
Subject: [PATCH 3/3] simplify code

---
 src/style/css.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/style/css.js b/src/style/css.js
index 49653e8..cf91245 100644
--- a/src/style/css.js
+++ b/src/style/css.js
@@ -12,16 +12,13 @@ import debug from '../debug'
  * @returns {boolean}
  */
 function isInvalidTag (tag) {
-    let isValid = false
-
-    if (tag === 'from' ||
+    if (
+        tag === 'from' ||
         tag === 'to' ||
-        tag.match(/^\d/)
+        /^\d/.test(tag)
     ) {
-        isValid = true
+        return true
     }
-
-    return isValid
 }
 
 const addScopeID = postcss.plugin('add-scope-id', options => {