feat(ivy): bridge component styles into the component renderer (#25255)

PR Close #25255

packages/compiler-cli/src/ngtsc/annotations/src/component.ts

@@ -15,7 +15,7 @@ import {filterToMembersWithDecorator, reflectObjectLiteral, staticallyResolve} f
 import {AnalysisOutput, CompileResult, DecoratorHandler} from '../../transform';
 
 import {ResourceLoader} from './api';
-import {extractDirectiveMetadata, extractQueriesFromDecorator, queriesFromFields} from './directive';
+import {extractDirectiveMetadata, extractQueriesFromDecorator, parseFieldArrayValue, queriesFromFields} from './directive';
 import {SelectorScopeRegistry} from './selector_scope';
 import {isAngularCore, unwrapExpression} from './util';
 
@@ -135,11 +135,24 @@ export class ComponentDecoratorHandler implements DecoratorHandler<R3ComponentMe
       viewQueries.push(...queriesFromDecorator.view);
     }
 
+    let styles: string[]|null = null;
+    if (component.has('styles')) {
+      styles = parseFieldArrayValue(component, 'styles', this.reflector, this.checker);
+    }
+
+    let encapsulation: number = 0;
+    if (component.has('encapsulation')) {
+      encapsulation = parseInt(staticallyResolve(
+          component.get('encapsulation') !, this.reflector, this.checker) as string);
+    }
+
     return {
       analysis: {
         ...metadata,
         template,
         viewQueries,
+        encapsulation,
+        styles: styles || [],
 
         // These will be replaced during the compilation step, after all `NgModule`s have been
         // analyzed and the full compilation scope for the component can be realized.

packages/compiler-cli/src/ngtsc/annotations/src/directive.ts

@@ -261,6 +261,22 @@ function isStringArrayOrDie(value: any, name: string): value is string[] {
   return true;
 }
 
+export function parseFieldArrayValue(
+    directive: Map<string, ts.Expression>, field: string, reflector: ReflectionHost,
+    checker: ts.TypeChecker): null|string[] {
+  if (!directive.has(field)) {
+    return null;
+  }
+
+  // Resolve the field of interest from the directive metadata to a string[].
+  const value = staticallyResolve(directive.get(field) !, reflector, checker);
+  if (!isStringArrayOrDie(value, field)) {
+    throw new Error(`Failed to resolve @Directive.${field}`);
+  }
+
+  return value;
+}
+
 /**
  * Interpret property mapping fields on the decorator (e.g. inputs or outputs) and return the
  * correctly shaped metadata object.
@@ -268,16 +284,11 @@ function isStringArrayOrDie(value: any, name: string): value is string[] {
 function parseFieldToPropertyMapping(
     directive: Map<string, ts.Expression>, field: string, reflector: ReflectionHost,
     checker: ts.TypeChecker): {[field: string]: string} {
-  if (!directive.has(field)) {
+  const metaValues = parseFieldArrayValue(directive, field, reflector, checker);
+  if (!metaValues) {
     return EMPTY_OBJECT;
   }
 
-  // Resolve the field of interest from the directive metadata to a string[].
-  const metaValues = staticallyResolve(directive.get(field) !, reflector, checker);
-  if (!isStringArrayOrDie(metaValues, field)) {
-    throw new Error(`Failed to resolve @Directive.${field}`);
-  }
-
   return metaValues.reduce(
       (results, value) => {
         // Either the value is 'field' or 'field: property'. In the first case, `property` will