feat(ng-base-css): useNgBaseCss Component annotation field.

Introduces a useNgBaseCss field in the ```@Component``` annotation.

It defaults to true, but when set to false, the component will not
load any base CSS files.  For components that do not rely on base
CSS, loading a global CSS file can be a significant performance issue.

Best practices say that large global CSS files are an anti-pattern for
shadow DOM based apps.  ng-base-css allows apps to use this anti-pattern
to support legacy app design.

The useNgBaseCss field allows app developers to transition to
per-component styles and reap the performance benefits immediately.

Author: jbdeboer

lib/core/annotation_src.dart

@@ -316,6 +316,11 @@ class Component extends Directive {
    */
   final bool useShadowDom;
 
+  /**
+   * Defaults to true, but if set to false any NgBaseCss stylesheets will be ignored.
+   */
+  final bool useNgBaseCss;
+
   const Component({
     this.template,
     this.templateUrl,
@@ -329,7 +334,8 @@ class Component extends Directive {
     visibility,
     exportExpressions,
     exportExpressionAttrs,
-    this.useShadowDom})
+    this.useShadowDom,
+    this.useNgBaseCss: true})
       : _cssUrls = cssUrl,
         _applyAuthorStyles = applyAuthorStyles,
         _resetStyleInheritance = resetStyleInheritance,
@@ -359,7 +365,8 @@ class Component extends Directive {
           visibility: visibility,
           exportExpressions: exportExpressions,
           exportExpressionAttrs: exportExpressionAttrs,
-          useShadowDom: useShadowDom);
+          useShadowDom: useShadowDom,
+          useNgBaseCss: useNgBaseCss);
 }
 
 /**

lib/core_dom/shadow_dom_component_factory.dart

@@ -43,7 +43,7 @@ class ShadowDomComponentFactory implements ComponentFactory {
         Http http = injector.getByKey(_HTTP_KEY);
         TemplateCache templateCache = injector.getByKey(_TEMPLATE_CACHE_KEY);
         DirectiveMap directives = injector.getByKey(_DIRECTIVE_MAP_KEY);
-        NgBaseCss baseCss = injector.getByKey(_NG_BASE_CSS_KEY);
+        NgBaseCss baseCss = component.useNgBaseCss ? injector.getByKey(_NG_BASE_CSS_KEY) : null;
         // This is a bit of a hack since we are returning different type then we are.
         var componentFactory = new _ComponentFactory(node,
             ref.typeKey,
@@ -105,7 +105,9 @@ class _ComponentFactory implements Function {
     // so change back to using @import once Chrome bug is fixed or a
     // better work around is found.
     Iterable<async.Future<dom.StyleElement>> cssFutures;
-    var cssUrls = []..addAll(_baseCss.urls)..addAll(component.cssUrls);
+    var cssUrls = _baseCss != null ?
+      ([]..addAll(_baseCss.urls)..addAll(component.cssUrls)) :
+      component.cssUrls;
     var tag = element.tagName.toLowerCase();
     if (cssUrls.isNotEmpty) {
       cssFutures = cssUrls.map((cssUrl) => _styleElementCache.putIfAbsent(

test/directive/ng_base_css_spec.dart

@@ -8,10 +8,19 @@ import '../_specs.dart';
     cssUrl: 'simple.css')
 class _HtmlAndCssComponent {}
 
+@Component(
+    selector: 'no-base-css',
+    templateUrl: 'simple.html',
+    cssUrl: 'simple.css',
+    useNgBaseCss: false)
+class _NoBaseCssComponent {}
+
+
 main() => describe('NgBaseCss', () {
   beforeEachModule((Module module) {
     module
-      ..bind(_HtmlAndCssComponent);
+      ..bind(_HtmlAndCssComponent)
+      ..bind(_NoBaseCssComponent);
   });
 
   it('should load css urls from ng-base-css', async((TestBed _, MockHttpBackend backend) {
@@ -50,6 +59,23 @@ main() => describe('NgBaseCss', () {
     );
   }));
 
+  it('should respect useNgBaseCss', async((TestBed _, MockHttpBackend backend) {
+    backend
+      ..expectGET('simple.css').respond(200, '.simple{}')
+      ..expectGET('simple.html').respond(200, '<div>Simple!</div>');
+
+    var element = e('<div ng-base-css="base.css"><no-base-css>ignore</no-base-css></div>');
+    _.compile(element);
+
+    microLeap();
+    backend.flush();
+    microLeap();
+
+    expect(element.children[0].shadowRoot).toHaveHtml(
+        '<style>.simple{}</style><div>Simple!</div>'
+    );
+  }));
+
   describe('from injector', () {
     beforeEachModule((Module module) {
       module.bind(NgBaseCss, toValue: new NgBaseCss()..urls = ['injected.css']);
@@ -72,5 +98,22 @@ main() => describe('NgBaseCss', () {
           '<style>.injected{}</style><style>.simple{}</style><div>Simple!</div>'
       );
     }));
+
+    it('should respect useNgBaseCss', async((TestBed _, MockHttpBackend backend) {
+      backend
+        ..expectGET('simple.css').respond(200, '.simple{}')
+        ..expectGET('simple.html').respond(200, '<div>Simple!</div>');
+
+      var element = e('<div><no-base-css>ignore</no-base-css></div>');
+      _.compile(element);
+
+      microLeap();
+      backend.flush();
+      microLeap();
+
+      expect(element.children[0].shadowRoot).toHaveHtml(
+          '<style>.simple{}</style><div>Simple!</div>'
+      );
+    }));
   });
 });