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; } `