From 16b9934f2928b10e12db32dc30b953c3050a70b3 Mon Sep 17 00:00:00 2001 From: Doctorwu Date: Thu, 14 Mar 2024 18:50:57 +0800 Subject: [PATCH 1/5] fix(compiler-sfc): fix pseudo priority close#10511 --- packages/compiler-sfc/src/style/pluginScoped.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts index c5e01896130..56c031a3fff 100644 --- a/packages/compiler-sfc/src/style/pluginScoped.ts +++ b/packages/compiler-sfc/src/style/pluginScoped.ts @@ -1,5 +1,5 @@ import type { AtRule, PluginCreator, Rule } from 'postcss' -import selectorParser from 'postcss-selector-parser' +import selectorParser, { Selector } from 'postcss-selector-parser' import { warn } from '../warn' const animationNameRE = /^(-\w+-)?animation-name$/ @@ -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 } From 99398883266a9226849ed98e0ce8d4cef5cae2b3 Mon Sep 17 00:00:00 2001 From: Doctorwu Date: Thu, 14 Mar 2024 19:04:08 +0800 Subject: [PATCH 2/5] fix: remove unuse import --- packages/compiler-sfc/src/style/pluginScoped.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts index 56c031a3fff..0a46de7fcb4 100644 --- a/packages/compiler-sfc/src/style/pluginScoped.ts +++ b/packages/compiler-sfc/src/style/pluginScoped.ts @@ -1,5 +1,5 @@ import type { AtRule, PluginCreator, Rule } from 'postcss' -import selectorParser, { Selector } from 'postcss-selector-parser' +import selectorParser from 'postcss-selector-parser' import { warn } from '../warn' const animationNameRE = /^(-\w+-)?animation-name$/ From 147f1243cc20afd1d5110db960dc952d4b8f6c67 Mon Sep 17 00:00:00 2001 From: Doctorwu Date: Thu, 14 Mar 2024 19:11:52 +0800 Subject: [PATCH 3/5] feat: add test case --- .../__tests__/compileStyle.spec.ts | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index 1f9ae67225b..dc57518d9e3 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts @@ -161,6 +161,43 @@ describe('SFC scoped CSS', () => { `) }) + // #10511 + test(':is and :where with same pre-selector should have right priority', () => { + 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(` From 96cd5c258cd8e3295d4ddd5b6e3246dab5d6ec0e Mon Sep 17 00:00:00 2001 From: Doctorwu Date: Thu, 14 Mar 2024 20:38:42 +0800 Subject: [PATCH 4/5] fix: tweak test case --- .../__tests__/compileStyle.spec.ts | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index dc57518d9e3..cddf3a35c68 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts @@ -164,37 +164,39 @@ describe('SFC scoped CSS', () => { // #10511 test(':is and :where with same pre-selector should have right priority', () => { expect( - compileScoped(`.div { color: red }; .div:where(:hover) { color: blue }`), + compileScoped(`.div { color: red; } .div:where(:hover) { color: blue; }`), ).toMatchInlineSnapshot(` - ".div[data-v-test] { color: red - }; - .div[data-v-test]:where(:hover) { color: blue + ".div[data-v-test] { color: red; + } + .div[data-v-test]:where(:hover) { color: blue; }"`) expect( - compileScoped(`.div { color: red }; .div:is(:hover) { color: blue }`), + compileScoped(`.div { color: red; } .div:is(:hover) { color: blue; }`), ).toMatchInlineSnapshot(` - ".div[data-v-test] { color: red - }; - .div[data-v-test]:is(:hover) { color: blue + ".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 }`, + `.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 + ".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 }`), + 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 + ".div[data-v-test] { color: red; + } + .div[data-v-test]:is(.foo:hover) { color: blue; }"`) }) From a202618bf0b906459d886db29c04dfa2b33fb2c8 Mon Sep 17 00:00:00 2001 From: Doctor Wu <44631608+Doctor-wu@users.noreply.github.com> Date: Sat, 23 Mar 2024 00:13:19 +0800 Subject: [PATCH 5/5] Update packages/compiler-sfc/__tests__/compileStyle.spec.ts Co-authored-by: Haoqun Jiang --- packages/compiler-sfc/__tests__/compileStyle.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index cddf3a35c68..0da713a0504 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts @@ -162,7 +162,7 @@ describe('SFC scoped CSS', () => { }) // #10511 - test(':is and :where with same pre-selector should have right priority', () => { + test(':is() and :where() in compound selectors', () => { expect( compileScoped(`.div { color: red; } .div:where(:hover) { color: blue; }`), ).toMatchInlineSnapshot(`