refactor(Compiler): make shadow DOM stragegy support more flexible

Author: vicb

modules/angular2/src/core/application.js

@@ -24,6 +24,7 @@ import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mappe
 import {UrlResolver} from 'angular2/src/core/compiler/url_resolver';
 import {StyleUrlResolver} from 'angular2/src/core/compiler/style_url_resolver';
 import {StyleInliner} from 'angular2/src/core/compiler/style_inliner';
+import {CssProcessor} from 'angular2/src/core/compiler/css_processor';
 
 var _rootInjector: Injector;
 
@@ -98,6 +99,7 @@ function _injectorBindings(appComponentType): List<Binding> {
       UrlResolver,
       StyleUrlResolver,
       StyleInliner,
+      CssProcessor,
   ];
 }
 

modules/angular2/src/core/compiler/compiler.js

@@ -17,7 +17,7 @@ import {ShadowDomStrategy} from './shadow_dom_strategy';
 import {CompileStep} from './pipeline/compile_step';
 import {ComponentUrlMapper} from './component_url_mapper';
 import {UrlResolver} from './url_resolver';
-
+import {CssProcessor} from './css_processor';
 
 /**
  * Cache that stores the ProtoView of the template of a component.
@@ -61,6 +61,7 @@ export class Compiler {
   _componentUrlMapper: ComponentUrlMapper;
   _urlResolver: UrlResolver;
   _appUrl: string;
+  _cssProcessor: CssProcessor;
 
   constructor(changeDetection:ChangeDetection,
               templateLoader:TemplateLoader,
@@ -70,7 +71,8 @@ export class Compiler {
               shadowDomStrategy: ShadowDomStrategy,
               templateResolver: TemplateResolver,
               componentUrlMapper: ComponentUrlMapper,
-              urlResolver: UrlResolver) {
+              urlResolver: UrlResolver,
+              cssProcessor: CssProcessor) {
     this._changeDetection = changeDetection;
     this._reader = reader;
     this._parser = parser;
@@ -87,6 +89,7 @@ export class Compiler {
     this._componentUrlMapper = componentUrlMapper;
     this._urlResolver = urlResolver;
     this._appUrl = urlResolver.resolve(null, './');
+    this._cssProcessor = cssProcessor;
   }
 
   createSteps(component:Type, template: Template):List<CompileStep> {
@@ -102,7 +105,7 @@ export class Compiler {
     var templateUrl = this._templateLoader.getTemplateUrl(template);
 
     return createDefaultSteps(this._changeDetection, this._parser, cmpMetadata, dirMetadata,
-      this._shadowDomStrategy, templateUrl);
+      this._shadowDomStrategy, templateUrl, this._cssProcessor);
   }
 
   compile(component: Type):Promise<ProtoView> {

modules/angular2/src/core/compiler/css_processor.js

@@ -0,0 +1,48 @@
+import {DOM} from 'angular2/src/dom/dom_adapter';
+
+import {isPresent} from 'angular2/src/facade/lang';
+
+import {CompileStep} from './pipeline/compile_step';
+import {CompileElement} from './pipeline/compile_element';
+import {CompileControl} from './pipeline/compile_control';
+
+import {ShadowDomStrategy} from './shadow_dom_strategy';
+import {DirectiveMetadata} from './directive_metadata';
+
+/**
+ * Processes the <style> tags during the compilation.
+ */
+export class CssProcessor {
+
+  /**
+   * Returns a compile step to be added to the compiler pipeline.
+   *
+   * @param {DirectiveMetadata} cmpMetadata
+   * @param {ShadowDomStrategy} shadowDomStrategy
+   * @param {string} templateUrl The base URL of the template
+   */
+  getCompileStep(cmpMetadata: DirectiveMetadata, shadowDomStrategy: ShadowDomStrategy,
+    templateUrl: string) {
+    var strategyStep = shadowDomStrategy.getStyleCompileStep(cmpMetadata, templateUrl);
+    return new _CssProcessorStep(strategyStep);
+  }
+}
+
+class _CssProcessorStep extends CompileStep {
+  _strategyStep: CompileStep;
+
+  constructor(strategyStep: CompileStep) {
+    super();
+    this._strategyStep = strategyStep;
+  }
+
+  process(parent:CompileElement, current:CompileElement, control:CompileControl) {
+    if (DOM.tagName(current.element) == 'STYLE') {
+      current.ignoreBindings = true;
+
+      if (isPresent(this._strategyStep)) {
+        this._strategyStep.process(parent, current, control);
+      }
+    }
+  }
+}

modules/angular2/src/core/compiler/pipeline/default_steps.js

@@ -1,5 +1,6 @@
 import {ChangeDetection, Parser} from 'angular2/change_detection';
 import {List, ListWrapper} from 'angular2/src/facade/collection';
+import {isPresent} from 'angular2/src/facade/lang';
 
 import {PropertyBindingParser} from './property_binding_parser';
 import {TextInterpolationParser} from './text_interpolation_parser';
@@ -9,8 +10,8 @@ import {ElementBindingMarker} from './element_binding_marker';
 import {ProtoViewBuilder} from './proto_view_builder';
 import {ProtoElementInjectorBuilder} from './proto_element_injector_builder';
 import {ElementBinderBuilder} from './element_binder_builder';
-import {ResolveCss} from './resolve_css';
-import {ShimShadowDom} from './shim_shadow_dom';
+
+import {CssProcessor} from 'angular2/src/core/compiler/css_processor';
 import {DirectiveMetadata} from 'angular2/src/core/compiler/directive_metadata';
 import {ShadowDomStrategy, EmulatedScopedShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 
@@ -25,11 +26,12 @@ export function createDefaultSteps(
     compiledComponent: DirectiveMetadata,
     directives: List<DirectiveMetadata>,
     shadowDomStrategy: ShadowDomStrategy,
-    templateUrl: string) {
+    templateUrl: string,
+    cssProcessor: CssProcessor) {
 
   var steps = [
     new ViewSplitter(parser),
-    new ResolveCss(compiledComponent, shadowDomStrategy, templateUrl),
+    cssProcessor.getCompileStep(compiledComponent, shadowDomStrategy, templateUrl),
     new PropertyBindingParser(parser),
     new DirectiveParser(directives),
     new TextInterpolationParser(parser),
@@ -39,9 +41,9 @@ export function createDefaultSteps(
     new ElementBinderBuilder(parser),
   ];
 
-  if (shadowDomStrategy instanceof EmulatedScopedShadowDomStrategy) {
-    var step = new ShimShadowDom(compiledComponent, shadowDomStrategy);
-    ListWrapper.push(steps, step);
+  var shadowDomStep = shadowDomStrategy.getTemplateCompileStep(compiledComponent);
+  if (isPresent(shadowDomStep)) {
+    ListWrapper.push(steps, shadowDomStep);
   }
 
   return steps;