feat(StyleInliner): StyleInliner inlines @import css rules
This commit is contained in:
Victor Berchet
parent
e8bec99aa6
commit
e0cf1c7ab5
|
|
@ -0,0 +1,115 @@
|
|||
import {XHR} from 'angular2/src/core/compiler/xhr/xhr';
|
||||
|
||||
import {ListWrapper} from 'angular2/src/facade/collection';
|
||||
import {
|
||||
isBlank,
|
||||
RegExp,
|
||||
RegExpWrapper,
|
||||
StringWrapper,
|
||||
normalizeBlank,
|
||||
} from 'angular2/src/facade/lang';
|
||||
import {
|
||||
Promise,
|
||||
PromiseWrapper,
|
||||
} from 'angular2/src/facade/async';
|
||||
|
||||
export class StyleInliner {
|
||||
_xhr: XHR;
|
||||
|
||||
constructor(xhr: XHR) {
|
||||
this._xhr = xhr;
|
||||
}
|
||||
|
||||
// TODO(vicb): handle base url
|
||||
// TODO(vicb): Union types: returns either a Promise<string> or a string
|
||||
inlineImports(cssText: string) {
|
||||
return this._inlineImports(cssText, []);
|
||||
}
|
||||
|
||||
_inlineImports(cssText: string, inlinedUrls: List<string>) {
|
||||
var partIndex = 0;
|
||||
var parts = StringWrapper.split(cssText, _importRe);
|
||||
|
||||
if (parts.length === 1) {
|
||||
// no @import rule found, return the original css
|
||||
return cssText;
|
||||
}
|
||||
|
||||
var promises = [];
|
||||
|
||||
while (partIndex < parts.length - 1) {
|
||||
var prefix = parts[partIndex];
|
||||
var rule = parts[partIndex + 1];
|
||||
var url = _extractUrl(rule);
|
||||
var mediaQuery = _extractMediaQuery(rule);
|
||||
|
||||
var promise;
|
||||
if (isBlank(url) || ListWrapper.contains(inlinedUrls, url)) {
|
||||
// The current import rule has already been inlined, return the prefix only
|
||||
// Importing again might cause a circular dependency
|
||||
promise = PromiseWrapper.resolve(prefix);
|
||||
} else {
|
||||
ListWrapper.push(inlinedUrls, url);
|
||||
promise = PromiseWrapper.then(
|
||||
this._xhr.get(url),
|
||||
(css) => {
|
||||
// resolve nested @import rules
|
||||
css = this._inlineImports(css, inlinedUrls);
|
||||
if (PromiseWrapper.isPromise(css)) {
|
||||
// wait until nested @import are inlined
|
||||
return css.then((css) => prefix + _wrapInMediaRule(css, mediaQuery)+ '\n') ;
|
||||
} else {
|
||||
// there are no nested @import, return the css
|
||||
return prefix + _wrapInMediaRule(css, mediaQuery) + '\n';
|
||||
}
|
||||
},
|
||||
(error) => `/* failed to import ${url} */\n`
|
||||
);
|
||||
}
|
||||
ListWrapper.push(promises, promise);
|
||||
partIndex += 2;
|
||||
}
|
||||
|
||||
return PromiseWrapper.then(
|
||||
PromiseWrapper.all(promises),
|
||||
function (cssParts) {
|
||||
var cssText = cssParts.join('');
|
||||
if (partIndex < parts.length) {
|
||||
// append whatever css located after the last @import rule
|
||||
cssText += parts[partIndex];
|
||||
}
|
||||
return cssText;
|
||||
},
|
||||
function(e) {
|
||||
throw 'error';
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Extracts the url from an import rule, supported formats:
|
||||
// - 'url' / "url",
|
||||
// - url('url') / url("url")
|
||||
function _extractUrl(importRule: string): string {
|
||||
var match = RegExpWrapper.firstMatch(_urlRe, importRule);
|
||||
if (isBlank(match)) return null;
|
||||
return match[1];
|
||||
}
|
||||
|
||||
// Extracts the media query from an import rule.
|
||||
// Returns null when there is no media query.
|
||||
function _extractMediaQuery(importRule: string): string {
|
||||
var match = RegExpWrapper.firstMatch(_mediaQueryRe, importRule);
|
||||
if (isBlank(match)) return null;
|
||||
var mediaQuery = match[1].trim();
|
||||
return (mediaQuery.length > 0) ? mediaQuery: null;
|
||||
}
|
||||
|
||||
// Wraps the css in a media rule when the media query is not null
|
||||
function _wrapInMediaRule(css: string, query: string) {
|
||||
return (isBlank(query)) ? css : `@media ${query} {\n${css}\n}`;
|
||||
}
|
||||
|
||||
var _importRe = RegExpWrapper.create('@import\\s+([^;]+);');
|
||||
var _urlRe = RegExpWrapper.create('(?:url\\(\\s*)?[\'"]([^\'"]+)[\'"]');
|
||||
var _mediaQueryRe = RegExpWrapper.create('[\'"][^\'"]+[\'"]\\s*\\)?\\s*(.*)');
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
import {describe, it, expect, beforeEach, ddescribe, iit, xit, el} from 'angular2/test_lib';
|
||||
import {StyleInliner} from 'angular2/src/core/compiler/style_inliner';
|
||||
|
||||
import {isBlank} from 'angular2/src/facade/lang';
|
||||
import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
|
||||
import {Map, MapWrapper} from 'angular2/src/facade/collection';
|
||||
|
||||
import {XHR} from 'angular2/src/core/compiler/xhr/xhr';
|
||||
|
||||
export function main() {
|
||||
describe('StyleInliner', () => {
|
||||
describe('loading', () => {
|
||||
it('should return a string when there is no import statement', () => {
|
||||
var css = '.main {}';
|
||||
var loader = new StyleInliner(null);
|
||||
var loadedCss = loader.inlineImports(css);
|
||||
expect(loadedCss).not.toBePromise();
|
||||
expect(loadedCss).toEqual(css);
|
||||
});
|
||||
|
||||
it('should inline @import rules', (done) => {
|
||||
var xhr = new FakeXHR();
|
||||
xhr.reply('one.css', '.one {}');
|
||||
var css = '@import "one.css";.main {}';
|
||||
var loader = new StyleInliner(xhr);
|
||||
var loadedCss = loader.inlineImports(css);
|
||||
expect(loadedCss).toBePromise();
|
||||
PromiseWrapper.then(
|
||||
loadedCss,
|
||||
function(css) {
|
||||
expect(css).toEqual('.one {}\n.main {}');
|
||||
done();
|
||||
},
|
||||
function(e) {
|
||||
throw 'fail;'
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle @import error gracefuly', (done) => {
|
||||
var xhr = new FakeXHR();
|
||||
var css = '@import "one.css";.main {}';
|
||||
var loader = new StyleInliner(xhr);
|
||||
var loadedCss = loader.inlineImports(css);
|
||||
expect(loadedCss).toBePromise();
|
||||
PromiseWrapper.then(
|
||||
loadedCss,
|
||||
function(css) {
|
||||
expect(css).toEqual('/* failed to import one.css */\n.main {}');
|
||||
done();
|
||||
},
|
||||
function(e) {
|
||||
throw 'fail;'
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
it('should inline multiple @import rules', (done) => {
|
||||
var xhr = new FakeXHR();
|
||||
xhr.reply('one.css', '.one {}');
|
||||
xhr.reply('two.css', '.two {}');
|
||||
var css = '@import "one.css";@import "two.css";.main {}';
|
||||
var loader = new StyleInliner(xhr);
|
||||
var loadedCss = loader.inlineImports(css);
|
||||
expect(loadedCss).toBePromise();
|
||||
PromiseWrapper.then(
|
||||
loadedCss,
|
||||
function(css) {
|
||||
expect(css).toEqual('.one {}\n.two {}\n.main {}');
|
||||
done();
|
||||
},
|
||||
function(e) {
|
||||
throw 'fail;'
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
it('should inline nested @import rules', (done) => {
|
||||
var xhr = new FakeXHR();
|
||||
xhr.reply('one.css', '@import "two.css";.one {}');
|
||||
xhr.reply('two.css', '.two {}');
|
||||
var css = '@import "one.css";.main {}';
|
||||
var loader = new StyleInliner(xhr);
|
||||
var loadedCss = loader.inlineImports(css);
|
||||
expect(loadedCss).toBePromise();
|
||||
PromiseWrapper.then(
|
||||
loadedCss,
|
||||
function(css) {
|
||||
expect(css).toEqual('.two {}\n.one {}\n.main {}');
|
||||
done();
|
||||
},
|
||||
function(e) {
|
||||
throw 'fail;'
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle circular dependencies gracefuly', (done) => {
|
||||
var xhr = new FakeXHR();
|
||||
xhr.reply('one.css', '@import "two.css";.one {}');
|
||||
xhr.reply('two.css', '@import "one.css";.two {}');
|
||||
var css = '@import "one.css";.main {}';
|
||||
var loader = new StyleInliner(xhr);
|
||||
var loadedCss = loader.inlineImports(css);
|
||||
expect(loadedCss).toBePromise();
|
||||
PromiseWrapper.then(
|
||||
loadedCss,
|
||||
function(css) {
|
||||
expect(css).toEqual('.two {}\n.one {}\n.main {}');
|
||||
done();
|
||||
},
|
||||
function(e) {
|
||||
throw 'fail;'
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('media query', () => {
|
||||
it('should wrap inlined content in media query', (done) => {
|
||||
var xhr = new FakeXHR();
|
||||
xhr.reply('one.css', '.one {}');
|
||||
var css = '@import "one.css" (min-width: 700px) and (orientation: landscape);';
|
||||
var loader = new StyleInliner(xhr);
|
||||
var loadedCss = loader.inlineImports(css);
|
||||
expect(loadedCss).toBePromise();
|
||||
PromiseWrapper.then(
|
||||
loadedCss,
|
||||
function(css) {
|
||||
expect(css).toEqual('@media (min-width: 700px) and (orientation: landscape) {\n.one {}\n}\n');
|
||||
done();
|
||||
},
|
||||
function(e) {
|
||||
throw 'fail;'
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
class FakeXHR extends XHR {
|
||||
_responses: Map;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._responses = MapWrapper.create();
|
||||
}
|
||||
|
||||
get(url: string): Promise<string> {
|
||||
var response = MapWrapper.get(this._responses, url);
|
||||
if (isBlank(response)) {
|
||||
return PromiseWrapper.reject('xhr error');
|
||||
}
|
||||
|
||||
return PromiseWrapper.resolve(response);
|
||||
}
|
||||
|
||||
reply(url: string, response: string) {
|
||||
MapWrapper.set(this._responses, url, response);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue