fix(compiler): support arbitrary nesting in :host-context()

Previously we supported one level of nested pseudo-element selectors
inside :host-context(), e.g. :host-context(:is(.foo, .bar)). This was
based on a regex-based approach. We could support deeper levels of
nesting by updating the regex, but using a regex approach prohibits us
from supporting arbitrary nesting.

Rather than just adding one more level to the existing expression, I've
added a new generator function which splits selectors on commas in a
parenthesis-aware way. This allows us to support arbitrary nesting.

It's likely we'll want to reuse this in other places where we're not as
careful today. We'll probably do this on a request-based basis, though.

Fixes angular#59176

Author: mattrbeck

packages/compiler/src/shadow_css.ts

@@ -5,6 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/license
  */
+import * as chars from './chars';
 
 /**
  * The following set contains all keywords that can be used in the animation css shorthand
@@ -525,6 +526,40 @@ export class ShadowCss {
     });
   }
 
+  /**
+   * Generator function that splits a string on top-level commas (commas that are not inside parentheses).
+   * Yields each part of the string between top-level commas. Terminates if an extra closing paren is found.
+   *
+   * @param text The string to split
+   */
+  private *_splitOnTopLevelCommas(text: string): Generator<string> {
+    const length = text.length;
+    let parens = 0;
+    let prev = 0;
+
+    for (let i = 0; i < length; i++) {
+      const charCode = text.charCodeAt(i);
+
+      if (charCode === chars.$LPAREN) {
+        parens++;
+      } else if (charCode === chars.$RPAREN) {
+        parens--;
+        if (parens < 0) {
+          // Found an extra closing paren. Assume we want the list terminated here
+          yield text.slice(prev, i);
+          return;
+        }
+      } else if (charCode === chars.$COMMA && parens === 0) {
+        // Found a top-level comma, yield the current chunk
+        yield text.slice(prev, i);
+        prev = i + 1;
+      }
+    }
+
+    // Yield the final chunk
+    yield text.slice(prev);
+  }
+
   /*
    * convert a rule like :host-context(.foo) > .bar { }
    *
@@ -541,38 +576,14 @@ export class ShadowCss {
    * .foo<scopeName> .bar { ... }
    */
   private _convertColonHostContext(cssText: string): string {
-    const length = cssText.length;
-    let parens = 0;
-    let prev = 0;
-    let result = '';
-
     // Splits up the selectors on their top-level commas, processes the :host-context in them
     // individually and stitches them back together. This ensures that individual selectors don't
     // affect each other.
-    for (let i = 0; i < length; i++) {
-      const char = cssText[i];
-
-      // If we hit a comma and there are no open parentheses, take the current chunk and process it.
-      if (char === ',' && parens === 0) {
-        result += this._convertColonHostContextInSelectorPart(cssText.slice(prev, i)) + ',';
-        prev = i + 1;
-        continue;
-      }
-
-      // We've hit the end. Take everything since the last comma.
-      if (i === length - 1) {
-        result += this._convertColonHostContextInSelectorPart(cssText.slice(prev));
-        break;
-      }
-
-      if (char === '(') {
-        parens++;
-      } else if (char === ')') {
-        parens--;
-      }
+    const results: string[] = [];
+    for (const part of this._splitOnTopLevelCommas(cssText)) {
+      results.push(this._convertColonHostContextInSelectorPart(part));
     }
-
-    return result;
+    return results.join(',');
   }
 
   private _convertColonHostContextInSelectorPart(cssText: string): string {
@@ -587,18 +598,28 @@ export class ShadowCss {
 
       // There may be more than `:host-context` in this selector so `selectorText` could look like:
       // `:host-context(.one):host-context(.two)`.
-      // Execute `_cssColonHostContextRe` over and over until we have extracted all the
-      // `:host-context` selectors from this selector.
-      let match: RegExpExecArray | null;
-      while ((match = _cssColonHostContextRe.exec(selectorText))) {
-        // `match` = [':host-context(<selectors>)<rest>', <selectors>, <rest>]
-
-        // The `<selectors>` could actually be a comma separated list: `:host-context(.one, .two)`.
-        const newContextSelectors = (match[1] ?? '')
-          .trim()
-          .split(',')
-          .map((m) => m.trim())
-          .filter((m) => m !== '');
+      // Loop until every :host-context in the compound selector has been processed.
+      let startIndex = selectorText.indexOf(_polyfillHostContext);
+      while (startIndex !== -1) {
+        const afterPrefix = selectorText.substring(startIndex + _polyfillHostContext.length);
+
+        if (!afterPrefix || afterPrefix[0] !== '(') {
+          // Edge case of :host-context with no parens (e.g. `:host-context .inner`)
+          selectorText = afterPrefix;
+          startIndex = selectorText.indexOf(_polyfillHostContext);
+          continue;
+        }
+
+        // Extract comma-separated selectors between the parentheses
+        const newContextSelectors: string[] = [];
+        let endIndex = 0; // Index of the closing paren of the :host-context()
+        for (const selector of this._splitOnTopLevelCommas(afterPrefix.substring(1))) {
+          endIndex = endIndex + selector.length + 1;
+          const trimmed = selector.trim();
+          if (trimmed) {
+            newContextSelectors.push(trimmed);
+          }
+        }
 
         // We must duplicate the current selector group for each of these new selectors.
         // For example if the current groups are:
@@ -627,7 +648,8 @@ export class ShadowCss {
         }
 
         // Update the `selectorText` and see repeat to see if there are more `:host-context`s.
-        selectorText = match[2];
+        selectorText = afterPrefix.substring(endIndex + 1);
+        startIndex = selectorText.indexOf(_polyfillHostContext);
       }
 
       // The context selectors now must be combined with each other to capture all the possible
@@ -1054,7 +1076,6 @@ const _cssColonHostContextReGlobal = new RegExp(
   `${_cssScopedPseudoFunctionPrefix}(${_hostContextPattern})`,
   'gim',
 );
-const _cssColonHostContextRe = new RegExp(_hostContextPattern, 'im');
 const _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
 const _polyfillHostNoCombinatorOutsidePseudoFunction = new RegExp(
   `${_polyfillHostNoCombinator}(?![^(]*\\))`,

packages/compiler/test/shadow_css/host_and_host_context_spec.ts

@@ -169,6 +169,20 @@ describe('ShadowCss, :host and :host-context', () => {
       );
     });
 
+    it('should transform :host-context with nested pseudo selectors', () => {
+      expect(shim(':host-context(:where(.foo:not(.bar))) {}', 'contenta', 'hosta')).toEqualCss(
+        ':where(.foo:not(.bar))[hosta], :where(.foo:not(.bar)) [hosta] {}',
+      );
+      expect(shim(':host-context(:is(.foo:not(.bar))) {}', 'contenta', 'hosta')).toEqualCss(
+        ':is(.foo:not(.bar))[hosta], :is(.foo:not(.bar)) [hosta] {}',
+      );
+      expect(
+        shim(':host-context(:where(.foo:not(.bar, .baz))) .inner {}', 'contenta', 'hosta'),
+      ).toEqualCss(
+        ':where(.foo:not(.bar, .baz))[hosta] .inner[contenta], :where(.foo:not(.bar, .baz)) [hosta] .inner[contenta] {}',
+      );
+    });
+
     it('should handle tag selector', () => {
       expect(shim(':host-context(div) {}', 'contenta', 'a-host')).toEqualCss(
         'div[a-host], div [a-host] {}',
@@ -243,6 +257,9 @@ describe('ShadowCss, :host and :host-context', () => {
       expect(shim(':host-context() .inner {}', 'contenta', 'a-host')).toEqualCss(
         '[a-host] .inner[contenta] {}',
       );
+      expect(shim(':host-context :host-context(.a) {}', 'contenta', 'host-a')).toEqualCss(
+        '.a[host-a], .a [host-a] {}',
+      );
     });
 
     // More than one selector such as this is not valid as part of the :host-context spec.