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
This commit is contained in:
Charles Lyding 2024-09-13 12:34:16 -04:00 committed by Pawel Kozlowski
parent 1b1519224d
commit 149d69e47c

View file

@ -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 {