Support for parsing all CSS and producing one CSS file

lib/src/compiler.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.
 
 library compiler;
 
 import 'dart:async';
 import 'dart:collection' show SplayTreeMap;
 import 'dart:json' as json;
 import 'package:analyzer_experimental/src/generated/ast.dart' show Directive, UriBasedDirective;
@@ skipping 145 matching lines @@
     _processImports(fileInfo);
 
     // Load component files referenced by [file].
     for (var href in fileInfo.componentLinks) {
       if (!_processed.contains(href)) {
         _processed.add(href);
         _tasks.add(_parseHtmlFile(href).then(_processHtmlFile));
       }
     }
 
+    // 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)) {
       _processed.add(src);
       _tasks.add(_parseDartFile(src).then(_processDartFile));
     }
 
     // Load .dart files being referenced in components.
     for (var component in fileInfo.declaredComponents) {
       var src = component.externalFile;
@@ skipping 13 matching lines @@
           file.document = _time('Parsed', path,
               () => parseHtml(source, path, _messages));
           return file;
         })
         .catchError((e) => _readError(e, path));
   }
 
   /** 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, type: SourceFile.DART)
+            ..code = code)
         .catchError((e) => _readError(e, path));
   }
 
   SourceFile _readError(error, Path path) {
     _messages.error('exception while reading file, original message:\n $error',
         null, file: path);
 
     return null;
   }
 
@@ skipping 20 matching lines @@
         if (uri.startsWith('package:web_ui/observe')) {
           _useObservers = true;
         }
       } else if (!_processed.contains(src)) {
         _processed.add(src);
         _tasks.add(_parseDartFile(src).then(_processDartFile));
       }
     }
   }
 
+  /** Parse [filename] and treat it as a .dart file. */
+  Future<SourceFile> _parseStyleSheetFile(Path path) {
+    return fileSystem.readText(path)
+        .then((code) =>
+            new SourceFile(path, type: SourceFile.STYLESHEET)
+            ..code = code.trim())

[Siggi Cherem (dart-lang), 2013/03/08 21:57:52]

Maybe remove 'trim' here?

You are also trimming the content in _parseCss. Alternatively, keep it here,
remove it in _parseCss, and add it to the other call to _parseCss.

[terry, 2013/03/08 22:42:23]

I like it _parseCss only.
On 2013/03/08 21:57:52, Siggi Cherem (dart-lang) wrote:

+        .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.code, 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;
     if (uri.startsWith('dart:')) return null;
 
     if (uri.startsWith('package:')) {
       // Don't process our own package -- we'll implement @observable manually.
       if (uri.startsWith('package:web_ui/')) return null;
 
       return _pathInfo.packageRoot.join(new Path(uri.substring(8)));
@@ skipping 157 matching lines @@
       if (newUri != null) {
         directive.uri = createStringLiteral(newUri);
       }
     }
   }
 
   /** Run the analyzer on every input html file. */
   void _analyze() {
     var uniqueIds = new IntIterator();
     for (var file in files) {
-      if (file.isDart) continue;
-      _time('Analyzed contents', file.path, () =>
-          analyzeFile(file, info, uniqueIds, _messages));
+      var fileInfo = info[file.path];

[Siggi Cherem (dart-lang), 2013/03/08 21:57:52]

delete this unused variable

[terry, 2013/03/08 22:42:23]

Done.

+      if (file.isHtml) {
+        _time('Analyzed contents', file.path, () =>
+            analyzeFile(file, info, uniqueIds, _messages));
+      }
     }
   }
 
   /** Emit the generated code corresponding to each input file. */
   void _emit() {
     for (var file in files) {
-      if (file.isDart) continue;
+      if (file.isDart || file.isStyleSheet) continue;
       _time('Codegen', file.path, () {
         var fileInfo = info[file.path];
         cleanHtmlNodes(fileInfo);
-        _processStylesheet(fileInfo, options: options);
+        if (!fileInfo.isEntryPoint) {

[Siggi Cherem (dart-lang), 2013/03/08 21:57:52]

&& options.processCss

[terry, 2013/03/08 22:42:23]

I'm not sure this is right.  Don't we want to support var, calc, mixin etc.
regardless of polyfill?

On 2013/03/08 21:57:52, Siggi Cherem (dart-lang) wrote:

[Siggi Cherem (dart-lang), 2013/03/09 01:32:10]

my understanding was that 'processCss' is not just about scroped-styles, but
about polyfilling all the futuristic features of css that are not available in
browsers today (like var, mixin, etc)

+          // Check all components files for <style> tags and parse the CSS.
+          var uriVisitor = new UriVisitor(_pathInfo, _mainPath, fileInfo.path);
+          _processStylesheet(uriVisitor, fileInfo, options: options);
+        }
         fixupHtmlCss(fileInfo, options);
         _emitComponents(fileInfo);
         if (fileInfo.isEntryPoint) {
           _emitMainDart(file);
           _emitMainHtml(file);
         }
       });
     }
+
+    if (options.processCss) {
+      _emitAllCss();
+    }
   }
 
   /** Emit the main .dart file. */
   void _emitMainDart(SourceFile file) {
     var fileInfo = info[file.path];
-    var printer = new MainPageEmitter(fileInfo)
+    var printer = new MainPageEmitter(fileInfo, options.processCss)
         .run(file.document, _pathInfo, _edits[fileInfo.userCode],
             options.rewriteUrls);
     _emitFileAndSourceMaps(fileInfo, printer, fileInfo.inputPath);
   }
 
   /** Generate an html file with the (trimmed down) main html page. */
   void _emitMainHtml(SourceFile file) {
     var fileInfo = info[file.path];
 
     var bootstrapName = '${file.path.filename}_bootstrap.dart';
@@ skipping 31 matching lines @@
       if (link.attributes["rel"] == "components") {
         link.remove();
       }
     }
 
     _addAutoGeneratedComment(file);
     output.add(new OutputFile(_pathInfo.outputPath(file.path, '.html'),
         document.outerHtml, source: file.path));
   }
 
+  /** Generate an CSS file for all style sheets (main and components). */
+  void _emitAllCss() {
+    StringBuffer allCssBuff = new StringBuffer();

[Siggi Cherem (dart-lang), 2013/03/08 21:57:52]

style nit: use var

[terry, 2013/03/08 22:42:23]

Done.

+

[Siggi Cherem (dart-lang), 2013/03/08 21:57:52]

style nit, delete empty line

[terry, 2013/03/08 22:42:23]

Done.

+    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];

[Siggi Cherem (dart-lang), 2013/03/08 21:57:52]

move this down inside the next if

[terry, 2013/03/08 22:42:23]

Done.

+      if (!file.isStyleSheet) {

[Siggi Cherem (dart-lang), 2013/03/08 21:57:52]

!file.isStylesheet => file.isHtml
(skip dart files too?)

[terry, 2013/03/08 22:42:23]

Right should only be isHtml (dart and stylesheets aren't processed here).
On 2013/03/08 21:57:52, Siggi Cherem (dart-lang) wrote:

+        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) {
+      // TODO(terry): Handle one stylesheet per component see fixupHtmlCss.
+      if (component.styleSheets.length > 1) {

[Siggi Cherem (dart-lang), 2013/03/08 21:57:52]

&& options.processCss

[terry, 2013/03/08 22:42:23]

Done.

[terry, 2013/03/08 22:42:23]

Done.

+        _messages.warning(
+            'Component has more than one stylesheet'
+            ' - first stylesheet used.', null, file: component.externalFile);
+      }
       var printer = new WebComponentEmitter(fileInfo, _messages)
           .run(component, _pathInfo, _edits[component.userCode]);
       _emitFileAndSourceMaps(component, printer, component.externalFile);
     }
   }
 
   /**
    * Emits a file that was created using [CodePrinter] and it's corresponding
    * source map file.
    */
@@ skipping 49 matching lines @@
             'See http://www.w3.org/TR/html5-diff/#doctype',
             doctype.sourceSpan, file: file.path);
       }
     }
     document.nodes.insertAt(commentIndex, parseFragment(
         '\n<!-- This file was auto-generated from ${file.path}. -->\n'));
   }
 }
 
 /** Parse all stylesheet for polyfilling assciated with [info]. */
-void _processStylesheet(info, {CompilerOptions options : null}) {
-  new _ProcessCss(options).visit(info);
+void _processStylesheet(uriVisitor, info, {CompilerOptions options : null}) {
+  new _ProcessCss(uriVisitor, options).visit(info);
+}
+
+StyleSheet _parseCss(String src, String content, UriVisitor uriVisitor,
+                     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.
+    var oldComponent = component;
+    component = info;
 
-      if (options.debugCss) {
-        print('\nComponent: ${info.tagName}');
-        print('==========\n');
-        print(treeToDebugString(info.styleSheet));
+    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();

[Siggi Cherem (dart-lang), 2013/03/08 21:57:52]

do we need a 'toString'? I'm not sure what's the type of node.nodes.single, but
if the node is a Text node, I believe it's value is already a String.

[terry, 2013/03/08 22:42:23]

Yep only need .value

On 2013/03/08 21:57:52, Siggi Cherem (dart-lang) wrote:

+        var styleSheet = _parseCss(component.tagName, content, uriVisitor,
+            options);
+        if (styleSheet != null) {
+          component.styleSheets.add(styleSheet);
+        }
       }
     }
 
-    super.visitComponentInfo(info);
+    super.visitElementInfo(info);
   }
 }