Support for parsing all CSS and producing one CSS file

lib/src/emitters.dart

 // Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 /** Collects several code emitters for the template tool. */
 library emitters;
 
 import 'package:csslib/parser.dart' as css;
 import 'package:csslib/visitor.dart';
 import 'package:html5lib/dom.dart';
@@ skipping 397 matching lines @@
       _context.printer.addLine('if (_root is autogenerated.ShadowRoot) '
           '_root.applyAuthorStyles = true;');
       // TODO(jmesserly): warn at runtime if apply-author-styles was not set,
       // and we don't have Shadow DOM support? In that case, styles won't have
       // proper encapsulation.
     }
 
     if (info.template != null && !elemInfo.childrenCreatedInCode) {
       // TODO(jmesserly): scoped styles probably don't work when
       // childrenCreatedInCode is true.
-      if (info.styleSheet != null) {
-        var tag = cssPolyfill ? info.tagName : null;
+      if (!info.styleSheets.isEmpty && !cssPolyfill) {
         // TODO(jmesserly): csslib+html5lib should work together.  We shouldn't
         //                  need to call a different function to serialize CSS.
         //                  Calling innerHTML on a StyleElement should be
         //                  enought - like a real browser.  CSSOM and DOM
         //                  should work together in the same tree.
-        // TODO(terry): Consider not emitting <style> tag inside of component.
-        //              Maybe we can generate a .css file that has all the CSS
-        //              polyfill.  The style tag can change the rendering a bit.
+        // TODO(terry): Only one style tag per component.
         var styleSheet =
-            '<style>\n'
-            '${emitStyleSheet(info.styleSheet, tag)}'
+            '<style scoped>\n'
+            '${emitStyleSheet(info.styleSheets[0])}'
             '\n</style>';
         var template = elemInfo.node;
         template.insertBefore(new Element.html(styleSheet),
             template.children[0]);
       }
 
       _context.statics.add('final', '__shadowTemplate',
           elemInfo.node.sourceSpan,
           "new autogenerated.DocumentFragment.html('''"
           "${escapeDartString(elemInfo.node.innerHtml, triple: true)}"
@@ skipping 74 matching lines @@
     var pos = classDecl.leftBracket.end;
     transaction.edit(pos, pos, classBody);
 
     // Emit all the code in a single printer, keeping track of source-maps.
     return transaction.commit();
   }
 }
 
 /** Generates the class corresponding to the main html page. */
 class MainPageEmitter extends RecursiveEmitter {
-  MainPageEmitter(FileInfo fileInfo) : super(fileInfo, new Context(indent: 1));
+  final bool _cssPolyfill;
+
+  MainPageEmitter(FileInfo fileInfo, [bool cssPolyfill = false]) :
+      this._cssPolyfill = cssPolyfill, super(fileInfo, new Context(indent: 1));
 
   CodePrinter run(Document document, PathInfo pathInfo,
       TextEditTransaction transaction, bool rewriteUrls) {
     visit(_fileInfo.bodyInfo);
 
     // fix up the URLs to content that is not modified by the compiler
     document.queryAll('script').forEach((tag) {
       var src = tag.attributes["src"];
       if (tag.attributes['type'] == 'application/dart') {
         tag.remove();
       } else if (src != null && rewriteUrls) {
         tag.attributes["src"] = pathInfo.transformUrl(_fileInfo.path, src);
       }
     });
     document.queryAll('link').forEach((tag) {
       var href = tag.attributes['href'];
-      if (tag.attributes['rel'] == 'components') {
+      var rel = tag.attributes['rel'];
+      if (rel == 'component' || rel == 'components') {
        tag.remove();
+      } else if (_cssPolyfill &&
+          rel == 'stylesheet' && !href.startsWith('http')) {
+        tag.remove();
       } else if (href != null && rewriteUrls) {
        tag.attributes['href'] = pathInfo.transformUrl(_fileInfo.path, href);
       }
     });
 
+    if (_cssPolyfill) {
+      var linkElem = new Element.html('<link rel="stylesheet" type="text/css"'
+          ' href="${_fileInfo.path.filename}.css">');
+      var head = document.head;
+      head.insertBefore(linkElem,
+          head.hasChildNodes() ? head.nodes.first : null);
+    }
 
     var codeInfo = _fileInfo.userCode;
     if (codeInfo == null) {
       assert(transaction == null);
       codeInfo = new DartCodeInfo(null, null, [], 'main(){\n}', null);
     }
 
     if (transaction == null) {
       transaction = new TextEditTransaction(codeInfo.code, codeInfo.sourceFile);
     }
@@ skipping 120 matching lines @@
     }
     typeName = htmlElementExtends[typeName];
   }
   // If we didn't find a DOM setter, and this is a component, set a property on
   // the component.
   if (info.component != null && !name.startsWith('data-')) {
     return 'xtag.${toCamelCase(name)}';
   }
   return "attributes['$name']";
 }