refactor(compiler): don’t rely on external css parser

We used to use different external css parsers,
depending on the `DomAdapter`. This lead to
inconsistent behavior and environment specific errors.

Closes #5006
Closes #4993

modules/angular2/pubspec.yaml

@@ -11,7 +11,6 @@ environment:
 dependencies:
   analyzer: '>=0.24.4 <0.27.0'
   barback: '^0.15.2+2'
-  csslib: '>=0.12.0 <1.0.0'
   code_transformers: '^0.2.8'
   dart_style: '>=0.1.8 <0.3.0'
   glob: '^1.0.0'

modules/angular2/src/core/compiler/shadow_css.ts

@@ -1,4 +1,3 @@
-import {DOM} from 'angular2/src/core/dom/dom_adapter';
 import {ListWrapper} from 'angular2/src/core/facade/collection';
 import {
   StringWrapper,
@@ -144,8 +143,7 @@ export class ShadowCss {
   * Shim a style element with the given selector. Returns cssText that can
   * be included in the document via WebComponents.ShadowCSS.addCssToDocument(css).
   */
-  shimStyle(style: string, selector: string, hostSelector: string = ''): string {
+  shimStyle(cssText: string, selector: string, hostSelector: string = ''): string {
-    var cssText = DOM.getText(style);
     return this.shimCssText(cssText, selector, hostSelector);
   }
 
@@ -231,8 +229,7 @@ export class ShadowCss {
     cssText = this._convertColonHostContext(cssText);
     cssText = this._convertShadowDOMSelectors(cssText);
     if (isPresent(scopeSelector)) {
-      _withCssRules(cssText,
+      cssText = this._scopeSelectors(cssText, scopeSelector, hostSelector);
-                    (rules) => { cssText = this._scopeRules(rules, scopeSelector, hostSelector); });
     }
     cssText = cssText + '\n' + unscoped;
     return cssText.trim();
@@ -347,50 +344,37 @@ export class ShadowCss {
 
   // change a selector like 'div' to 'name div'
   /** @internal */
-  _scopeRules(cssRules, scopeSelector: string, hostSelector: string): string {
+  _scopeSelectors(cssText: string, scopeSelector: string, hostSelector: string): string {
-    var cssText = '';
+    var parts = splitCurlyBlocks(cssText);
-    if (isPresent(cssRules)) {
+    var result = [];
-      for (var i = 0; i < cssRules.length; i++) {
+    for (var i = 0; i < parts.length; i += 2) {
-        var rule = cssRules[i];
+      var selectorTextWithCommands = parts[i];
-        if (DOM.isStyleRule(rule) || DOM.isPageRule(rule)) {
+      var selectorStart = selectorTextWithCommands.lastIndexOf(';') + 1;
-          cssText += this._scopeSelector(rule.selectorText, scopeSelector, hostSelector,
+      var selectorText =
-                                         this.strictStyling) +
+          selectorTextWithCommands.substring(selectorStart, selectorTextWithCommands.length);
-                     ' {\n';
+      var ruleContent = parts[i + 1];
-          cssText += this._propertiesFromRule(rule) + '\n}\n\n';
+      var selectorMatch = RegExpWrapper.firstMatch(_singleSelectorRe, selectorText);
-        } else if (DOM.isMediaRule(rule)) {
+      if (isPresent(selectorMatch) && ruleContent.length > 0) {
-          cssText += '@media ' + rule.media.mediaText + ' {\n';
+        var selPrefix = selectorMatch[1];
-          cssText += this._scopeRules(rule.cssRules, scopeSelector, hostSelector);
+        var selAt = isPresent(selectorMatch[2]) ? selectorMatch[2] : '';
-          cssText += '\n}\n\n';
+        var selector = selectorMatch[3];
-        } else {
+        var selSuffix = selectorMatch[4];
-          // KEYFRAMES_RULE in IE throws when we query cssText
+        if (selAt.length === 0 || selAt == '@page') {
-          // when it contains a -webkit- property.
+          var scopedSelector =
-          // if this happens, we fallback to constructing the rule
+              this._scopeSelector(selector, scopeSelector, hostSelector, this.strictStyling);
-          // from the CSSRuleSet
+          selectorText = `${selPrefix}${selAt}${scopedSelector}${selSuffix}`;
-          // https://connect.microsoft.com/IE/feedbackdetail/view/955703/accessing-csstext-of-a-keyframe-rule-that-contains-a-webkit-property-via-cssom-generates-exception
+        } else if (selAt == '@media' && ruleContent[0] == OPEN_CURLY &&
-          try {
+                   ruleContent[ruleContent.length - 1] == CLOSE_CURLY) {
-            if (isPresent(rule.cssText)) {
+          var scopedContent = this._scopeSelectors(ruleContent.substring(1, ruleContent.length - 1),
-              cssText += rule.cssText + '\n\n';
+                                                   scopeSelector, hostSelector);
-            }
+          ruleContent = `${OPEN_CURLY}${scopedContent}${CLOSE_CURLY}`;
-          } catch (x) {
-            if (DOM.isKeyframesRule(rule) && isPresent(rule.cssRules)) {
-              cssText += this._ieSafeCssTextFromKeyFrameRule(rule);
-            }
-          }
         }
       }
+      result.push(selectorTextWithCommands.substring(0, selectorStart));
+      result.push(selectorText);
+      result.push(ruleContent);
     }
-    return cssText;
+    return result.join('');
-  }
-
-  /** @internal */
-  _ieSafeCssTextFromKeyFrameRule(rule): string {
-    var cssText = '@keyframes ' + rule.name + ' {';
-    for (var i = 0; i < rule.cssRules.length; i++) {
-      var r = rule.cssRules[i];
-      cssText += ' ' + r.keyText + ' {' + r.style.cssText + '}';
-    }
-    cssText += ' }';
-    return cssText;
   }
 
   /** @internal */
@@ -477,36 +461,6 @@ export class ShadowCss {
     selector = StringWrapper.replaceAll(selector, _colonHostRe, _polyfillHost);
     return selector;
   }
-
-  /** @internal */
-  _propertiesFromRule(rule): string {
-    var cssText = rule.style.cssText;
-    // TODO(sorvell): Safari cssom incorrectly removes quotes from the content
-    // property. (https://bugs.webkit.org/show_bug.cgi?id=118045)
-    // don't replace attr rules
-    var attrRe = /['"]+|attr/g;
-    if (rule.style.content.length > 0 &&
-        !isPresent(RegExpWrapper.firstMatch(attrRe, rule.style.content))) {
-      var contentRe = /content:[^;]*;/g;
-      cssText =
-          StringWrapper.replaceAll(cssText, contentRe, 'content: \'' + rule.style.content + '\';');
-    }
-    // TODO(sorvell): we can workaround this issue here, but we need a list
-    // of troublesome properties to fix https://github.com/Polymer/platform/issues/53
-    //
-    // inherit rules can be omitted from cssText
-    // TODO(sorvell): remove when Blink bug is fixed:
-    // https://code.google.com/p/chromium/issues/detail?id=358273
-    // var style = rule.style;
-    // for (var i = 0; i < style.length; i++) {
-    //  var name = style.item(i);
-    //  var value = style.getPropertyValue(name);
-    //  if (value == 'initial') {
-    //    cssText += name + ': initial; ';
-    //  }
-    //}
-    return cssText;
-  }
 }
 var _cssContentNextSelectorRe =
     /polyfill-next-selector[^}]*content:[\s]*?['"](.*?)['"][;\s]*}([^{]*?){/gim;
@@ -539,13 +493,34 @@ var _polyfillHostRe = RegExpWrapper.create(_polyfillHost, 'im');
 var _colonHostRe = /:host/gim;
 var _colonHostContextRe = /:host-context/gim;
 
-function _cssToRules(cssText: string) {
+var _singleSelectorRe = /^(\s*)(@\S+)?(.*?)(\s*)$/g;
-  return DOM.cssToRules(cssText);
+
+var _curlyRe = /([{}])/g;
+var OPEN_CURLY = '{';
+var CLOSE_CURLY = '}';
+
+export function splitCurlyBlocks(cssText:string):string[] {
+  var parts = StringWrapper.split(cssText, _curlyRe);
+  var result = [];
+  var bracketCount = 0;
+  var currentCurlyParts = [];
+  for (var partIndex = 0; partIndex<parts.length; partIndex++) {
+    var part = parts[partIndex];
+    currentCurlyParts.push(part);
+    if (part == OPEN_CURLY) {
+      bracketCount++;
+    } else if (part == CLOSE_CURLY) {
+      bracketCount--;
+    }
+    if (bracketCount === 0) {
+      result.push(currentCurlyParts.join(''));
+      currentCurlyParts = [];
+    }
+  }
+  result.push(currentCurlyParts.join(''));
+  if (result.length >= 2 && result[result.length-1] == '' && result[result.length-2] == '') {
+    result = result.slice(0, result.length-2);
+  }
+  return result;
 }
 
-function _withCssRules(cssText: string, callback: Function) {
-  // Difference from webcomponentjs: remove the workaround for an old bug in Chrome
-  if (isBlank(callback)) return;
-  var rules = _cssToRules(cssText);
-  callback(rules);
-}

modules/angular2/src/core/dom/abstract_html_adapter.dart

@@ -4,7 +4,6 @@ import 'package:html/parser.dart' as parser;
 import 'package:html/dom.dart';
 
 import 'dom_adapter.dart';
-import 'emulated_css.dart';
 import '../compiler/xhr.dart';
 
 const _attrToPropMap = const {
@@ -348,14 +347,6 @@ abstract class AbstractHtml5LibAdapter implements DomAdapter {
     throw 'not implemented';
   }
 
-  bool isPageRule(rule) => (rule.type == 6);
-
-  bool isStyleRule(rule) => (rule.type == 1);
-
-  bool isMediaRule(rule) => (rule.type == 4);
-
-  bool isKeyframesRule(rule) => (rule.type == 7);
-
   String getHref(element) {
     throw 'not implemented';
   }
@@ -364,10 +355,6 @@ abstract class AbstractHtml5LibAdapter implements DomAdapter {
     throw 'not implemented';
   }
 
-  List cssToRules(String css) {
-    return parseAndEmulateCssRules(css);
-  }
-
   List getDistributedNodes(Node) {
     throw 'not implemented';
   }
@@ -380,13 +367,6 @@ abstract class AbstractHtml5LibAdapter implements DomAdapter {
     return false;
   }
 
-  bool supportsUnprefixedCssAnimation() {
-    // Currently during code transformation we do not know what
-    // browsers we are targetting. To play it safe, we assume
-    // unprefixed animations are not supported.
-    return false;
-  }
-
   getHistory() {
     throw 'not implemented';
   }

modules/angular2/src/core/dom/browser_adapter.dart

@@ -410,10 +410,6 @@ class BrowserDomAdapter extends GenericBrowserDomAdapter {
     return document.adoptNode(node);
   }
 
-  bool isPageRule(CssRule rule) => rule is CssPageRule;
-  bool isStyleRule(CssRule rule) => rule is CssStyleRule;
-  bool isMediaRule(CssRule rule) => rule is CssMediaRule;
-  bool isKeyframesRule(CssRule rule) => rule is CssKeyframesRule;
   String getHref(AnchorElement element) {
     return element.href;
   }

modules/angular2/src/core/dom/browser_adapter.ts

@@ -273,10 +273,6 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
     return document.importNode(toImport, true);
   }
   adoptNode(node: Node): any { return document.adoptNode(node); }
-  isPageRule(rule): boolean { return rule.type === CSSRule.PAGE_RULE; }
-  isStyleRule(rule): boolean { return rule.type === CSSRule.STYLE_RULE; }
-  isMediaRule(rule): boolean { return rule.type === CSSRule.MEDIA_RULE; }
-  isKeyframesRule(rule): boolean { return rule.type === CSSRule.KEYFRAMES_RULE; }
   getHref(el: Element): string { return (<any>el).href; }
   getEventKey(event): string {
     var key = event.key;

modules/angular2/src/core/dom/dom_adapter.ts

@@ -111,17 +111,11 @@ export abstract class DomAdapter {
   abstract isShadowRoot(node): boolean;
   abstract importIntoDoc /*<T extends Node>*/ (node: Node /*T*/): Node /*T*/;
   abstract adoptNode /*<T extends Node>*/ (node: Node /*T*/): Node /*T*/;
-  abstract isPageRule(rule): boolean;
-  abstract isStyleRule(rule): boolean;
-  abstract isMediaRule(rule): boolean;
-  abstract isKeyframesRule(rule): boolean;
   abstract getHref(element): string;
   abstract getEventKey(event): string;
   abstract resolveAndSetHref(element, baseUrl: string, href: string);
-  abstract cssToRules(css: string): any[];
   abstract supportsDOMEvents(): boolean;
   abstract supportsNativeShadowDOM(): boolean;
-  abstract supportsUnprefixedCssAnimation(): boolean;
   abstract getGlobalEventTarget(target: string): any;
   abstract getHistory(): History;
   abstract getLocation(): Location;

modules/angular2/src/core/dom/emulated_css.dart

@@ -1,110 +0,0 @@
-/**
- * Emulates browser CSS API.
- *
- * WARNING: this is a very incomplete emulation; it only has enough to support
- *          Angular's CSS scoping (a.k.a. shimming).
- */
-library angular2.dom.emulated_css;
-
-import 'package:csslib/parser.dart' as cssp;
-import 'package:csslib/visitor.dart' as cssv;
-
-/// Parses [css] string and emits the list of top-level CSS rules in it via
-/// data structures that mimick browser CSS APIs.
-List<EmulatedCssRule> parseAndEmulateCssRules(String css) {
-  var stylesheet = cssp.parse(css);
-  return emulateRules(stylesheet.topLevels);
-}
-
-/// Converts `csslib` [rules] to their emulated counterparts.
-List<EmulatedCssRule> emulateRules(Iterable<cssv.TreeNode> rules) {
-  return rules.map((cssv.TreeNode node) {
-    if (node is cssv.RuleSet) {
-      if (node.declarationGroup.span.text.isEmpty) {
-        // Skip CSS matchers with no bodies
-        return null;
-      }
-      return new EmulatedCssStyleRule(node);
-    } else if (node is cssv.MediaDirective) {
-      return new EmulatedCssMedialRule(node);
-    } else if (node is cssv.ImportDirective) {
-      return new EmulatedCssImportRule(node);
-    }
-  }).where((r) => r != null).toList();
-}
-
-/// Emulates [CSSRule](https://developer.mozilla.org/en-US/docs/Web/API/CSSRule)
-abstract class EmulatedCssRule {
-  int type;
-  String cssText;
-}
-
-/// Emulates [CSSStyleRule](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleRule)
-class EmulatedCssStyleRule extends EmulatedCssRule {
-  String selectorText;
-  EmulatedCssStyleDeclaration style;
-
-  EmulatedCssStyleRule(cssv.RuleSet ruleSet) {
-    final declarationText = new StringBuffer();
-    ruleSet.declarationGroup.declarations.forEach((d) {
-      if (d is! cssv.Declaration) {
-        // Nested selectors not supported
-        return;
-      }
-      // TODO: expression spans are currently broken in csslib; see:
-      //       https://github.com/dart-lang/csslib/pull/14
-      var declarationSpan = d.span.text;
-      var colonIdx = declarationSpan.indexOf(':');
-      var expression = declarationSpan.substring(colonIdx + 1);
-      declarationText.write('${d.property}: ${expression};');
-    });
-
-    final style = new EmulatedCssStyleDeclaration()
-      ..cssText = declarationText.toString();
-
-    this
-      ..type = 1
-      ..cssText = ruleSet.span.text
-      ..selectorText = ruleSet.selectorGroup.span.text
-      ..style = style;
-  }
-}
-
-/// Emulates [CSSStyleDeclaration](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)
-class EmulatedCssStyleDeclaration {
-  final String content = '';
-  String cssText;
-}
-
-/// Emulates [CSSMediaRule](https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule)
-class EmulatedCssMedialRule extends EmulatedCssRule {
-  List<EmulatedCssStyleRule> cssRules;
-  EmulatedMediaList media;
-
-  EmulatedCssMedialRule(cssv.MediaDirective directive) {
-    this
-      ..type = 4
-      ..media = new EmulatedMediaList(directive)
-      ..cssText = directive.span.text
-      ..cssRules = emulateRules(directive.rulesets);
-  }
-}
-
-/// Emulates [MediaList](https://developer.mozilla.org/en-US/docs/Web/API/MediaList)
-class EmulatedMediaList {
-  String mediaText;
-
-  EmulatedMediaList(cssv.MediaDirective directive) {
-    this.mediaText =
-        directive.mediaQueries.map((q) => q.span.text).join(' and ');
-  }
-}
-
-/// Emulates [CSSImportRule](https://developer.mozilla.org/en-US/docs/Web/API/CSSImportRule)
-class EmulatedCssImportRule extends EmulatedCssRule {
-  EmulatedCssImportRule(cssv.ImportDirective directive) {
-    this
-      ..type = 3
-      ..cssText = '@${directive.span.text};';
-  }
-}

modules/angular2/src/core/dom/generic_browser_adapter.ts

@@ -47,37 +47,10 @@ export abstract class GenericBrowserDomAdapter extends DomAdapter {
   resolveAndSetHref(el: HTMLAnchorElement, baseUrl: string, href: string) {
     el.href = href == null ? baseUrl : baseUrl + '/../' + href;
   }
-  cssToRules(css: string): any[] {
-    var style = this.createStyleElement(css);
-    this.appendChild(this.defaultDoc().head, style);
-    var rules = [];
-    if (isPresent(style.sheet)) {
-      // TODO(sorvell): Firefox throws when accessing the rules of a stylesheet
-      // with an @import
-      // https://bugzilla.mozilla.org/show_bug.cgi?id=625013
-      try {
-        var rawRules = (<any>style.sheet).cssRules;
-        rules = ListWrapper.createFixedSize(rawRules.length);
-        for (var i = 0; i < rawRules.length; i++) {
-          rules[i] = rawRules[i];
-        }
-      } catch (e) {
-        //
-      }
-    } else {
-      // console.warn('sheet not found', style);
-    }
-    this.remove(style);
-    return rules;
-  }
   supportsDOMEvents(): boolean { return true; }
   supportsNativeShadowDOM(): boolean {
     return isFunction((<any>this.defaultDoc().body).createShadowRoot);
   }
-  supportsUnprefixedCssAnimation(): boolean {
-    return isPresent(this.defaultDoc().body.style) &&
-           isPresent(this.defaultDoc().body.style.animationName);
-  }
   getAnimationPrefix(): string {
     return isPresent(this._animationPrefix) ? this._animationPrefix : "";
   }

modules/angular2/src/core/dom/parse5_adapter.ts

@@ -3,8 +3,6 @@ var parser = new parse5.Parser(parse5.TreeAdapters.htmlparser2);
 var serializer = new parse5.Serializer(parse5.TreeAdapters.htmlparser2);
 var treeAdapter = parser.treeAdapter;
 
-var cssParse = require('css/lib/parse/index');
-
 import {MapWrapper, ListWrapper, StringMapWrapper} from 'angular2/src/core/facade/collection';
 import {DomAdapter, setRootDomAdapter} from './dom_adapter';
 import {
@@ -474,18 +472,6 @@ export class Parse5DomAdapter extends DomAdapter {
   isShadowRoot(node): boolean { return this.getShadowRoot(node) == node; }
   importIntoDoc(node): any { return this.clone(node); }
   adoptNode(node): any { return node; }
-  isPageRule(rule): boolean {
-    return rule.type === 6;  // CSSRule.PAGE_RULE
-  }
-  isStyleRule(rule): boolean {
-    return rule.type === 1;  // CSSRule.MEDIA_RULE
-  }
-  isMediaRule(rule): boolean {
-    return rule.type === 4;  // CSSRule.MEDIA_RULE
-  }
-  isKeyframesRule(rule): boolean {
-    return rule.type === 7;  // CSSRule.KEYFRAMES_RULE
-  }
   getHref(el): string { return el.href; }
   resolveAndSetHref(el, baseUrl: string, href: string) {
     if (href == null) {
@@ -531,15 +517,6 @@ export class Parse5DomAdapter extends DomAdapter {
     }
     return rules;
   }
-  cssToRules(css: string): any[] {
-    css = css.replace(/url\(\'(.+)\'\)/g, 'url($1)');
-    var rules = [];
-    var parsedCSS = cssParse(css, {silent: true});
-    if (parsedCSS.stylesheet && parsedCSS.stylesheet.rules) {
-      rules = this._buildRules(parsedCSS.stylesheet.rules, css);
-    }
-    return rules;
-  }
   supportsDOMEvents(): boolean { return false; }
   supportsNativeShadowDOM(): boolean { return false; }
   getGlobalEventTarget(target: string): any {
@@ -551,12 +528,6 @@ export class Parse5DomAdapter extends DomAdapter {
       return this.defaultDoc().body;
     }
   }
-  supportsUnprefixedCssAnimation(): boolean {
-    // Currently during offline code transformation we do not know
-    // what browsers we are targetting. To play it safe, we assume
-    // unprefixed animations are not supported.
-    return false;
-  }
   getBaseHref(): string { throw 'not implemented'; }
   resetBaseElement(): void { throw 'not implemented'; }
   getHistory(): History { throw 'not implemented'; }

modules/angular2/test/core/compiler/shadow_css_html5lib.server.spec.dart

@@ -1,11 +0,0 @@
-library angular2.compiler.shadow_css_html5lib.test;
-
-import 'package:angular2/src/core/dom/html_adapter.dart';
-import 'package:angular2/src/testing/testing_internal.dart' show testSetup;
-import 'shadow_css_spec.dart' as shadow_css_spec_test;
-
-void main() {
-  Html5LibDomAdapter.makeCurrent();
-  testSetup();
-  shadow_css_spec_test.main();
-}

modules/angular2/test/core/compiler/shadow_css_spec.ts

@@ -7,13 +7,11 @@ import {
   iit,
   SpyObject,
   el,
-  normalizeCSS,
+  normalizeCSS
-  browserDetection
 } from 'angular2/testing_internal';
-import {ShadowCss} from 'angular2/src/core/compiler/shadow_css';
+import {ShadowCss, splitCurlyBlocks} from 'angular2/src/core/compiler/shadow_css';
 
 import {RegExpWrapper, StringWrapper, isPresent} from 'angular2/src/core/facade/lang';
-import {DOM} from 'angular2/src/core/dom/dom_adapter';
 
 export function main() {
   describe('ShadowCss', function() {
@@ -35,7 +33,7 @@ export function main() {
 
     it('should handle invalid css', () => {
       var css = 'one {color: red;}garbage';
-      var expected = 'one[a] {color:red;}';
+      var expected = 'one[a] {color:red;}garbage';
       expect(s(css, 'a')).toEqual(expected);
     });
 
@@ -53,28 +51,20 @@ export function main() {
 
     it('should handle media rules with simple rules', () => {
       var css = '@media screen and (max-width: 800px) {div {font-size: 50px;}} div {}';
-      var expected = '@media screen and (max-width:800px) {div[a] {font-size:50px;}}div[a] {}';
+      var expected = '@media screen and (max-width:800px) {div[a] {font-size:50px;}} div[a] {}';
       expect(s(css, 'a')).toEqual(expected);
     });
 
     // Check that the browser supports unprefixed CSS animation
-    if (DOM.supportsUnprefixedCssAnimation()) {
+    it('should handle keyframes rules', () => {
-      it('should handle keyframes rules', () => {
+      var css = '@keyframes foo {0% {transform:translate(-50%) scaleX(0);}}';
-        var css = '@keyframes foo {0% {transform: translate(-50%) scaleX(0);}}';
+      expect(s(css, 'a')).toEqual(css);
-        var passRe =
+    });
-            /@(-webkit-)*keyframes foo {\s*0% {\s*transform:translate\(-50%\) scaleX\(0\);\s*}\s*}/g;
-        expect(RegExpWrapper.test(passRe, s(css, 'a'))).toEqual(true);
-      });
-    }
 
-    if (browserDetection.isWebkit) {
+    it('should handle -webkit-keyframes rules', () => {
-      it('should handle -webkit-keyframes rules', () => {
+      var css = '@-webkit-keyframes foo {0% {-webkit-transform:translate(-50%) scaleX(0);}}';
-        var css = '@-webkit-keyframes foo {0% {-webkit-transform: translate(-50%) scaleX(0);}}';
+      expect(s(css, 'a')).toEqual(css);
-        var passRe =
+    });
-            /@-webkit-keyframes foo {\s*0% {\s*(-webkit-)*transform:translate\(-50%\) scaleX\(0\);\s*}}/g;
-        expect(RegExpWrapper.test(passRe, s(css, 'a'))).toEqual(true);
-      });
-    }
 
     it('should handle complicated selectors', () => {
       expect(s('one::before {}', 'a')).toEqual('one[a]::before {}');
@@ -110,10 +100,10 @@ export function main() {
 
     it('should support polyfill-next-selector', () => {
       var css = s("polyfill-next-selector {content: 'x > y'} z {}", 'a');
-      expect(css).toEqual('x[a] > y[a] {}');
+      expect(css).toEqual('x[a] > y[a]{}');
 
       css = s('polyfill-next-selector {content: "x > y"} z {}', 'a');
-      expect(css).toEqual('x[a] > y[a] {}');
+      expect(css).toEqual('x[a] > y[a]{}');
     });
 
     it('should support polyfill-unscoped-rule', () => {
@@ -134,10 +124,10 @@ export function main() {
 
     it('should support polyfill-rule', () => {
       var css = s("polyfill-rule {content: ':host.foo .bar';color: blue;}", 'a', 'a-host');
-      expect(css).toEqual('[a-host].foo .bar {color:blue;}');
+      expect(css).toEqual('[a-host].foo .bar {;color:blue;}');
 
       css = s('polyfill-rule {content: ":host.foo .bar";color:blue;}', 'a', 'a-host');
-      expect(css).toEqual('[a-host].foo .bar {color:blue;}');
+      expect(css).toEqual('[a-host].foo .bar {;color:blue;}');
     });
 
     it('should handle ::shadow', () => {
@@ -155,23 +145,36 @@ export function main() {
       expect(css).toEqual('x[a] y[a] {}');
     });
 
-    // TODO: can't work in Firefox, see https://bugzilla.mozilla.org/show_bug.cgi?id=625013
+    it('should pass through @import directives', () => {
-    // Issue opened to track that: https://github.com/angular/angular/issues/4628
+      var styleStr = '@import url("https://fonts.googleapis.com/css?family=Roboto");';
-    if (!browserDetection.isFirefox) {
+      var css = s(styleStr, 'a');
-      it('should pass through @import directives', () => {
+      expect(css).toEqual(styleStr);
-        var styleStr = '@import url("https://fonts.googleapis.com/css?family=Roboto");';
+    });
-        var css = s(styleStr, 'a');
-        expect(css).toEqual(styleStr);
-      });
-    }
 
-    // Android browser does not support calc(), see http://caniuse.com/#feat=calc
+    it('should shim rules after @import', () => {
-    if (!browserDetection.isAndroid) {
+      var styleStr = '@import url("a"); div {}';
-      it('should leave calc() unchanged', () => {
+      var css = s(styleStr, 'a');
-        var styleStr = 'a {height:calc(100% - 55px);}';
+      expect(css).toEqual('@import url("a"); div[a] {}');
-        var css = s(styleStr, 'a');
+    });
-        expect(css).toEqual(styleStr);
+
-      });
+    it('should leave calc() unchanged', () => {
-    }
+      var styleStr = 'div {height:calc(100% - 55px);}';
+      var css = s(styleStr, 'a');
+      expect(css).toEqual('div[a] {height:calc(100% - 55px);}');
+    });
+  });
+
+  describe('splitCurlyBlocks', () => {
+    it('should split empty css', () => { expect(splitCurlyBlocks('')).toEqual([]); });
+
+    it('should split css rules without body',
+       () => { expect(splitCurlyBlocks('a')).toEqual(['a', '']); });
+
+    it('should split css rules with body',
+       () => { expect(splitCurlyBlocks('a {b}')).toEqual(['a ', '{b}']); });
+
+    it('should split css rules with nested rules', () => {
+      expect(splitCurlyBlocks('a {b {c}} d {e}')).toEqual(['a ', '{b {c}}', ' d ', '{e}']);
+    });
   });
 }

modules/angular2/test/core/compiler/style_compiler_spec.ts

@@ -140,7 +140,7 @@ export function main() {
                  .then(styles => {
                    compareStyles(styles, [
                      'div[_ngcontent-app1-23] {\ncolor: red;\n}',
-                     'span[_ngcontent-app1-23] {\ncolor: blue;\n}'
+                     'span[_ngcontent-app1-23] {color: blue}'
                    ]);
                    async.done();
                  });
@@ -152,8 +152,8 @@ export function main() {
                  .then(styles => {
                    compareStyles(styles, [
                      'div[_ngcontent-app1-23] {\ncolor: red;\n}',
-                     'a[_ngcontent-app1-23] {\ncolor: green;\n}',
+                     'a[_ngcontent-app1-23] {color: green}',
-                     'span[_ngcontent-app1-23] {\ncolor: blue;\n}'
+                     'span[_ngcontent-app1-23] {color: blue}'
                    ]);
                    async.done();
                  });
@@ -260,7 +260,7 @@ export function main() {
              compile(['div {color: red}'], [IMPORT_ABS_STYLESHEET_URL], encapsulation)
                  .then(styles => {
                    compareStyles(styles, [
-                     'div[_ngcontent-app1-23] {\ncolor: red;\n}',
+                     'div[_ngcontent-app1-23] {color: red}',
                      'span[_ngcontent-app1-23] {\ncolor: blue;\n}'
                    ]);
                    async.done();
@@ -281,8 +281,7 @@ export function main() {
       it('should compile plain css rules', inject([AsyncTestCompleter], (async) => {
            compile('div {color: red;}')
                .then(stylesAndShimStyles => {
-                 var expected =
+                 var expected = [['div {color: red;}'], ['div[_ngcontent-%COMP%] {color: red;}']];
-                     [['div {color: red;}'], ['div[_ngcontent-%COMP%] {\ncolor: red;\n}']];
                  compareStyles(stylesAndShimStyles[0], expected[0]);
                  compareStyles(stylesAndShimStyles[1], expected[1]);
                  async.done();
@@ -296,7 +295,7 @@ export function main() {
                  var expected = [
                    ['div {color: red}', 'span {color: blue}'],
                    [
-                     'div[_ngcontent-%COMP%] {\ncolor: red;\n}',
+                     'div[_ngcontent-%COMP%] {color: red}',
                      'span[_ngcontent-%COMP%] {\ncolor: blue;\n}'
                    ]
                  ];

modules/angular2/test/web_workers/debug_tools/bootstrap.server.spec.dart

@@ -1,5 +1,6 @@
 library angular2.test.web_workers.debug_tools.bootstrap;
 
+import 'package:angular2/src/core/dom/html_adapter.dart';
 import "package:angular2/testing_internal.dart";
 import "package:angular2/src/core/reflection/reflection_capabilities.dart";
 import "package:angular2/src/core/reflection/reflection.dart";
@@ -9,6 +10,9 @@ import "../shared/web_worker_test_util.dart";
 import "dart:convert";
 
 main() {
+  Html5LibDomAdapter.makeCurrent();
+  testSetup();
+
   describe("bootstrapWebWorkerCommon", () {
     it("should bootstrap on a Dart VM", () {
       reflector.reflectionCapabilities = new ReflectionCapabilities();

npm-shrinkwrap.clean.json

@@ -2974,40 +2974,6 @@
         }
       }
     },
-    "css": {
-      "version": "2.2.0",
-      "resolved": "git://github.com/mlaval/css.git#9de8bc988d13c27d143486cf60ddf5f9deec0472",
-      "dependencies": {
-        "source-map": {
-          "version": "0.1.43",
-          "dependencies": {
-            "amdefine": {
-              "version": "0.1.0"
-            }
-          }
-        },
-        "source-map-resolve": {
-          "version": "0.3.1",
-          "dependencies": {
-            "source-map-url": {
-              "version": "0.3.0"
-            },
-            "atob": {
-              "version": "1.1.2"
-            },
-            "resolve-url": {
-              "version": "0.2.1"
-            }
-          }
-        },
-        "urix": {
-          "version": "0.1.0"
-        },
-        "inherits": {
-          "version": "2.0.1"
-        }
-      }
-    },
     "del": {
       "version": "1.1.1",
       "dependencies": {

npm-shrinkwrap.json

@@ -4589,57 +4589,6 @@
         }
       }
     },
-    "css": {
-      "version": "2.2.0",
-      "from": "git://github.com/mlaval/css.git#9de8bc988d13c27d143486cf60ddf5f9deec0472",
-      "resolved": "git://github.com/mlaval/css.git#9de8bc988d13c27d143486cf60ddf5f9deec0472",
-      "dependencies": {
-        "source-map": {
-          "version": "0.1.43",
-          "from": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-          "dependencies": {
-            "amdefine": {
-              "version": "0.1.0",
-              "from": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-              "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
-            }
-          }
-        },
-        "source-map-resolve": {
-          "version": "0.3.1",
-          "from": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.3.1.tgz",
-          "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.3.1.tgz",
-          "dependencies": {
-            "source-map-url": {
-              "version": "0.3.0",
-              "from": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.3.0.tgz",
-              "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.3.0.tgz"
-            },
-            "atob": {
-              "version": "1.1.2",
-              "from": "https://registry.npmjs.org/atob/-/atob-1.1.2.tgz",
-              "resolved": "https://registry.npmjs.org/atob/-/atob-1.1.2.tgz"
-            },
-            "resolve-url": {
-              "version": "0.2.1",
-              "from": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-              "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz"
-            }
-          }
-        },
-        "urix": {
-          "version": "0.1.0",
-          "from": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-          "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz"
-        },
-        "inherits": {
-          "version": "2.0.1",
-          "from": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-        }
-      }
-    },
     "del": {
       "version": "1.1.1",
       "from": "https://registry.npmjs.org/del/-/del-1.1.1.tgz",

package.json

@@ -52,7 +52,6 @@
     "chokidar": "^1.1.0",
     "clang-format": "^1.0.32",
     "conventional-changelog": "^0.2.1",
-    "css": "mlaval/css#issue65",
     "del": "~1",
     "es6-shim": "^0.33.3",
     "event-stream": "^3.1.5",