diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts index 9fded1d8ad5..6b24cefbc5c 100644 --- a/packages/compiler/src/shadow_css.ts +++ b/packages/compiler/src/shadow_css.ts @@ -1067,7 +1067,13 @@ const _cssContentUnscopedRuleRe = const _polyfillHost = '-shadowcsshost'; // note: :host-context pre-processed to -shadowcsshostcontext. const _polyfillHostContext = '-shadowcsscontext'; -const _parenSuffix = '(?:\\((' + '(?:\\([^)(]*\\)|[^)(]*)+?' + ')\\))'; +// Matches text content with no parentheses, e.g., "foo" +const _noParens = '[^)(]*'; +// Matches content with at most ONE level of nesting, e.g., "a(b)c" +const _level1Parens = String.raw`(?:\(${_noParens}\)|${_noParens})+?`; +// Matches content with at most TWO levels of nesting, e.g., "a(b(c)d)e" +const _level2Parens = String.raw`(?:\(${_level1Parens}\)|${_noParens})+?`; +const _parenSuffix = String.raw`(?:\((${_level2Parens})\))`; const _cssColonHostRe = new RegExp(_polyfillHost + _parenSuffix + '?([^,{]*)', 'gim'); // note: :host-context patterns are terminated with `{`, as opposed to :host which // is both `{` and `,` because :host-context handles top-level commas differently. diff --git a/packages/compiler/test/shadow_css/host_and_host_context_spec.ts b/packages/compiler/test/shadow_css/host_and_host_context_spec.ts index e934a9ccd2c..20999e3f4c8 100644 --- a/packages/compiler/test/shadow_css/host_and_host_context_spec.ts +++ b/packages/compiler/test/shadow_css/host_and_host_context_spec.ts @@ -83,6 +83,9 @@ describe('ShadowCss, :host and :host-context', () => { expect(shim(':host(:not(p)):before {}', 'contenta', 'a-host')).toEqualCss( '[a-host]:not(p):before {}', ); + expect(shim(':host(:not(:has(p))) {}', 'contenta', 'a-host')).toEqualCss( + '[a-host]:not(:has(p)) {}', + ); expect(shim(':host:not(:host.foo) {}', 'contenta', 'a-host')).toEqualCss( '[a-host]:not([a-host].foo) {}', );