From 149d69e47cd48ffd4769c5f5b954cf8d0a0134e1 Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Fri, 13 Sep 2024 12:34:16 -0400
Subject: [PATCH] refactor(compiler): allow internal style encapsulation helper
 to directly encapsulate for a component (#57809)

For component stylesheet hot module replacement scenarios, it will be necessarily to directly
encapsulate a component's stylesheet in a single operation. This currently requires the
consumer of the `encapsulateStyle` helper to use the internal Angular attribute values combined
with a find/replace over the entire stylesheet. To avoid both of these, the helper function now
has an optional second parameter which allows direct and full encapsulation of a style for a given
component when the component identifier is known.

PR Close #57809
---
 packages/compiler/src/render3/view/compiler.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/compiler/src/render3/view/compiler.ts b/packages/compiler/src/render3/view/compiler.ts
index 1e159283b21..55a6473469b 100644
--- a/packages/compiler/src/render3/view/compiler.ts
+++ b/packages/compiler/src/render3/view/compiler.ts
@@ -625,11 +625,18 @@ function compileStyles(styles: string[], selector: string, hostSelector: string)
  * is using the `ViewEncapsulation.Emulated` mode.
  *
  * @param style The content of a CSS stylesheet.
+ * @param componentIdentifier The identifier to use within the CSS rules.
  * @returns The encapsulated content for the style.
  */
-export function encapsulateStyle(style: string): string {
+export function encapsulateStyle(style: string, componentIdentifier?: string): string {
   const shadowCss = new ShadowCss();
-  return shadowCss.shimCssText(style, CONTENT_ATTR, HOST_ATTR);
+  const selector = componentIdentifier
+    ? CONTENT_ATTR.replace(COMPONENT_VARIABLE, componentIdentifier)
+    : CONTENT_ATTR;
+  const hostSelector = componentIdentifier
+    ? HOST_ATTR.replace(COMPONENT_VARIABLE, componentIdentifier)
+    : HOST_ATTR;
+  return shadowCss.shimCssText(style, selector, hostSelector);
 }
 
 function createHostDirectivesType(meta: R3DirectiveMetadata): o.Type {