Support for parsing all CSS and producing one CSS file

lib/src/html_css_fixup.dart

Index: lib/src/html_css_fixup.dart
diff --git a/lib/src/html_css_fixup.dart b/lib/src/html_css_fixup.dart
index 4a3d0a3d0db115d9057a38b832383d4cba69e4dc..321ef5388491f5a0fba98a3f3cb17018313b0247 100644
--- a/lib/src/html_css_fixup.dart
+++ b/lib/src/html_css_fixup.dart
@@ -10,6 +10,7 @@ import 'package:html5lib/dom.dart';
 import 'package:html5lib/dom_parsing.dart';
 import 'package:csslib/visitor.dart';
 
+import 'file_system/path.dart';
 import 'info.dart';
 import 'messages.dart';
 import 'options.dart';
@@ -27,12 +28,15 @@ void fixupHtmlCss(FileInfo fileInfo, CompilerOptions opts) {
   // component.
   if (opts.verbose) print("  CSS fixup ${fileInfo.path.filename}");
   for (var component in fileInfo.declaredComponents) {
-    if (component.styleSheet != null) {
+    // TODO(terry): Consider allowing more than one style sheet per component.
+    // For components only 1 stylesheet allowed.
+    if (!component.styleSheets.isEmpty && component.styleSheets.length == 1) {
+      var styleSheet = component.styleSheets[0];
       // If polyfill is on prefix component name to all CSS classes and ids
       // referenced in the scoped style.
       var prefix = opts.processCss ? component.tagName : null;
       // List of referenced #id and .class in CSS.
-      var knownCss = new IdClassVisitor()..visitTree(component.styleSheet);
+      var knownCss = new IdClassVisitor()..visitTree(styleSheet);
       // Prefix all id and class refs in CSS selectors and HTML attributes.
       new _ScopedStyleRenamer(knownCss, prefix, opts.debugCss).visit(component);
     }
@@ -75,10 +79,15 @@ Map createCssSimpleSelectors(IdClassVisitor visitedCss, ComponentInfo info,
  */
 String createCssSelectorsDefinition(ComponentInfo info, bool cssPolyfill) {
   var cssVisited = new IdClassVisitor();
-  if (info.styleSheet != null) cssVisited..visitTree(info.styleSheet);
+
+  // For components only 1 stylesheet allowed.
+  if (!info.styleSheets.isEmpty && info.styleSheets.length == 1) {
+    var styleSheet = info.styleSheets[0];
+    cssVisited..visitTree(styleSheet);
+  }
+
   var css = json.stringify(createCssSimpleSelectors(cssVisited, info,
       scopedStyles: cssPolyfill));
-
   return 'static Map<String, String> _css = $css;';
 }
 
@@ -166,3 +175,30 @@ class _ScopedStyleRenamer extends InfoVisitor {
     }
   }
 }
+
+/** Compute each CSS URI resource relative from the generated CSS file. */
+class UriVisitor extends Visitor {
+  final PathInfo _pathInfo;
+
+  /** Path of the main HTML application file. */
+  final Path _mainFilePath;
+
+  /** Path of the CSS file being processed. */
+  final Path _cssFilePath;
+
+  bool _pathsEqual;
+
+  String _lastCssFilePathSegment;
+
+  UriVisitor(this._pathInfo, this._mainFilePath, this._cssFilePath) {
+    _lastCssFilePathSegment = _cssFilePath.directoryPath.filename;
+    _pathsEqual = _mainFilePath.directoryPath.toString() ==
+        _cssFilePath.directoryPath.toString();
+  }
+
+  void visitUriTerm(UriTerm node) {
+    var uriPath = !_pathsEqual ?
+        '$_lastCssFilePathSegment/${node.text}' : node.text;

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

mm... I'm still confused about this. Should we be joining only the last path
segment or not the entire path?

I thought you'd want to do something more like a relative path from main to css
and append the url to that.

For example, add a field like _urlBasePath or _cssRelativePath:

  final Path _cssRelativePath =
     _cssFilePath.directoryPath.relativeTo(_mainFilePath);

(so you can remove _pathEquals and _cssFilePath)

and then this method would simply do:

  node.text = _pathInfo.transformUrl(_mainFilePath,
    _cssRelativePath.join(node.text).toString());

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

I think it can be simpler than that:

Path cssRelativePath = _cssFilePath.directoryPath.relativeTo(_mainFilePath);
node.text = '${cssRelativePath.toString()}/${node.text}';

Does that make sense?

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

+    node.text = _pathInfo.transformUrl(_mainFilePath, uriPath);
+  }
+}