fix(compiler): allow combinators inside pseudo selectors (#57796)

GeorgySerga · devversion · commit 66dcc691f55e · 2024-10-10T08:13:23.000Z
allow css combinators within pseudo selector functions, parsing those correctly. Similarly to previous version, don't break selectors into part if combinators are within parenthesis, for example `:where(.one > .two)` PR Close #57796
diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts
@@ -808,9 +808,9 @@ export class ShadowCss {
     let scopedSelector = '';
     let startIndex = 0;
     let res: RegExpExecArray | null;
-    // Spaces aren't used as a delimeter if they are within parenthesis, for example
+    // Combinators aren't used as a delimeter if they are within parenthesis, for example
     // `:where(.one .two)` stays intact.
-    const sep = /( (?![^\(]*\))|>|\+|~(?!=))\s*/g;
+    const sep = /( |>|\+|~(?!=))(?![^\(]*\))\s*/g;
 
     // If a selector appears before :host it should not be shimmed as it
     // matches on ancestor elements and not on elements in the host's shadow
diff --git a/packages/compiler/test/shadow_css/shadow_css_spec.ts b/packages/compiler/test/shadow_css/shadow_css_spec.ts
@@ -104,6 +104,15 @@ describe('ShadowCss', () => {
     expect(shim(':where(.one, .two) {}', 'contenta', 'hosta')).toEqualCss(
       ':where(.one[contenta], .two[contenta]) {}',
     );
+    expect(shim(':where(.one > .two) {}', 'contenta', 'hosta')).toEqualCss(
+      ':where(.one[contenta] > .two[contenta]) {}',
+    );
+    expect(shim(':where(> .one) {}', 'contenta', 'hosta')).toEqualCss(
+      ':where( > .one[contenta]) {}',
+    );
+    expect(shim(':where(:not(.one) ~ .two) {}', 'contenta', 'hosta')).toEqualCss(
+      ':where([contenta]:not(.one) ~ .two[contenta]) {}',
+    );
 
     // :is()
     expect(shim('div:is(.foo) {}', 'contenta', 'a-host')).toEqualCss('div[contenta]:is(.foo) {}');
@@ -148,6 +157,9 @@ describe('ShadowCss', () => {
     expect(shim(':has(a) :host :has(b) {}', 'contenta', 'hosta')).toEqualCss(
       ':has(a) [hosta] [contenta]:has(b) {}',
     );
+    expect(shim('div:has(~ .one) {}', 'contenta', 'hosta')).toEqualCss(
+      'div[contenta]:has(~ .one) {}',
+    );
     // Unlike `:is()` or `:where()` the attribute selector isn't placed inside
     // of `:has()`. That is deliberate, `[contenta]:has(a)` would select all
     // `[contenta]` with `a` inside, while `:has(a[contenta])` would select
