From a5a2da1c5a5cef24e99790608019aea15896a0b9 Mon Sep 17 00:00:00 2001
From: fxy060608 <fxy060608@gmail.com>
Date: Sat, 28 Dec 2019 15:00:50 +0800
Subject: [PATCH] feat(v3): support >>> or /deep/ or ::v-deep in selectors
 (without scoped)

---
 .../packages/postcss/index.v3.js              | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/vue-cli-plugin-uni/packages/postcss/index.v3.js b/packages/vue-cli-plugin-uni/packages/postcss/index.v3.js
index 5e1b9d7693..5ec3c5b856 100644
--- a/packages/vue-cli-plugin-uni/packages/postcss/index.v3.js
+++ b/packages/vue-cli-plugin-uni/packages/postcss/index.v3.js
@@ -21,17 +21,38 @@ module.exports = postcss.plugin('postcss-uniapp-plugin', function (opts) {
         rule.selectors = rule.selectors.map(complexSelector =>
           // complexSelector => simpleSelectors
           // "a.b#c" => ["a", ".b", "#c"]
-          transformSelector(complexSelector, simpleSelectors =>
+          transformSelector(complexSelector, simpleSelectors => {
+            simpleSelectors.each((selector) => {
+              // find the last child node to insert attribute selector
+              selector.each((n) => {
+                // ">>>" combinator
+                // and /deep/ alias for >>>, since >>> doesn't work in SASS
+                if (n.type === 'combinator' &&
+                  (n.value === '>>>' || n.value ===
+                    '/deep/')) {
+                  n.value = ' '
+                  n.spaces.before = n.spaces.after = ''
+                  return false
+                }
+                // in newer versions of sass, /deep/ support is also dropped, so add a ::v-deep alias
+                if (n.type === 'pseudo' && n.value ===
+                  '::v-deep') {
+                  n.value = n.spaces.before = n.spaces.after =
+                    ''
+                  return false
+                }
+              })
+            })
             // only process type selector, leave alone class & id selectors
-            simpleSelectors.walkTags(tag => {
+            return simpleSelectors.walkTags(tag => {
               if (tag.value === 'page') {
                 tag.value = 'body'
               } else if (~TAGS.indexOf(tag.value) && tag.value.substring(
-                0, 4) !== 'uni-') {
+                  0, 4) !== 'uni-') {
                 tag.value = 'uni-' + tag.value
               }
             })
-          )
+          })
         )
       }
     })
-- 
GitLab