fix(shadow_css): strip comments and fix logic for parsing rules.

Closes #5037
Closes #5011

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

@@ -9,7 +9,7 @@ import {
   el,
   normalizeCSS
 } from 'angular2/testing_internal';
-import {ShadowCss, splitCurlyBlocks} from 'angular2/src/core/compiler/shadow_css';
+import {ShadowCss, processRules, CssRule} from 'angular2/src/core/compiler/shadow_css';
 
 import {RegExpWrapper, StringWrapper, isPresent} from 'angular2/src/core/facade/lang';
 
@@ -43,9 +43,16 @@ export function main() {
       expect(s(css, 'a')).toEqual(expected);
     });
 
+    it('should support newlines in the selector and content ', () => {
+      var css = 'one, \ntwo {\ncolor: red;}';
+      var expected = 'one[a], two[a] {color:red;}';
+      expect(s(css, 'a')).toEqual(expected);
+    });
+
     it('should handle media rules', () => {
-      var css = '@media screen and (max-width:800px) {div {font-size:50px;}}';
-      var expected = '@media screen and (max-width:800px) {div[a] {font-size:50px;}}';
+      var css = '@media screen and (max-width:800px, max-height:100%) {div {font-size:50px;}}';
+      var expected =
+          '@media screen and (max-width:800px, max-height:100%) {div[a] {font-size:50px;}}';
       expect(s(css, 'a')).toEqual(expected);
     });
 
@@ -162,19 +169,58 @@ export function main() {
       var css = s(styleStr, 'a');
       expect(css).toEqual('div[a] {height:calc(100% - 55px);}');
     });
+
+    it('should strip comments', () => { expect(s('/* x */b {c}', 'a')).toEqual('b[a] {c}'); });
+
+    it('should ignore special characters in comments',
+       () => { expect(s('/* {;, */b {c}', 'a')).toEqual('b[a] {c}'); });
+
+    it('should support multiline comments',
+       () => { expect(s('/* \n */b {c}', 'a')).toEqual('b[a] {c}'); });
   });
 
-  describe('splitCurlyBlocks', () => {
-    it('should split empty css', () => { expect(splitCurlyBlocks('')).toEqual([]); });
+  describe('processRules', () => {
+    describe('parse rules', () => {
+      function captureRules(input: string): CssRule[] {
+        var result = [];
+        processRules(input, (cssRule) => {
+          result.push(cssRule);
+          return cssRule;
+        });
+        return result;
+      }
 
-    it('should split css rules without body',
-       () => { expect(splitCurlyBlocks('a')).toEqual(['a', '']); });
+      it('should work with empty css', () => { expect(captureRules('')).toEqual([]); });
 
-    it('should split css rules with body',
-       () => { expect(splitCurlyBlocks('a {b}')).toEqual(['a ', '{b}']); });
+      it('should capture a rule without body',
+         () => { expect(captureRules('a;')).toEqual([new CssRule('a', '')]); });
 
-    it('should split css rules with nested rules', () => {
-      expect(splitCurlyBlocks('a {b {c}} d {e}')).toEqual(['a ', '{b {c}}', ' d ', '{e}']);
+      it('should capture css rules with body',
+         () => { expect(captureRules('a {b}')).toEqual([new CssRule('a', 'b')]); });
+
+      it('should capture css rules with nested rules', () => {
+        expect(captureRules('a {b {c}} d {e}'))
+            .toEqual([new CssRule('a', 'b {c}'), new CssRule('d', 'e')]);
+      });
+
+      it('should capture mutiple rules where some have no body', () => {
+        expect(captureRules('@import a ; b {c}'))
+            .toEqual([new CssRule('@import a', ''), new CssRule('b', 'c')]);
+      });
+    });
+
+    describe('modify rules', () => {
+      it('should allow to change the selector while preserving whitespaces', () => {
+        expect(processRules('@import a; b {c {d}} e {f}',
+                            (cssRule) => new CssRule(cssRule.selector + '2', cssRule.content)))
+            .toEqual('@import a2; b2 {c {d}} e2 {f}');
+      });
+
+      it('should allow to change the content', () => {
+        expect(processRules('a {b}',
+                            (cssRule) => new CssRule(cssRule.selector, cssRule.content + '2')))
+            .toEqual('a {b2}');
+      });
     });
   });
 }