From 31ca7858bb9d9d9cb0e149182cf62ad03acb1104 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Tue, 17 Dec 2019 11:06:56 -0500
Subject: [PATCH] feat(sfc): ::v-global() pseudo selector support

---
 .../compiler-sfc/src/stylePluginScoped.ts     | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/packages/compiler-sfc/src/stylePluginScoped.ts b/packages/compiler-sfc/src/stylePluginScoped.ts
index 0941c35d..adb94889 100644
--- a/packages/compiler-sfc/src/stylePluginScoped.ts
+++ b/packages/compiler-sfc/src/stylePluginScoped.ts
@@ -29,16 +29,32 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => {
 
         // find the last child node to insert attribute selector
         selector.each((n: any) => {
-          if (n.type === 'pseudo' && n.value === '::v-deep') {
-            n.value = n.spaces.before = n.spaces.after = ''
-            return false
-          }
+          if (n.type === 'pseudo') {
+            // deep: inject [id] attribute at the node before the ::v-deep
+            // combinator.
+            // .foo ::v-deep .bar -> .foo[xxxxxxx] .bar
+            if (n.value === '::v-deep') {
+              n.value = n.spaces.before = n.spaces.after = ''
+              return false
+            }
 
-          if (n.type === 'pseudo' && n.value === '::v-slotted') {
-            rewriteSelector(n.nodes[0], 0, true)
-            selectors.insertAfter(selector, n.nodes[0])
-            selectors.removeChild(selector)
-            return false
+            // slot: use selector inside `::v-slotted` and inject [id + '-s']
+            // instead.
+            // ::v-slotted(.foo) -> .foo[xxxxxxx-s]
+            if (n.value === '::v-slotted') {
+              rewriteSelector(n.nodes[0], 0, true /* slotted */)
+              selectors.insertAfter(selector, n.nodes[0])
+              selectors.removeChild(selector)
+              return false
+            }
+
+            // global: replace with inner selector and do not inject [id].
+            // ::v-global(.foo) -> .foo
+            if (n.value === '::v-global') {
+              selectors.insertAfter(selector, n.nodes[0])
+              selectors.removeChild(selector)
+              return false
+            }
           }
 
           if (n.type !== 'pseudo' && n.type !== 'combinator') {