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, fileType: 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((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;
     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 154 matching lines @@
       }
       if (newUri != null) {
         directive.uri = createStringLiteral(newUri);
       }
     }
   }
 
   /** 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:

+      }
     }
   }
 
   /** Emit the generated code corresponding to each input file. */
   void _emit() {
     for (var file in files) {
       if (file.isDart) continue;
       _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) {
           _emitMainDart(file);
           _emitMainHtml(file);
         }
       });
     }
+
+    _emitAllCss();
   }
 
   /** Emit the main .dart file. */
   void _emitMainDart(SourceFile file) {
     var fileInfo = info[file.path];
     var printer = new MainPageEmitter(fileInfo)
         .run(file.document, _pathInfo, _edits[fileInfo.userCode],
             options.rewriteUrls);
     _emitFileAndSourceMaps(fileInfo, printer, fileInfo.inputPath);
   }
@@ skipping 37 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();
+
+    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) {
       var printer = new WebComponentEmitter(fileInfo, _messages)
           .run(component, _pathInfo, _edits[component.userCode]);
       _emitFileAndSourceMaps(component, printer, component.externalFile);
     }
   }
 
   /**
@@ 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(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.
+    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();
+        var styleSheet = _parseCSS(component.tagName, content, uriVisitor,
+            options);
+        if (styleSheet != null) {
+          component.styleSheets.add(styleSheet);
+        }
       }
     }
 
-    super.visitComponentInfo(info);
+    super.visitElementInfo(info);
   }
 }