Support for parsing all CSS and producing one CSS file

lib/src/compiler.dart

Index: lib/src/compiler.dart
diff --git a/lib/src/compiler.dart b/lib/src/compiler.dart
index d1e257775e0d62f9010f358c129ce514a0e54658..fc91ae0cb6177af74bc73d7491e4dab11049b858 100644
--- a/lib/src/compiler.dart
+++ b/lib/src/compiler.dart
@@ -163,6 +163,14 @@ class Compiler {
       }
     }
 
+    // Load stylesheet files referenced by [file].
+    for (var href in fileInfo.styleSheetHref) {
+      if (!_processed.contains(href)) {
+        _processed.add(href);
+        _tasks.add(_parseStyleSheetFile(href).then(_processStyleSheetFile));
+      }
+    }
+
     // Load .dart files being referenced in the page.
     var src = fileInfo.externalFile;
     if (src != null && !_processed.contains(src)) {
@@ -196,7 +204,8 @@ class Compiler {
   /** Parse [filename] and treat it as a .dart file. */
   Future<SourceFile> _parseDartFile(Path path) {
     return fileSystem.readText(path)
-        .then((code) => new SourceFile(path, isDart: true)..code = code)
+        .then((code) => new SourceFile(path, fileType: SourceFile.DART)
+            ..code = code)
         .catchError((e) => _readError(e, path));
   }
 
@@ -237,6 +246,31 @@ class Compiler {
     }
   }
 
+  /** Parse [filename] and treat it as a .dart file. */
+  Future<SourceFile> _parseStyleSheetFile(Path path) {
+    return fileSystem.readText(path)
+        .then((linkedCssContent) =>
+            new SourceFile(path, fileType: SourceFile.STYLESHEET)
+            ..linkedCssContent = linkedCssContent.trim())
+        .catchError((e) => _readError(e, path));
+  }
+
+  void _processStyleSheetFile(SourceFile cssFile) {
+    if (!_shouldProcessFile(cssFile)) return;
+
+    files.add(cssFile);
+
+    var fileInfo = new FileInfo(cssFile.path);
+    info[cssFile.path] = fileInfo;
+
+    var uriVisitor = new UriVisitor(_pathInfo, _mainPath, fileInfo.path);
+    var styleSheet = _parseCSS(cssFile.path.toString(),
+        cssFile.linkedCssContent, uriVisitor, options);
+    if (styleSheet != null) {
+      fileInfo.styleSheets.add(styleSheet);
+    }
+  }
+
   Path _getDirectivePath(LibraryInfo libInfo, Directive directive) {
     var uriDirective = (directive as UriBasedDirective).uri;
     var uri = uriDirective.value;
@@ -411,10 +445,21 @@ class Compiler {
   /** Run the analyzer on every input html file. */
   void _analyze() {
     var uniqueIds = new IntIterator();
+    var uriVisitor;
     for (var file in files) {
-      if (file.isDart) continue;
-      _time('Analyzed contents', file.path, () =>
-          analyzeFile(file, info, uniqueIds, _messages));
+      var fileInfo = info[file.path];
+      if (file.isHtml) {
+        if (fileInfo.isEntryPoint) {
+          assert(uriVisitor == null);
+          uriVisitor = new UriVisitor(_pathInfo, _mainPath, fileInfo.path);
+        }
+        _time('Analyzed contents', file.path, () =>
+            analyzeFile(file, info, uniqueIds, _messages));
+      } else if (file.isStyleSheet) {
+        // Parse each linked style sheet.
+        assert(uriVisitor != null);
+        _processStylesheet(uriVisitor, fileInfo, options: options);

[Siggi Cherem (dart-lang), 2013/03/07 22:14:20]

seems like something is broken here? the parameters don't match for
_processStylesheet and this call.

Also, you seem to be running the uri visitor on the _parseCSS too. Do we need to
run it in all these places, or can we remove the uriVisitor argument here?

[terry, 2013/03/08 20:11:24]

The name in processStylesheet was pathInfo (it's should be uriVisitor) but the
type is right.

This is no longer necessary once I separated out the linked stylesheets as
separate files that are processed. See _processStyleSheetFile.

On 2013/03/07 22:14:20, Siggi Cherem (dart-lang) wrote:

+      }
     }
   }
 
@@ -425,7 +470,8 @@ class Compiler {
       _time('Codegen', file.path, () {
         var fileInfo = info[file.path];
         cleanHtmlNodes(fileInfo);
-        _processStylesheet(fileInfo, options: options);
+        var uriVisitor = new UriVisitor(_pathInfo, _mainPath, fileInfo.path);
+        _processStylesheet(uriVisitor, fileInfo, options: options);

[Siggi Cherem (dart-lang), 2013/03/07 22:14:20]

remove the uri visitor here?

[terry, 2013/03/08 20:11:24]

This is the UriVisitor for each component to handle <style scoped> tags.
On 2013/03/07 22:14:20, Siggi Cherem (dart-lang) wrote:

         fixupHtmlCss(fileInfo, options);
         _emitComponents(fileInfo);
         if (fileInfo.isEntryPoint) {
@@ -434,6 +480,8 @@ class Compiler {
         }
       });
     }
+
+    _emitAllCss();
   }
 
   /** Emit the main .dart file. */
@@ -491,6 +539,56 @@ class Compiler {
         document.outerHtml, source: file.path));
   }
 
+  /** Generate an CSS file for all style sheets (main and components). */
+  void _emitAllCss() {
+    StringBuffer allCssBuff = new StringBuffer();
+
+    var mainFile;
+
+    // Emit all linked style sheet files first.
+    for (var file in files) {
+      var fileInfo = info[file.path];
+      if (fileInfo.isEntryPoint) mainFile = file;
+      if (file.isStyleSheet) {
+        for (var styleSheet in fileInfo.styleSheets) {
+          allCssBuff.write(
+              '/* ==================================================== */\n'
+              '/* Linked style sheet href = ${file.path.filename} */\n'
+              '/* ==================================================== */\n');
+          allCssBuff.write(emitStyleSheet(styleSheet));
+          allCssBuff.write('\n\n');
+        }
+      }
+    }
+
+    // Emit all CSS in each component (style scoped).
+    for (var file in files) {
+      var fileInfo = info[file.path];
+      if (!file.isStyleSheet) {
+        for (var component in fileInfo.declaredComponents) {
+          for (var styleSheet in component.styleSheets) {
+            allCssBuff.write(
+                '/* ==================================================== */\n'
+                '/* Component ${component.tagName} stylesheet */\n'
+                '/* ==================================================== */\n');
+            allCssBuff.write(emitStyleSheet(styleSheet, component.tagName));
+            allCssBuff.write('\n\n');
+          }
+        }
+      }
+    }
+
+    assert(mainFile != null);
+
+    var allCss = allCssBuff.toString();
+    if (!allCss.isEmpty) {
+      var allCssFile = '${mainFile.path.filename}.css';
+      var allCssPath = mainFile.path.directoryPath.append(allCssFile);
+      var allCssOutPath = _pathInfo.outputPath(allCssPath, '');
+      output.add(new OutputFile(allCssOutPath, allCss));
+    }
+  }
+
   /** Emits the Dart code for all components in [fileInfo]. */
   void _emitComponents(FileInfo fileInfo) {
     for (var component in fileInfo.declaredComponents) {
@@ -560,33 +658,57 @@ class Compiler {
 }
 
 /** Parse all stylesheet for polyfilling assciated with [info]. */
-void _processStylesheet(info, {CompilerOptions options : null}) {
-  new _ProcessCss(options).visit(info);
+void _processStylesheet(pathInfo, info, {CompilerOptions options : null}) {
+  new _ProcessCss(pathInfo, options).visit(info);
+}
+
+StyleSheet _parseCSS(String src, String content, UriVisitor uriVisitor,

[Siggi Cherem (dart-lang), 2013/03/07 22:14:20]

style nit: change to _parseCss (3 letter acronym can't be all CAPS)

[terry, 2013/03/08 20:11:24]

Done.

+                     CompilerOptions options) {
+  if (!content.trim().isEmpty) {
+    // TODO(terry): Add --checked when fully implemented and error handling.
+    var styleSheet = css.parse(content, options:
+      [options.warningsAsErrors ? '--warnings_as_errors' : '', 'memory']);
+    uriVisitor.visitTree(styleSheet);
+    if (options.debugCss) {
+      print('\nCSS source: $src');
+      print('==========\n');
+      print(treeToDebugString(styleSheet));
+    }
+    return styleSheet;
+  }
 }
 
 /** Post-analysis of style sheet; parsed ready for emitting with polyfill. */
 class _ProcessCss extends InfoVisitor {
+  final UriVisitor uriVisitor;
   final CompilerOptions options;
+  ComponentInfo component;
 
-  _ProcessCss(this.options);
-
-  // TODO(terry): Add --checked when fully implemented and error handling too.
-  StyleSheet _parseCss(String cssInput, CompilerOptions option) =>
-      css.parse(cssInput, options:
-        [option.warningsAsErrors ? '--warnings_as_errors' : '', 'memory']);
+  _ProcessCss(this.uriVisitor, this.options);
 
   void visitComponentInfo(ComponentInfo info) {
-    if (!info.cssSource.isEmpty) {
-      info.styleSheet = _parseCss(info.cssSource.toString(), options);
-      info.cssSource = null;    // Once CSS parsed original not needed.
-
-      if (options.debugCss) {
-        print('\nComponent: ${info.tagName}');
-        print('==========\n');
-        print(treeToDebugString(info.styleSheet));
+    var oldComponent = component;
+    component = info;
+
+    super.visitComponentInfo(info);
+
+    component = oldComponent;
+  }
+
+  void visitElementInfo(ElementInfo info) {
+    if (component != null) {
+      var node = info.node;
+      if (node.tagName == 'style' && node.attributes.containsKey("scoped")) {
+        // Get contents of style tag.
+        var content = node.nodes.single.value.toString();
+        var styleSheet = _parseCSS(component.tagName, content, uriVisitor,
+            options);
+        if (styleSheet != null) {
+          component.styleSheets.add(styleSheet);
+        }
       }
     }
 
-    super.visitComponentInfo(info);
+    super.visitElementInfo(info);
   }
 }