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)
  );
  });