From 5f81b26c56986c430df7888f921119b2f37e3d32 Mon Sep 17 00:00:00 2001 From: Doctorwu Date: Wed, 20 Mar 2024 10:33:33 +0800 Subject: [PATCH 1/4] fix(compiler-sfc): fix universal selector scope close #10548 --- .../compiler-sfc/__tests__/compileStyle.spec.ts | 11 +++++++++++ packages/compiler-sfc/src/style/pluginScoped.ts | 13 +++++++++++++ 2 files changed, 24 insertions(+) diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index 1f9ae67225b..c79e200ddb7 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts @@ -390,4 +390,15 @@ describe('SFC style preprocessors', () => { expect(res.errors.length).toBe(0) }) + + test('should mount scope on correct selector when have universal selector', () => { + expect(compileScoped(`* { color: red; }`)).toMatchInlineSnapshot(` + "[data-v-test] { color: red; + }" + `) + expect(compileScoped(`.foo * { color: red; }`)).toMatchInlineSnapshot(` + ".foo[data-v-test] * { color: red; + }" + `) + }) }) diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts index c5e01896130..dd512d36f41 100644 --- a/packages/compiler-sfc/src/style/pluginScoped.ts +++ b/packages/compiler-sfc/src/style/pluginScoped.ts @@ -170,10 +170,23 @@ function rewriteSelector( } } + if (n.type === 'universal') { + const prev = selector.at(selector.index(n) - 1) + const next = selector.at(selector.index(n) + 1) + if (!prev && !next) { + node = selectorParser.combinator({ + value: '', + }) + selector.insertBefore(n, node) + selector.removeChild(n) + } + } + if ( (n.type !== 'pseudo' && n.type !== 'combinator') || (n.type === 'pseudo' && (n.value === ':is' || n.value === ':where')) ) { + if (n.type === 'universal' && node) return node = n } }) From 438a52c3191448d52691aa1c9f3c087b74045361 Mon Sep 17 00:00:00 2001 From: Doctorwu Date: Wed, 20 Mar 2024 10:42:03 +0800 Subject: [PATCH 2/4] fix(compiler-sfc): add more case --- packages/compiler-sfc/__tests__/compileStyle.spec.ts | 4 ++++ packages/compiler-sfc/src/style/pluginScoped.ts | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index c79e200ddb7..2608efcf537 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts @@ -396,6 +396,10 @@ describe('SFC style preprocessors', () => { "[data-v-test] { color: red; }" `) + expect(compileScoped('* .foo { color: red; }')).toMatchInlineSnapshot(` + "[data-v-test] .foo { color: red; + }" + `) expect(compileScoped(`.foo * { color: red; }`)).toMatchInlineSnapshot(` ".foo[data-v-test] * { color: red; }" diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts index dd512d36f41..1ed99b522de 100644 --- a/packages/compiler-sfc/src/style/pluginScoped.ts +++ b/packages/compiler-sfc/src/style/pluginScoped.ts @@ -172,13 +172,13 @@ function rewriteSelector( if (n.type === 'universal') { const prev = selector.at(selector.index(n) - 1) - const next = selector.at(selector.index(n) + 1) - if (!prev && !next) { + if (!prev) { node = selectorParser.combinator({ value: '', }) selector.insertBefore(n, node) selector.removeChild(n) + return false } } From 234a13f7de9cdfa50cbabb01b54d943d7b3f4b8f Mon Sep 17 00:00:00 2001 From: Doctorwu Date: Thu, 21 Mar 2024 11:47:00 +0800 Subject: [PATCH 3/4] perf(compiler-sfc): perf universal selector --- .../__tests__/compileStyle.spec.ts | 6 ++++- .../compiler-sfc/src/style/pluginScoped.ts | 25 ++++++++++++++----- 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index 2608efcf537..3abf71b8b47 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts @@ -397,7 +397,11 @@ describe('SFC style preprocessors', () => { }" `) expect(compileScoped('* .foo { color: red; }')).toMatchInlineSnapshot(` - "[data-v-test] .foo { color: red; + ".foo[data-v-test] { color: red; + }" + `) + expect(compileScoped(`*.foo { color: red; }`)).toMatchInlineSnapshot(` + ".foo[data-v-test] { color: red; }" `) expect(compileScoped(`.foo * { color: red; }`)).toMatchInlineSnapshot(` diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts index 1ed99b522de..f811ad1ac84 100644 --- a/packages/compiler-sfc/src/style/pluginScoped.ts +++ b/packages/compiler-sfc/src/style/pluginScoped.ts @@ -172,13 +172,25 @@ function rewriteSelector( if (n.type === 'universal') { const prev = selector.at(selector.index(n) - 1) + const next = selector.at(selector.index(n) + 1) + // * ... {} if (!prev) { - node = selectorParser.combinator({ - value: '', - }) - selector.insertBefore(n, node) - selector.removeChild(n) - return false + // * .foo {} -> .foo[xxxxxxx] {} + if (next) { + if (next.type === 'combinator' && next.value === ' ') { + selector.removeChild(next) + } + selector.removeChild(n) + return true + } else { + // * {} -> [xxxxxxx] {} + node = selectorParser.combinator({ + value: '', + }) + selector.insertBefore(n, node) + selector.removeChild(n) + return false + } } } @@ -186,6 +198,7 @@ function rewriteSelector( (n.type !== 'pseudo' && n.type !== 'combinator') || (n.type === 'pseudo' && (n.value === ':is' || n.value === ':where')) ) { + // .foo * -> .foo[xxxxxxx] * if (n.type === 'universal' && node) return node = n } From a205e545f5239b10df6dedda9c5411d4e71baf61 Mon Sep 17 00:00:00 2001 From: Doctorwu Date: Mon, 1 Apr 2024 17:16:58 +0800 Subject: [PATCH 4/4] fix(compiler-sfc): simplify implement --- packages/compiler-sfc/src/style/pluginScoped.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts index f811ad1ac84..67895fafdc4 100644 --- a/packages/compiler-sfc/src/style/pluginScoped.ts +++ b/packages/compiler-sfc/src/style/pluginScoped.ts @@ -181,7 +181,7 @@ function rewriteSelector( selector.removeChild(next) } selector.removeChild(n) - return true + return } else { // * {} -> [xxxxxxx] {} node = selectorParser.combinator({ @@ -192,14 +192,14 @@ function rewriteSelector( return false } } + // .foo * -> .foo[xxxxxxx] * + if (node) return } if ( (n.type !== 'pseudo' && n.type !== 'combinator') || (n.type === 'pseudo' && (n.value === ':is' || n.value === ':where')) ) { - // .foo * -> .foo[xxxxxxx] * - if (n.type === 'universal' && node) return node = n } })