feat: implement ::v-deep as a shadow piercing combinator (#54)

Author: haoqunjiang

Diff for: lib/stylePlugins/scoped.ts

@@ -24,6 +24,7 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => {
       selectors.each((selector: any) => {
         let node: any = null
 
+        // find the last child node to insert attribute selector
         selector.each((n: any) => {
           // ">>>" combinator
           // and /deep/ alias for >>>, since >>> doesn't work in SASS
@@ -35,6 +36,13 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => {
             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
+          }
+
           if (n.type !== 'pseudo' && n.type !== 'combinator') {
             node = n
           }

Diff for: test/stylePluginScoped.spec.ts

@@ -76,6 +76,10 @@ h1 {
 .foo div /deep/ .bar {
   color: red;
 }
+
+.foo span ::v-deep .bar {
+  color: red;
+}
 `
   })
 
@@ -107,6 +111,8 @@ h1 {
   expect(style).toContain(`.foo p[v-scope-xxx] .bar {\n  color: red;\n}`)
   // /deep/ alias for >>>
   expect(style).toContain(`.foo div[v-scope-xxx] .bar {\n  color: red;\n}`)
+  // ::-v-deep alias for >>>
+  expect(style).toContain(`.foo span[v-scope-xxx]  .bar {\n  color: red;\n}`)
 })
 
 test('pseudo element', () => {