refactor(compiler): provide a private API to perform direct style enc…

…apsulation

To support the development of component specific HMR capabilities, the build/serve
tooling may need to directly process styles to match the view encapsulation
expectations of individual components. To allow for this scenario and to avoid tooling
to need to re-implement the emulated encapsulation logic, an private API is now
available in the `@angular/compiler` package named `ɵencapsulateStyle` that converts
a stylesheet content string to an encapsulated form. This function is prefixed with
the private symbol and is not considered part of the public API nor does it have
any of its respective support or versioning guarantees.

packages/compiler/src/compiler.ts

@@ -76,7 +76,7 @@ export {compileInjector, R3InjectorMetadata} from './render3/r3_injector_compile
 export {compilePipeFromMetadata, R3PipeMetadata} from './render3/r3_pipe_compiler';
 export {makeBindingParser, ParsedTemplate, parseTemplate, ParseTemplateOptions} from './render3/view/template';
 export {ForwardRefHandling, MaybeForwardRefExpression, R3CompiledExpression, R3Reference, createMayBeForwardRefExpression, devOnlyGuardedExpression, getSafePropertyAccessString} from './render3/util';
-export {compileComponentFromMetadata, compileDirectiveFromMetadata, parseHostBindings, ParsedHostBindings, verifyHostBindings} from './render3/view/compiler';
+export {compileComponentFromMetadata, compileDirectiveFromMetadata, parseHostBindings, ParsedHostBindings, verifyHostBindings, encapsulateStyle as ɵencapsulateStyle} from './render3/view/compiler';
 export {compileDeclareClassMetadata} from './render3/partial/class_metadata';
 export {compileDeclareComponentFromMetadata, DeclareComponentTemplateInfo} from './render3/partial/component';
 export {compileDeclareDirectiveFromMetadata} from './render3/partial/directive';

packages/compiler/src/render3/view/compiler.ts

@@ -981,6 +981,19 @@ function compileStyles(styles: string[], selector: string, hostSelector: string)
   });
 }
 
+/**
+ * Encapsulates a CSS stylesheet with emulated view encapsulation.
+ * This allows a stylesheet to be used with an Angular component that
+ * is using the `ViewEncapsulation.Emulated` mode.
+ *
+ * @param style The content of a CSS stylesheet.
+ * @returns The encapsulated content for the style.
+ */
+export function encapsulateStyle(style: string): string {
+  const shadowCss = new ShadowCss();
+  return shadowCss.shimCssText(style, CONTENT_ATTR, HOST_ATTR);
+}
+
 function createHostDirectivesType(meta: R3DirectiveMetadata): o.Type {
   if (!meta.hostDirectives?.length) {
     return o.NONE_TYPE;