feat(CssProcessor): add support for CssTransformers

Closes angular#860

Author: vicb

modules/angular2/src/core/application.js

@@ -99,7 +99,7 @@ function _injectorBindings(appComponentType): List<Binding> {
       UrlResolver,
       StyleUrlResolver,
       StyleInliner,
-      CssProcessor,
+      bind(CssProcessor).toFactory(() => new CssProcessor(null), []),
   ];
 }
 

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

@@ -1,6 +1,7 @@
 import {DOM} from 'angular2/src/dom/dom_adapter';
 
 import {isPresent} from 'angular2/src/facade/lang';
+import {List} from 'angular2/src/facade/collection';
 
 import {CompileStep} from './pipeline/compile_step';
 import {CompileElement} from './pipeline/compile_element';
@@ -10,9 +11,16 @@ import {ShadowDomStrategy} from './shadow_dom_strategy';
 import {DirectiveMetadata} from './directive_metadata';
 
 /**
- * Processes the <style> tags during the compilation.
+ * Processes the <style> tags during the compilation:
+ * - Apply any given transformers,
+ * - Apply the shadow DOM strategy style step.
  */
 export class CssProcessor {
+  _transformers: List<CssTransformer>;
+
+  constructor(transformers: List<CssTransformer>) {
+    this._transformers = transformers;
+  }
 
   /**
    * Returns a compile step to be added to the compiler pipeline.
@@ -24,22 +32,35 @@ export class CssProcessor {
   getCompileStep(cmpMetadata: DirectiveMetadata, shadowDomStrategy: ShadowDomStrategy,
     templateUrl: string) {
     var strategyStep = shadowDomStrategy.getStyleCompileStep(cmpMetadata, templateUrl);
-    return new _CssProcessorStep(strategyStep);
+    return new _CssProcessorStep(strategyStep, this._transformers);
   }
 }
 
+export class CssTransformer {
+  transform(styleElement) {};
+}
+
 class _CssProcessorStep extends CompileStep {
   _strategyStep: CompileStep;
+  _transformers: List<CssTransformer>;
 
-  constructor(strategyStep: CompileStep) {
+  constructor(strategyStep: CompileStep, transformers: List<CssTransformer>) {
     super();
     this._strategyStep = strategyStep;
+    this._transformers = transformers;
   }
 
   process(parent:CompileElement, current:CompileElement, control:CompileControl) {
     if (DOM.tagName(current.element) == 'STYLE') {
       current.ignoreBindings = true;
 
+      if (isPresent(this._transformers)) {
+        var styleEl = current.element;
+        for (var i = 0; i < this._transformers.length; i++) {
+          this._transformers[i].transform(styleEl);
+        }
+      }
+
       if (isPresent(this._strategyStep)) {
         this._strategyStep.process(parent, current, control);
       }

modules/angular2/test/core/compiler/compiler_common_tests.js

@@ -302,7 +302,7 @@ class TestableCompiler extends Compiler {
           templateResolver,
           cmpUrlMapper,
           urlResolver,
-          new CssProcessor());
+          new CssProcessor(null));
 
     this.steps = steps;
   }

modules/angular2/test/core/compiler/css_processor_spec.js

@@ -1,5 +1,5 @@
 import {describe, it, expect, beforeEach, ddescribe, iit, xit, el} from 'angular2/test_lib';
-import {CssProcessor} from 'angular2/src/core/compiler/css_processor';
+import {CssProcessor, CssTransformer} from 'angular2/src/core/compiler/css_processor';
 
 import {ShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 
@@ -8,6 +8,8 @@ import {CompileElement} from 'angular2/src/core/compiler/pipeline/compile_elemen
 import {CompileStep} from 'angular2/src/core/compiler/pipeline/compile_step';
 import {CompileControl} from 'angular2/src/core/compiler/pipeline/compile_control';
 
+import {DOM} from 'angular2/src/dom/dom_adapter';
+
 import {Component} from 'angular2/src/core/annotations/annotations';
 
 import {DirectiveMetadata} from 'angular2/src/core/compiler/directive_metadata';
@@ -28,7 +30,7 @@ export function main() {
 
       it('it should set ignoreBindings to true for style elements', () => {
         var strategy = new FakeShadowDomStrategy(null);
-        var cssProcessor = new CssProcessor();
+        var cssProcessor = new CssProcessor(null);
 
         var pipeline = createPipeline(cssProcessor, strategy, 'http://base');
         var results = pipeline.process(el('<div><style></style></div>'));
@@ -44,13 +46,26 @@ export function main() {
         });
         var strategy = new FakeShadowDomStrategy(compileStep);
 
-        var cssProcessor = new CssProcessor();
+        var cssProcessor = new CssProcessor(null);
         var pipeline = createPipeline(cssProcessor, strategy, 'http://base');
         var results = pipeline.process(el('<div><style></style></div>'));
 
         expect(processedEls.length).toEqual(1);
         expect(processedEls[0]).toBe(results[1].element);
       });
+
+      it('should apply the given transformers', () => {
+        var strategy = new FakeShadowDomStrategy(null);
+        var cssProcessor = new CssProcessor([
+          new FakeCssTransformer('/*transformer1 */'),
+          new FakeCssTransformer('/*transformer2 */'),
+        ]);
+
+        var pipeline = createPipeline(cssProcessor, strategy, 'http://base');
+        var results = pipeline.process(el('<div><style></style></div>'));
+
+        expect(results[1].element).toHaveText('/*transformer1 *//*transformer2 */');
+      });
     });
   });
 }
@@ -79,4 +94,19 @@ class MockStep extends CompileStep {
   }
 }
 
+class FakeCssTransformer extends CssTransformer {
+  _css: string;
+
+  constructor(css: string) {
+    super();
+    this._css = css;
+  }
+
+  transform(styleEl) {
+    var cssText = DOM.getText(styleEl);
+    cssText += this._css;
+    DOM.setText(styleEl, cssText);
+  }
+}
+
 class SomeComponent {}

modules/angular2/test/core/compiler/integration_spec.js

@@ -42,7 +42,7 @@ export function main() {
         tplResolver,
         new ComponentUrlMapper(),
         urlResolver,
-        new CssProcessor()
+        new CssProcessor(null)
       );
     }
 

modules/angular2/test/core/compiler/shadow_dom/shadow_dom_emulation_integration_spec.js

@@ -60,7 +60,7 @@ export function main() {
             tplResolver,
             new ComponentUrlMapper(),
             urlResolver,
-            new CssProcessor()
+            new CssProcessor(null)
           );
         });
 

modules/angular2/test/directives/foreach_spec.js

@@ -38,7 +38,7 @@ export function main() {
         tplResolver,
         new ComponentUrlMapper(),
         urlResolver,
-        new CssProcessor()
+        new CssProcessor(null)
       );
     });
 

modules/angular2/test/directives/if_spec.js

@@ -38,7 +38,7 @@ export function main() {
         tplResolver,
         new ComponentUrlMapper(),
         urlResolver,
-        new CssProcessor()
+        new CssProcessor(null)
       );
     });
 

modules/angular2/test/directives/non_bindable_spec.js

@@ -36,7 +36,7 @@ export function main() {
         tplResolver,
         new ComponentUrlMapper(),
         urlResolver,
-        new CssProcessor()
+        new CssProcessor(null)
       );
     });
 

modules/angular2/test/directives/switch_spec.js

@@ -33,7 +33,7 @@ export function main() {
         tplResolver,
         new ComponentUrlMapper(),
         urlResolver,
-        new CssProcessor()
+        new CssProcessor(null)
       );
     });