fix(StyleUrlResolver): add support for media query in import rules

This commit is contained in:
Victor Berchet 2015-02-26 10:37:25 +01:00
parent 4d8d17ce3d
commit 9f181f39e9
2 changed files with 49 additions and 15 deletions

View File

@ -34,6 +34,5 @@ export class StyleUrlResolver {
} }
var _cssUrlRe = RegExpWrapper.create('(url\\()([^)]*)(\\))'); var _cssUrlRe = RegExpWrapper.create('(url\\()([^)]*)(\\))');
// TODO(vicb): handle the media query part var _cssImportRe = RegExpWrapper.create('(@import[\\s]+(?!url\\())[\'"]([^\'"]*)[\'"](.*;)');
var _cssImportRe = RegExpWrapper.create('(@import[\\s]+(?!url\\())([^;]*)(;)');
var _quoteRe = RegExpWrapper.create('[\'"]'); var _quoteRe = RegExpWrapper.create('[\'"]');

View File

@ -5,27 +5,15 @@ import {UrlResolver} from 'angular2/src/core/compiler/url_resolver';
export function main() { export function main() {
describe('StyleUrlResolver', () => { describe('StyleUrlResolver', () => {
it('should resolve urls', () => { it('should resolve "url()" urls', () => {
var styleUrlResolver = new StyleUrlResolver(new FakeUrlResolver()); var styleUrlResolver = new StyleUrlResolver(new FakeUrlResolver());
var css = ` var css = `
@import '1.css';
@import "2.css";
@import url('3.css');
@import url("4.css");
@import url(5.css);
.foo { .foo {
background-image: url("double.jpg"); background-image: url("double.jpg");
background-image: url('simple.jpg'); background-image: url('simple.jpg');
background-image: url(noquote.jpg); background-image: url(noquote.jpg);
}`; }`;
var expectedCss = ` var expectedCss = `
@import 'base/1.css';
@import 'base/2.css';
@import url('base/3.css');
@import url('base/4.css');
@import url('base/5.css');
.foo { .foo {
background-image: url('base/double.jpg'); background-image: url('base/double.jpg');
background-image: url('base/simple.jpg'); background-image: url('base/simple.jpg');
@ -35,6 +23,53 @@ export function main() {
var resolvedCss = styleUrlResolver.resolveUrls(css, 'base'); var resolvedCss = styleUrlResolver.resolveUrls(css, 'base');
expect(resolvedCss).toEqual(expectedCss); expect(resolvedCss).toEqual(expectedCss);
}); });
it('should resolve "@import" urls', () => {
var styleUrlResolver = new StyleUrlResolver(new FakeUrlResolver());
var css = `
@import '1.css';
@import "2.css";
`;
var expectedCss = `
@import 'base/1.css';
@import 'base/2.css';
`;
var resolvedCss = styleUrlResolver.resolveUrls(css, 'base');
expect(resolvedCss).toEqual(expectedCss);
});
it('should resolve "@import url()" urls', () => {
var styleUrlResolver = new StyleUrlResolver(new FakeUrlResolver());
var css = `
@import url('3.css');
@import url("4.css");
@import url(5.css);
`;
var expectedCss = `
@import url('base/3.css');
@import url('base/4.css');
@import url('base/5.css');
`;
var resolvedCss = styleUrlResolver.resolveUrls(css, 'base');
expect(resolvedCss).toEqual(expectedCss);
});
it('should support media query in "@import"', () => {
var styleUrlResolver = new StyleUrlResolver(new FakeUrlResolver());
var css = `
@import 'print.css' print;
@import url(print.css) print;
`;
var expectedCss = `
@import 'base/print.css' print;
@import url('base/print.css') print;
`;
var resolvedCss = styleUrlResolver.resolveUrls(css, 'base');
expect(resolvedCss).toEqual(expectedCss);
});
}); });
} }