2016-06-08 19:38:52 -04:00
|
|
|
import {Injectable, ViewEncapsulation} from '@angular/core';
|
|
|
|
|
|
|
|
import {isPresent} from '../src/facade/lang';
|
|
|
|
|
|
|
|
import {CompileDirectiveMetadata, CompileIdentifierMetadata} from './compile_metadata';
|
2016-01-06 17:13:44 -05:00
|
|
|
import * as o from './output/output_ast';
|
2016-04-28 20:50:03 -04:00
|
|
|
import {ShadowCss} from './shadow_css';
|
2015-10-14 12:39:40 -04:00
|
|
|
import {extractStyleUrls} from './style_url_resolver';
|
2016-06-08 19:38:52 -04:00
|
|
|
import {UrlResolver} from './url_resolver';
|
2015-12-02 13:35:51 -05:00
|
|
|
|
|
|
|
const COMPONENT_VARIABLE = '%COMP%';
|
2016-04-26 00:47:33 -04:00
|
|
|
const HOST_ATTR = /*@ts2dart_const*/ `_nghost-${COMPONENT_VARIABLE}`;
|
|
|
|
const CONTENT_ATTR = /*@ts2dart_const*/ `_ngcontent-${COMPONENT_VARIABLE}`;
|
2015-09-02 18:07:31 -04:00
|
|
|
|
2016-01-06 17:13:44 -05:00
|
|
|
export class StylesCompileDependency {
|
2016-06-08 19:38:52 -04:00
|
|
|
constructor(
|
|
|
|
public moduleUrl: string, public isShimmed: boolean,
|
|
|
|
public valuePlaceholder: CompileIdentifierMetadata) {}
|
2016-01-06 17:13:44 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
export class StylesCompileResult {
|
2016-06-08 19:38:52 -04:00
|
|
|
constructor(
|
|
|
|
public statements: o.Statement[], public stylesVar: string,
|
|
|
|
public dependencies: StylesCompileDependency[]) {}
|
2016-01-06 17:13:44 -05:00
|
|
|
}
|
|
|
|
|
2015-09-14 18:59:09 -04:00
|
|
|
@Injectable()
|
2015-09-02 18:07:31 -04:00
|
|
|
export class StyleCompiler {
|
|
|
|
private _shadowCss: ShadowCss = new ShadowCss();
|
|
|
|
|
2016-01-06 17:13:44 -05:00
|
|
|
constructor(private _urlResolver: UrlResolver) {}
|
2015-09-02 18:07:31 -04:00
|
|
|
|
2016-01-06 17:13:44 -05:00
|
|
|
compileComponent(comp: CompileDirectiveMetadata): StylesCompileResult {
|
|
|
|
var shim = comp.template.encapsulation === ViewEncapsulation.Emulated;
|
2016-06-08 19:38:52 -04:00
|
|
|
return this._compileStyles(
|
|
|
|
getStylesVarName(comp), comp.template.styles, comp.template.styleUrls, shim);
|
2015-09-02 18:07:31 -04:00
|
|
|
}
|
|
|
|
|
2016-06-08 19:38:52 -04:00
|
|
|
compileStylesheet(stylesheetUrl: string, cssText: string, isShimmed: boolean):
|
|
|
|
StylesCompileResult {
|
2015-10-14 12:39:40 -04:00
|
|
|
var styleWithImports = extractStyleUrls(this._urlResolver, stylesheetUrl, cssText);
|
2016-06-08 19:38:52 -04:00
|
|
|
return this._compileStyles(
|
|
|
|
getStylesVarName(null), [styleWithImports.style], styleWithImports.styleUrls, isShimmed);
|
2015-09-02 18:07:31 -04:00
|
|
|
}
|
|
|
|
|
2016-06-08 19:38:52 -04:00
|
|
|
private _compileStyles(
|
|
|
|
stylesVar: string, plainStyles: string[], absUrls: string[],
|
|
|
|
shim: boolean): StylesCompileResult {
|
2016-01-06 17:13:44 -05:00
|
|
|
var styleExpressions =
|
|
|
|
plainStyles.map(plainStyle => o.literal(this._shimIfNeeded(plainStyle, shim)));
|
2016-06-08 18:45:15 -04:00
|
|
|
var dependencies: any[] /** TODO #9100 */ = [];
|
2015-09-02 18:07:31 -04:00
|
|
|
for (var i = 0; i < absUrls.length; i++) {
|
2016-01-06 17:13:44 -05:00
|
|
|
var identifier = new CompileIdentifierMetadata({name: getStylesVarName(null)});
|
|
|
|
dependencies.push(new StylesCompileDependency(absUrls[i], shim, identifier));
|
|
|
|
styleExpressions.push(new o.ExternalExpr(identifier));
|
2015-09-02 18:07:31 -04:00
|
|
|
}
|
2016-01-06 17:13:44 -05:00
|
|
|
// styles variable contains plain strings and arrays of other styles arrays (recursive),
|
|
|
|
// so we set its type to dynamic.
|
|
|
|
var stmt = o.variable(stylesVar)
|
2016-06-08 19:38:52 -04:00
|
|
|
.set(o.literalArr(
|
|
|
|
styleExpressions, new o.ArrayType(o.DYNAMIC_TYPE, [o.TypeModifier.Const])))
|
2016-01-06 17:13:44 -05:00
|
|
|
.toDeclStmt(null, [o.StmtModifier.Final]);
|
|
|
|
return new StylesCompileResult([stmt], stylesVar, dependencies);
|
2015-09-02 18:07:31 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
private _shimIfNeeded(style: string, shim: boolean): string {
|
|
|
|
return shim ? this._shadowCss.shimCssText(style, CONTENT_ATTR, HOST_ATTR) : style;
|
|
|
|
}
|
2016-01-06 17:13:44 -05:00
|
|
|
}
|
2015-09-02 18:07:31 -04:00
|
|
|
|
2016-01-06 17:13:44 -05:00
|
|
|
function getStylesVarName(component: CompileDirectiveMetadata): string {
|
|
|
|
var result = `styles`;
|
|
|
|
if (isPresent(component)) {
|
|
|
|
result += `_${component.type.name}`;
|
2015-09-02 18:07:31 -04:00
|
|
|
}
|
2016-01-06 17:13:44 -05:00
|
|
|
return result;
|
2016-04-28 20:50:03 -04:00
|
|
|
}
|