diff --git a/lib/core/directive.dart b/lib/core/directive.dart index 3c931c17c..1a3a03dc3 100644 --- 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 cssUrls; + + List 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 index a65d37ec3..4c15de9c0 100644 --- a/lib/core_dom/block_factory.dart +++ b/lib/core_dom/block_factory.dart @@ -308,11 +308,12 @@ 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 cssFuture; - if (component.cssUrl != null) { - cssFuture = $http.getString(component.cssUrl, cache: $templateCache); + List> 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) { @@ -320,9 +321,10 @@ class _ComponentFactory { } else if (component.templateUrl != null) { blockFuture = $blockCache.fromUrl(component.templateUrl); } - TemplateLoader templateLoader = new TemplateLoader(cssFuture.then((String css) { - if (css != null) { - shadowDom.setInnerHtml('', treeSanitizer: treeSanitizer); + TemplateLoader templateLoader = new TemplateLoader( async.Future.wait(cssFutures).then((Iterable cssList) { + if (cssList != null) { + var filteredCssList = cssList.where((css) => css != null ); + shadowDom.setInnerHtml('', 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 index 0ca7127c1..4a71f6b8f 100644 --- 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: '
inline!
', @@ -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('
Simple!
'); + + var element = $('
ignore
'); + $compile(element)(injector, element); + + backend.flush(); + microLeap(); + + expect(renderedText(element)).toEqual('.hello{}.world{}Simple!'); + expect(element[0].nodes[0].shadowRoot.innerHtml).toEqual( + '
Simple!
' + ); + $rootScope.$digest(); + // Note: There is no ordering. It is who ever comes off the wire first! + expect(log.result()).toEqual('LOG; SIMPLE'); + }))); + }); });