feat(scoped-css): support leading >>> or /deep/ in selectors

yyx990803 · yyx990803 · commit 1a3b5bb816db · 2018-08-16T14:03:18.000-04:00
diff --git a/lib/stylePlugins/scoped.ts b/lib/stylePlugins/scoped.ts
@@ -23,11 +23,13 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => {
     node.selector = selectorParser((selectors: any) => {
       selectors.each((selector: any) => {
         let node: any = null
+        let hasDeep: boolean = false
         selector.each((n: any) => {
           // ">>>" combinator
           if (n.type === 'combinator' && n.value === '>>>') {
             n.value = ' '
             n.spaces.before = n.spaces.after = ''
+            hasDeep = true
             return false
           }
           // /deep/ alias for >>>, since >>> doesn't work in SASS
@@ -37,6 +39,7 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => {
               prev.remove()
             }
             n.remove()
+            hasDeep = true
             return false
           }
           if (n.type !== 'pseudo' && n.type !== 'combinator') {
@@ -51,6 +54,12 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => {
               attribute: id
             })
           )
+        } else if (hasDeep) {
+          selector.prepend(
+            selectorParser.attribute({
+              attribute: id
+            })
+          )
         }
       })
     }).processSync(node.selector)
diff --git a/test/stylePluginScoped.spec.ts b/test/stylePluginScoped.spec.ts
@@ -10,3 +10,13 @@ test('spaces after selector', () => {
 
   expect(code).toMatch(`.foo[test], .bar[test] { color: red;`)
 })
+
+test('leading deep selector', () => {
+  const { code } = compileStyle({
+    source: `>>> .foo { color: red; }`,
+    filename: 'test.css',
+    id: 'test'
+  })
+
+  expect(code).toMatch(`[test] .foo { color: red;`)
+})
