From: Doctor Wu <44631608+Doctor-wu@users.noreply.github.com> Date: Mon, 25 Mar 2024 06:12:33 +0000 (+0800) Subject: fix(compiler-sfc): :is() and :where() in compound selectors (#10522) X-Git-Tag: v3.4.22~46 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=660cadc7aadb909ef33a6055c4374902a82607a4;p=thirdparty%2Fvuejs%2Fcore.git fix(compiler-sfc): :is() and :where() in compound selectors (#10522) Co-authored-by: Haoqun Jiang Closes #10511 --- diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index 1f9ae67225..0da713a050 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts @@ -161,6 +161,45 @@ describe('SFC scoped CSS', () => { `) }) + // #10511 + test(':is() and :where() in compound selectors', () => { + expect( + compileScoped(`.div { color: red; } .div:where(:hover) { color: blue; }`), + ).toMatchInlineSnapshot(` + ".div[data-v-test] { color: red; + } + .div[data-v-test]:where(:hover) { color: blue; + }"`) + + expect( + compileScoped(`.div { color: red; } .div:is(:hover) { color: blue; }`), + ).toMatchInlineSnapshot(` + ".div[data-v-test] { color: red; + } + .div[data-v-test]:is(:hover) { color: blue; + }"`) + + expect( + compileScoped( + `.div { color: red; } .div:where(.foo:hover) { color: blue; }`, + ), + ).toMatchInlineSnapshot(` + ".div[data-v-test] { color: red; + } + .div[data-v-test]:where(.foo:hover) { color: blue; + }"`) + + expect( + compileScoped( + `.div { color: red; } .div:is(.foo:hover) { color: blue; }`, + ), + ).toMatchInlineSnapshot(` + ".div[data-v-test] { color: red; + } + .div[data-v-test]:is(.foo:hover) { color: blue; + }"`) + }) + test('media query', () => { expect(compileScoped(`@media print { .foo { color: red }}`)) .toMatchInlineSnapshot(` diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts index c5e0189613..0a46de7fcb 100644 --- a/packages/compiler-sfc/src/style/pluginScoped.ts +++ b/packages/compiler-sfc/src/style/pluginScoped.ts @@ -172,7 +172,9 @@ function rewriteSelector( if ( (n.type !== 'pseudo' && n.type !== 'combinator') || - (n.type === 'pseudo' && (n.value === ':is' || n.value === ':where')) + (n.type === 'pseudo' && + (n.value === ':is' || n.value === ':where') && + !node) ) { node = n }