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

Author: vicb

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

@@ -34,6 +34,5 @@ export class StyleUrlResolver {
 }
 
 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('[\'"]');

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

@@ -5,32 +5,67 @@ import {UrlResolver} from 'angular2/src/core/compiler/url_resolver';
 
 export function main() {
   describe('StyleUrlResolver', () => {
-    it('should resolve urls', () => {
+    it('should resolve "url()" urls', () => {
       var styleUrlResolver = new StyleUrlResolver(new FakeUrlResolver());
       var css = `
-      @import '1.css';
-      @import "2.css";
-      @import url(http://github.com/'3.css');
-      @import url(http://github.com/"4.css");
-      @import url(http://github.com/5.css);
-
       .foo {
         background-image: url(http://github.com/"double.jpg");
         background-image: url(http://github.com/'simple.jpg');
         background-image: url(http://github.com/noquote.jpg);
       }`;
       var expectedCss = `
+      .foo {
+        background-image: url(http://github.com/'base/double.jpg');
+        background-image: url(http://github.com/'base/simple.jpg');
+        background-image: url(http://github.com/'base/noquote.jpg');
+      }`;
+
+      var resolvedCss = styleUrlResolver.resolveUrls(css, 'base');
+      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(http://github.com/'3.css');
+      @import url(http://github.com/"4.css");
+      @import url(http://github.com/5.css);
+      `;
+      var expectedCss = `
       @import url(http://github.com/'base/3.css');
       @import url(http://github.com/'base/4.css');
       @import url(http://github.com/'base/5.css');
+      `;
 
-      .foo {
-        background-image: url(http://github.com/'base/double.jpg');
-        background-image: url(http://github.com/'base/simple.jpg');
-        background-image: url(http://github.com/'base/noquote.jpg');
-      }`;
+      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(http://github.com/print.css) print;
+      `;
+      var expectedCss = `
+      @import 'base/print.css' print;
+      @import url(http://github.com/'base/print.css') print;
+      `;
 
       var resolvedCss = styleUrlResolver.resolveUrls(css, 'base');
       expect(resolvedCss).toEqual(expectedCss);