From aa039a13f0a538286d90da819f7ee896c835ce2b Mon Sep 17 00:00:00 2001
From: Pete Bacon Darwin <pete@bacondarwin.com>
Date: Thu, 18 Mar 2021 13:57:04 +0000
Subject: [PATCH] fix(compiler): correctly process multiple rules containing
 `:host` selectors (#41261)

When there was more than one rule in a single style string, only the first
rule was having its `:host` selector processed correctly. Now subsequent
rules will also be processed accurately.

Fixes #41237

PR Close #41261
---
 packages/compiler/src/shadow_css.ts       |  1 +
 packages/compiler/test/shadow_css_spec.ts | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts
index fc0a295186..e8d08e7adb 100644
--- a/packages/compiler/src/shadow_css.ts
+++ b/packages/compiler/src/shadow_css.ts
@@ -720,6 +720,7 @@ function escapeBlocks(
  */
 function combineHostContextSelectors(contextSelectors: string[], otherSelectors: string): string {
   const hostMarker = _polyfillHostNoCombinator;
+  _polyfillHostRe.lastIndex = 0;  // reset the regex to ensure we get an accurate test
   const otherSelectorsHasHost = _polyfillHostRe.test(otherSelectors);
 
   // If there are no context selectors then just output a host marker
diff --git a/packages/compiler/test/shadow_css_spec.ts b/packages/compiler/test/shadow_css_spec.ts
index 62642667b6..32cd76dbab 100644
--- a/packages/compiler/test/shadow_css_spec.ts
+++ b/packages/compiler/test/shadow_css_spec.ts
@@ -286,6 +286,17 @@ import {normalizeCSS} from '@angular/platform-browser/testing/src/browser_util';
         expect(s(':host-context(div) > :host(.x) > .y {}', 'contenta', 'a-host'))
             .toEqual('div > .x[a-host] > .y[contenta] {}');
       });
+
+      it('should parse multiple rules containing :host-context and :host', () => {
+        const input = `
+            :host-context(outer1) :host(bar) {}
+            :host-context(outer2) :host(foo) {}
+        `;
+        expect(s(input, 'contenta', 'a-host'))
+            .toEqual(
+                'outer1 bar[a-host] {} ' +
+                'outer2 foo[a-host] {}');
+      });
     });
 
     it('should support polyfill-next-selector', () => {