From a75d87e81a03f0a59c19ed9f0e064b706c3d22cf Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Sat, 2 Feb 2019 16:40:18 +0800 Subject: [PATCH 1/4] feat: implement ::v-deep as a shadow piercing combinator --- lib/stylePlugins/scoped.ts | 8 ++++++++ test/stylePluginScoped.spec.ts | 6 ++++++ 2 files changed, 14 insertions(+) diff --git a/lib/stylePlugins/scoped.ts b/lib/stylePlugins/scoped.ts index 3820e90..14e1a2d 100644 --- a/lib/stylePlugins/scoped.ts +++ b/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 --git a/test/stylePluginScoped.spec.ts b/test/stylePluginScoped.spec.ts index 76eb527..7ce35c5 100644 --- a/test/stylePluginScoped.spec.ts +++ b/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', () => { From a23f734fb4ed89037239b4be6e5f18adc60ac1f3 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Mon, 4 Feb 2019 00:47:34 +0800 Subject: [PATCH 2/4] chore: rename ::v-deep to ::-v-deep to follow vendor prefix convention --- lib/stylePlugins/scoped.ts | 4 ++-- test/stylePluginScoped.spec.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/stylePlugins/scoped.ts b/lib/stylePlugins/scoped.ts index 14e1a2d..4d73528 100644 --- a/lib/stylePlugins/scoped.ts +++ b/lib/stylePlugins/scoped.ts @@ -37,8 +37,8 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => { 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') { + // 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 } diff --git a/test/stylePluginScoped.spec.ts b/test/stylePluginScoped.spec.ts index 7ce35c5..a147625 100644 --- a/test/stylePluginScoped.spec.ts +++ b/test/stylePluginScoped.spec.ts @@ -77,7 +77,7 @@ h1 { color: red; } -.foo span ::v-deep .bar { +.foo span ::-v-deep .bar { color: red; } ` @@ -111,7 +111,7 @@ 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 >>> + // ::-v-deep alias for >>> expect(style).toContain(`.foo span[v-scope-xxx] .bar {\n color: red;\n}`) }) From 80b5a72d4efae1a71342528b7290995bae7abc66 Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 21 Feb 2019 16:11:47 -0500 Subject: [PATCH 3/4] revert to ::v-deep --- lib/stylePlugins/scoped.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/stylePlugins/scoped.ts b/lib/stylePlugins/scoped.ts index 4d73528..14e1a2d 100644 --- a/lib/stylePlugins/scoped.ts +++ b/lib/stylePlugins/scoped.ts @@ -37,8 +37,8 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => { 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') { + // 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 } From 86c60a60909939b1220f1375de85679a7b52f193 Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 21 Feb 2019 16:12:18 -0500 Subject: [PATCH 4/4] Update stylePluginScoped.spec.ts --- test/stylePluginScoped.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/stylePluginScoped.spec.ts b/test/stylePluginScoped.spec.ts index a147625..3e72c54 100644 --- a/test/stylePluginScoped.spec.ts +++ b/test/stylePluginScoped.spec.ts @@ -77,7 +77,7 @@ h1 { color: red; } -.foo span ::-v-deep .bar { +.foo span ::v-deep .bar { color: red; } ` pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy