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

Co-authored-by: Haoqun Jiang <haoqunjiang@gmail.com> Closes #10511
vuejs · Mar 25, 2024 · 660cadc · 660cadc
1 parent caeb8a6
commit 660cadc
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git 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
@@ -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
     }