feat: global/slotted selector support multiple values

Author: btea

packages/compiler-sfc/__tests__/compileStyle.spec.ts

@@ -132,7 +132,22 @@ describe('SFC scoped CSS', () => {
       .toMatchInlineSnapshot(`
     ".foo[data-v-test-s] { color: red;
     }"
-  `)
+    `)
+    expect(compileScoped(`:slotted(.foo) .bar { color: red; }`))
+      .toMatchInlineSnapshot(`
+      ".foo[data-v-test-s] .bar { color: red;
+      }"
+    `)
+    expect(compileScoped(`::v-slotted(.foo,.baz .bar) { color: red; }`))
+      .toMatchInlineSnapshot(`
+      ".foo[data-v-test-s],.baz .bar[data-v-test-s] { color: red;
+      }"
+    `)
+    expect(compileScoped(`::v-slotted(.foo,.baz) { color: red; }`))
+      .toMatchInlineSnapshot(`
+      ".foo[data-v-test-s],.baz[data-v-test-s] { color: red;
+      }"
+    `)
     expect(compileScoped(`::v-slotted(.foo) { color: red; }`))
       .toMatchInlineSnapshot(`
       ".foo[data-v-test-s] { color: red;
@@ -148,6 +163,16 @@ describe('SFC scoped CSS', () => {
       ".baz .qux .foo .bar[data-v-test-s] { color: red;
       }"
     `)
+    expect(compileScoped(`.baz .qux ::v-slotted(.foo,.bar) { color: red; }`))
+      .toMatchInlineSnapshot(`
+      ".baz .qux .foo[data-v-test-s],.baz .qux .bar[data-v-test-s] { color: red;
+      }"
+    `)
+    expect(compileScoped(`.baz .qux ::v-slotted(.foo,.bar) .m { color: red; }`))
+      .toMatchInlineSnapshot(`
+      ".baz .qux .foo[data-v-test-s] .m,.baz .qux .bar[data-v-test-s] .m { color: red;
+      }"
+    `)
   })
 
   test('::v-global', () => {
@@ -156,6 +181,11 @@ describe('SFC scoped CSS', () => {
     ".foo { color: red;
     }"
   `)
+    expect(compileScoped(`::v-global(.foo,.bar) { color: red; }`))
+      .toMatchInlineSnapshot(`
+      ".foo,.bar { color: red;
+      }"
+    `)
     expect(compileScoped(`::v-global(.foo) { color: red; }`))
       .toMatchInlineSnapshot(`
       ".foo { color: red;
@@ -172,6 +202,24 @@ describe('SFC scoped CSS', () => {
       ".foo .bar { color: red;
       }"
     `)
+    expect(
+      compileScoped(`.baz .qux ::v-global(.foo .bar, .bar) { color: red; }`)
+    ).toMatchInlineSnapshot(`
+      ".foo .bar, .bar { color: red;
+      }"
+    `)
+    // global ignores anything after it
+    expect(compileScoped(`::v-global(.foo .bar) .baz { color: red; }`))
+      .toMatchInlineSnapshot(`
+      ".foo .bar { color: red;
+      }"
+    `)
+    expect(
+      compileScoped(`.baz ::v-global(.foo .bar,.faa) .qux { color: red; }`)
+    ).toMatchInlineSnapshot(`
+      ".foo .bar,.faa { color: red;
+      }"
+    `)
   })
 
   test('media query', () => {

packages/compiler-sfc/src/style/pluginScoped.ts

@@ -194,11 +194,37 @@ function rewriteSelector(
       // instead.
       // ::v-slotted(.foo) -> .foo[xxxxxxx-s]
       if (value === ':slotted' || value === '::v-slotted') {
-        rewriteSelector(id, n.nodes[0], selectorRoot, true /* slotted */)
         let last: selectorParser.Selector['nodes'][0] = n
-        n.nodes[0].each(ss => {
-          selector.insertAfter(last, ss)
-          last = ss
+        const nextNodes = [] as typeof selector.nodes
+        n.nodes.forEach((ss, i) => {
+          rewriteSelector(id, ss, selectorRoot, true /* slotted */)
+          const index = selector.index(n)
+          if (i > 0) {
+            const prevList = selector.nodes.slice(0, index).concat(ss.nodes)
+            if (nextNodes.length) {
+              prevList.push(...nextNodes)
+              nextNodes.forEach(s => {
+                selector.removeChild(s)
+                selector.insertAfter(last, s)
+                last = s
+              })
+            }
+            const newList = prevList.map(
+              s => s.clone({}) as selectorParser.Selector['nodes'][0]
+            )
+
+            newList.unshift(selectorParser.combinator({ value: ',' }))
+            newList.forEach(s => {
+              selector.insertAfter(last, s)
+              last = s
+            })
+          } else {
+            nextNodes.push(...selector.nodes.slice(index + 1))
+            ss.each(s => {
+              selector.insertAfter(last, s)
+              last = s
+            })
+          }
         })
         // selector.insertAfter(n, n.nodes[0])
         selector.removeChild(n)
@@ -211,7 +237,11 @@ function rewriteSelector(
       // global: replace with inner selector and do not inject [id].
       // ::v-global(.foo) -> .foo
       if (value === ':global' || value === '::v-global') {
-        selectorRoot.insertAfter(selector, n.nodes[0])
+        let last = selector
+        n.nodes.forEach(_node => {
+          selectorRoot.insertAfter(last, _node)
+          last = _node
+        })
         selectorRoot.removeChild(selector)
         return false
       }