fix(compiler-sfc): :is() and :where() in compound selectors

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(`

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
  }