]> git.ipfire.org Git - thirdparty/vuejs/core.git/commitdiff
feat(compiler-sfc): allow using :deep, :global & :slotted for short in `<style scoped>`
authorEvan You <yyx990803@gmail.com>
Fri, 10 Jul 2020 20:47:36 +0000 (16:47 -0400)
committerEvan You <yyx990803@gmail.com>
Fri, 10 Jul 2020 20:47:36 +0000 (16:47 -0400)
packages/compiler-sfc/__tests__/compileStyle.spec.ts
packages/compiler-sfc/src/stylePluginScoped.ts

index 628eaffddcfc68932d1ec691116b9b7048dafe98..b1bd2ee012962d0570d18cbd2049c77a4d62d3bf 100644 (file)
@@ -60,6 +60,10 @@ describe('SFC scoped CSS', () => {
   })
 
   test('::v-deep', () => {
+    expect(compileScoped(`:deep(.foo) { color: red; }`)).toMatchInlineSnapshot(`
+      "[test] .foo { color: red;
+      }"
+    `)
     expect(compileScoped(`::v-deep(.foo) { color: red; }`))
       .toMatchInlineSnapshot(`
       "[test] .foo { color: red;
@@ -78,6 +82,11 @@ describe('SFC scoped CSS', () => {
   })
 
   test('::v-slotted', () => {
+    expect(compileScoped(`:slotted(.foo) { color: red; }`))
+      .toMatchInlineSnapshot(`
+    ".foo[test-s] { color: red;
+    }"
+  `)
     expect(compileScoped(`::v-slotted(.foo) { color: red; }`))
       .toMatchInlineSnapshot(`
       ".foo[test-s] { color: red;
@@ -96,6 +105,11 @@ describe('SFC scoped CSS', () => {
   })
 
   test('::v-global', () => {
+    expect(compileScoped(`:global(.foo) { color: red; }`))
+      .toMatchInlineSnapshot(`
+    ".foo { color: red;
+    }"
+  `)
     expect(compileScoped(`::v-global(.foo) { color: red; }`))
       .toMatchInlineSnapshot(`
       ".foo { color: red;
index f9c1d7799d328166954d9f4ae1628bceddeb143d..ef4664fd7b27bbb71eaaee1cd37dff4488c948af 100644 (file)
@@ -44,9 +44,10 @@ export default postcss.plugin('vue-scoped', (options: any) => (root: Root) => {
           }
 
           if (n.type === 'pseudo') {
+            const { value } = n
             // deep: inject [id] attribute at the node before the ::v-deep
             // combinator.
-            if (n.value === '::v-deep') {
+            if (value === ':deep' || value === '::v-deep') {
               if (n.nodes.length) {
                 // .foo ::v-deep(.bar) -> .foo[xxxxxxx] .bar
                 // replace the current node with ::v-deep's inner selector
@@ -81,7 +82,7 @@ export default postcss.plugin('vue-scoped', (options: any) => (root: Root) => {
             // slot: use selector inside `::v-slotted` and inject [id + '-s']
             // instead.
             // ::v-slotted(.foo) -> .foo[xxxxxxx-s]
-            if (n.value === '::v-slotted') {
+            if (value === ':slotted' || value === '::v-slotted') {
               rewriteSelector(n.nodes[0] as Selector, true /* slotted */)
               selector.insertAfter(n, n.nodes[0])
               selector.removeChild(n)
@@ -93,7 +94,7 @@ export default postcss.plugin('vue-scoped', (options: any) => (root: Root) => {
 
             // global: replace with inner selector and do not inject [id].
             // ::v-global(.foo) -> .foo
-            if (n.value === '::v-global') {
+            if (value === ':global' || n.value === '::v-global') {
               selectors.insertAfter(selector, n.nodes[0])
               selectors.removeChild(selector)
               return false