feat(NgComponent): Support multiple css files

dart-archive · Dec 13, 2013 · 6c6151c · 6c6151c
1 parent 6efde83
commit 6c6151c
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 8 deletions.
diff --git a/lib/core/directive.dart b/lib/core/directive.dart
@@ -197,6 +197,18 @@ class NgComponent extends NgAnnotation {
   final String cssUrl;
 
   /**
+   * A list of CSS URLs to load into the shadow DOM.
+   */
+  final List<String> cssUrls;
+
+  List<String> get allCssUrls {
+    if (cssUrls == null && cssUrl == null) return null;
+    if (cssUrls == null && cssUrl != null) return [cssUrl];
+    if (cssUrls != null && cssUrl == null) return cssUrls;
+    if (cssUrls != null && cssUrl != null) return [cssUrl]..addAll(cssUrls);
+  }
+
+/**
    * Set the shadow root applyAuthorStyles property. See shadow-DOM
    * documentation for further details.
    */
@@ -212,6 +224,7 @@ class NgComponent extends NgAnnotation {
     this.template,
     this.templateUrl,
     this.cssUrl,
+    this.cssUrls,
     this.applyAuthorStyles,
     this.resetStyleInheritance,
     publishAs,
@@ -234,7 +247,7 @@ class NgComponent extends NgAnnotation {
       new NgComponent(
           template: this.template,
           templateUrl: this.templateUrl,
-          cssUrl: this.cssUrl,
+          cssUrls: this.cssUrls,
           applyAuthorStyles: this.applyAuthorStyles,
           resetStyleInheritance: this.resetStyleInheritance,
           publishAs: this.publishAs,

diff --git a/lib/core_dom/block_factory.dart b/lib/core_dom/block_factory.dart
@@ -308,21 +308,23 @@ class _ComponentFactory {
     // styles all over the page. We shouldn't be doing browsers work,
     // so change back to using @import once Chrome bug is fixed or a
     // better work around is found.
-    async.Future<String> cssFuture;
-    if (component.cssUrl != null) {
-      cssFuture = $http.getString(component.cssUrl, cache: $templateCache);
+    List<async.Future<String>> cssFutures = new List();
+    var cssUrls = component.allCssUrls;
+    if (cssUrls != null) {
+      cssUrls.forEach((css) => cssFutures.add( $http.getString(css, cache: $templateCache) ) );
     } else {
-      cssFuture = new async.Future.value(null);
+      cssFutures.add( new async.Future.value(null) );
     }
     var blockFuture;
     if (component.template != null) {
       blockFuture = new async.Future.value($blockCache.fromHtml(component.template));
     } else if (component.templateUrl != null) {
       blockFuture = $blockCache.fromUrl(component.templateUrl);
     }
-    TemplateLoader templateLoader = new TemplateLoader(cssFuture.then((String css) {
-      if (css != null) {
-        shadowDom.setInnerHtml('<style>$css</style>', treeSanitizer: treeSanitizer);
+    TemplateLoader templateLoader = new TemplateLoader( async.Future.wait(cssFutures).then((Iterable<String> cssList) {
+      if (cssList != null) {
+        var filteredCssList = cssList.where((css) => css != null );
+        shadowDom.setInnerHtml('<style>${filteredCssList.join('')}</style>', treeSanitizer: treeSanitizer);
       }
       if (blockFuture != null) {
         return blockFuture.then((BlockFactory blockFactory) => attachBlockToShadowDom(blockFactory));

diff --git a/test/core/templateurl_spec.dart b/test/core/templateurl_spec.dart
@@ -15,6 +15,13 @@ class SimpleUrlComponent {
 class HtmlAndCssComponent {
 }
 
+@NgComponent(
+    selector: 'html-and-css',
+    templateUrl: 'simple.html',
+    cssUrls: const ['simple.css', 'another.css'])
+class HtmlAndMultipleCssComponent {
+}
+
 @NgComponent(
     selector: 'inline-with-css',
     template: '<div>inline!</div>',
@@ -170,4 +177,33 @@ main() => describe('template url', () {
       expect(renderedText(element)).toEqual('.hello{}Simple!');
     })));
   });
+
+  describe('multiple css loading', () {
+    beforeEach(module((Module module) {
+      module.type(LogAttrDirective);
+      module.type(HtmlAndMultipleCssComponent);
+    }));
+
+    it('should load multiple CSS files into a style', async(inject((Http $http,
+        Compiler $compile, Scope $rootScope, Logger log, Injector injector,
+        MockHttpBackend backend) {
+      backend.expectGET('simple.css').respond('.hello{}');
+      backend.expectGET('another.css').respond('.world{}');
+      backend.expectGET('simple.html').respond('<div log="SIMPLE">Simple!</div>');
+
+      var element = $('<div><html-and-css log>ignore</html-and-css><div>');
+      $compile(element)(injector, element);
+
+      backend.flush();
+      microLeap();
+
+      expect(renderedText(element)).toEqual('.hello{}.world{}Simple!');
+      expect(element[0].nodes[0].shadowRoot.innerHtml).toEqual(
+        '<style>.hello{}.world{}</style><div log="SIMPLE">Simple!</div>'
+      );
+      $rootScope.$digest();
+      // Note: There is no ordering.  It is who ever comes off the wire first!
+      expect(log.result()).toEqual('LOG; SIMPLE');
+    })));
+  });
 });