fix(compiler): fix parsing of the :host-context with pseudo selectors (#57796)

GeorgySerga · devversion · commit d325f9b55f24 · 2024-10-10T08:13:23.000Z
fix regexp which is used to test for host inside pseudo selectors PR Close #57796
diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts
@@ -980,7 +980,7 @@ const _cssColonHostContextReGlobal = new RegExp(_polyfillHostContext + _parenSuf
 const _cssColonHostContextRe = new RegExp(_polyfillHostContext + _parenSuffix, 'im');
 const _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
 const _polyfillHostNoCombinatorWithinPseudoFunction = new RegExp(
-  `:.*(.*${_polyfillHostNoCombinator}.*)`,
+  `:.*\\(.*${_polyfillHostNoCombinator}.*\\)`,
 );
 const _polyfillExactHostNoCombinatorReGlobal = /-shadowcsshost-no-combinator/g;
 const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
diff --git a/packages/compiler/test/shadow_css/shadow_css_spec.ts b/packages/compiler/test/shadow_css/shadow_css_spec.ts
@@ -69,7 +69,7 @@ describe('ShadowCss', () => {
     expect(shim('[attr] {}', 'contenta')).toEqualCss('[attr][contenta] {}');
   });
 
-  it('should transform :host with attributes and pseudo selectors', () => {
+  it('should transform :host and :host-context with attributes and pseudo selectors', () => {
     expect(shim(':host [attr] {}', 'contenta', 'hosta')).toEqualCss('[hosta] [attr][contenta] {}');
     expect(shim(':host(create-first-project) {}', 'contenta', 'hosta')).toEqualCss(
       'create-first-project[hosta] {}',
@@ -78,6 +78,11 @@ describe('ShadowCss', () => {
     expect(shim(':host[attr]:where(:not(.cm-button)) {}', 'contenta', 'hosta')).toEqualCss(
       '[hosta][attr]:where(:not(.cm-button)) {}',
     );
+    expect(
+      shim(':host-context(backdrop:not(.borderless)) .backdrop {}', 'contenta', 'hosta'),
+    ).toEqualCss(
+      'backdrop:not(.borderless)[hosta] .backdrop[contenta], backdrop:not(.borderless) [hosta] .backdrop[contenta] {}',
+    );
   });
 
   it('should handle escaped sequences in selectors', () => {
