refactor: move angular source to /packages rather than modules/@angular

packages/compiler/test/css_parser/css_lexer_spec.ts

@@ -0,0 +1,376 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {describe, expect, it} from '../../../core/testing/testing_internal';
+import {CssLexer, CssLexerMode, CssToken, CssTokenType, cssScannerError, getRawMessage, getToken} from '../../src/css_parser/css_lexer';
+
+export function main() {
+  function tokenize(
+      code: string, trackComments: boolean = false,
+      mode: CssLexerMode = CssLexerMode.ALL): CssToken[] {
+    const scanner = new CssLexer().scan(code, trackComments);
+    scanner.setMode(mode);
+
+    const tokens: CssToken[] = [];
+    let output = scanner.scan();
+    while (output != null) {
+      const error = output.error;
+      if (error != null) {
+        throw cssScannerError(getToken(error), getRawMessage(error));
+      }
+      tokens.push(output.token);
+      output = scanner.scan();
+    }
+
+    return tokens;
+  }
+
+  describe('CssLexer', () => {
+    it('should lex newline characters as whitespace when whitespace mode is on', () => {
+      const newlines = ['\n', '\r\n', '\r', '\f'];
+      newlines.forEach((line) => {
+        const token = tokenize(line, false, CssLexerMode.ALL_TRACK_WS)[0];
+        expect(token.type).toEqual(CssTokenType.Whitespace);
+      });
+    });
+
+    it('should combined newline characters as one newline token when whitespace mode is on', () => {
+      const newlines = ['\n', '\r\n', '\r', '\f'].join('');
+      const tokens = tokenize(newlines, false, CssLexerMode.ALL_TRACK_WS);
+      expect(tokens.length).toEqual(1);
+      expect(tokens[0].type).toEqual(CssTokenType.Whitespace);
+    });
+
+    it('should not consider whitespace or newline values at all when whitespace mode is off',
+       () => {
+         const newlines = ['\n', '\r\n', '\r', '\f'].join('');
+         const tokens = tokenize(newlines);
+         expect(tokens.length).toEqual(0);
+       });
+
+    it('should lex simple selectors and their inner properties', () => {
+      const cssCode = '\n' +
+          '  .selector { my-prop: my-value; }\n';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].type).toEqual(CssTokenType.Character);
+      expect(tokens[0].strValue).toEqual('.');
+
+      expect(tokens[1].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[1].strValue).toEqual('selector');
+
+      expect(tokens[2].type).toEqual(CssTokenType.Character);
+      expect(tokens[2].strValue).toEqual('{');
+
+      expect(tokens[3].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[3].strValue).toEqual('my-prop');
+
+      expect(tokens[4].type).toEqual(CssTokenType.Character);
+      expect(tokens[4].strValue).toEqual(':');
+
+      expect(tokens[5].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[5].strValue).toEqual('my-value');
+
+      expect(tokens[6].type).toEqual(CssTokenType.Character);
+      expect(tokens[6].strValue).toEqual(';');
+
+      expect(tokens[7].type).toEqual(CssTokenType.Character);
+      expect(tokens[7].strValue).toEqual('}');
+    });
+
+    it('should capture the column and line values for each token', () => {
+      const cssCode = '#id {\n' +
+          '  prop:value;\n' +
+          '}';
+
+      const tokens = tokenize(cssCode);
+
+      // #
+      expect(tokens[0].type).toEqual(CssTokenType.Character);
+      expect(tokens[0].column).toEqual(0);
+      expect(tokens[0].line).toEqual(0);
+
+      // id
+      expect(tokens[1].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[1].column).toEqual(1);
+      expect(tokens[1].line).toEqual(0);
+
+      // {
+      expect(tokens[2].type).toEqual(CssTokenType.Character);
+      expect(tokens[2].column).toEqual(4);
+      expect(tokens[2].line).toEqual(0);
+
+      // prop
+      expect(tokens[3].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[3].column).toEqual(2);
+      expect(tokens[3].line).toEqual(1);
+
+      // :
+      expect(tokens[4].type).toEqual(CssTokenType.Character);
+      expect(tokens[4].column).toEqual(6);
+      expect(tokens[4].line).toEqual(1);
+
+      // value
+      expect(tokens[5].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[5].column).toEqual(7);
+      expect(tokens[5].line).toEqual(1);
+
+      // ;
+      expect(tokens[6].type).toEqual(CssTokenType.Character);
+      expect(tokens[6].column).toEqual(12);
+      expect(tokens[6].line).toEqual(1);
+
+      // }
+      expect(tokens[7].type).toEqual(CssTokenType.Character);
+      expect(tokens[7].column).toEqual(0);
+      expect(tokens[7].line).toEqual(2);
+    });
+
+    it('should lex quoted strings and escape accordingly', () => {
+      const cssCode = 'prop: \'some { value } \\\' that is quoted\'';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[1].type).toEqual(CssTokenType.Character);
+      expect(tokens[2].type).toEqual(CssTokenType.String);
+      expect(tokens[2].strValue).toEqual('\'some { value } \\\' that is quoted\'');
+    });
+
+    it('should treat attribute operators as regular characters', () => {
+      tokenize('^|~+*').forEach((token) => { expect(token.type).toEqual(CssTokenType.Character); });
+    });
+
+    it('should lex numbers properly and set them as numbers', () => {
+      const cssCode = '0 1 -2 3.0 -4.001';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].type).toEqual(CssTokenType.Number);
+      expect(tokens[0].strValue).toEqual('0');
+
+      expect(tokens[1].type).toEqual(CssTokenType.Number);
+      expect(tokens[1].strValue).toEqual('1');
+
+      expect(tokens[2].type).toEqual(CssTokenType.Number);
+      expect(tokens[2].strValue).toEqual('-2');
+
+      expect(tokens[3].type).toEqual(CssTokenType.Number);
+      expect(tokens[3].strValue).toEqual('3.0');
+
+      expect(tokens[4].type).toEqual(CssTokenType.Number);
+      expect(tokens[4].strValue).toEqual('-4.001');
+    });
+
+    it('should lex @keywords', () => {
+      const cssCode = '@import()@something';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].type).toEqual(CssTokenType.AtKeyword);
+      expect(tokens[0].strValue).toEqual('@import');
+
+      expect(tokens[1].type).toEqual(CssTokenType.Character);
+      expect(tokens[1].strValue).toEqual('(');
+
+      expect(tokens[2].type).toEqual(CssTokenType.Character);
+      expect(tokens[2].strValue).toEqual(')');
+
+      expect(tokens[3].type).toEqual(CssTokenType.AtKeyword);
+      expect(tokens[3].strValue).toEqual('@something');
+    });
+
+    it('should still lex a number even if it has a dimension suffix', () => {
+      const cssCode = '40% is 40 percent';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].type).toEqual(CssTokenType.Number);
+      expect(tokens[0].strValue).toEqual('40');
+
+      expect(tokens[1].type).toEqual(CssTokenType.Character);
+      expect(tokens[1].strValue).toEqual('%');
+
+      expect(tokens[2].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[2].strValue).toEqual('is');
+
+      expect(tokens[3].type).toEqual(CssTokenType.Number);
+      expect(tokens[3].strValue).toEqual('40');
+    });
+
+    it('should allow escaped character and unicode character-strings in CSS selectors', () => {
+      const cssCode = '\\123456 .some\\thing \{\}';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[0].strValue).toEqual('\\123456');
+
+      expect(tokens[1].type).toEqual(CssTokenType.Character);
+      expect(tokens[2].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[2].strValue).toEqual('some\\thing');
+    });
+
+    it('should distinguish identifiers and numbers from special characters', () => {
+      const cssCode = 'one*two=-4+three-4-equals_value$';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[0].strValue).toEqual('one');
+
+      expect(tokens[1].type).toEqual(CssTokenType.Character);
+      expect(tokens[1].strValue).toEqual('*');
+
+      expect(tokens[2].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[2].strValue).toEqual('two');
+
+      expect(tokens[3].type).toEqual(CssTokenType.Character);
+      expect(tokens[3].strValue).toEqual('=');
+
+      expect(tokens[4].type).toEqual(CssTokenType.Number);
+      expect(tokens[4].strValue).toEqual('-4');
+
+      expect(tokens[5].type).toEqual(CssTokenType.Character);
+      expect(tokens[5].strValue).toEqual('+');
+
+      expect(tokens[6].type).toEqual(CssTokenType.Identifier);
+      expect(tokens[6].strValue).toEqual('three-4-equals_value');
+
+      expect(tokens[7].type).toEqual(CssTokenType.Character);
+      expect(tokens[7].strValue).toEqual('$');
+    });
+
+    it('should filter out comments and whitespace by default', () => {
+      const cssCode = '.selector /* comment */ { /* value */ }';
+      const tokens = tokenize(cssCode);
+
+      expect(tokens[0].strValue).toEqual('.');
+      expect(tokens[1].strValue).toEqual('selector');
+      expect(tokens[2].strValue).toEqual('{');
+      expect(tokens[3].strValue).toEqual('}');
+    });
+
+    it('should track comments when the flag is set to true', () => {
+      const cssCode = '.selector /* comment */ { /* value */ }';
+      const trackComments = true;
+      const tokens = tokenize(cssCode, trackComments, CssLexerMode.ALL_TRACK_WS);
+
+      expect(tokens[0].strValue).toEqual('.');
+      expect(tokens[1].strValue).toEqual('selector');
+      expect(tokens[2].strValue).toEqual(' ');
+
+      expect(tokens[3].type).toEqual(CssTokenType.Comment);
+      expect(tokens[3].strValue).toEqual('/* comment */');
+
+      expect(tokens[4].strValue).toEqual(' ');
+      expect(tokens[5].strValue).toEqual('{');
+      expect(tokens[6].strValue).toEqual(' ');
+
+      expect(tokens[7].type).toEqual(CssTokenType.Comment);
+      expect(tokens[7].strValue).toEqual('/* value */');
+    });
+
+    describe('Selector Mode', () => {
+      it('should throw an error if a selector is being parsed while in the wrong mode', () => {
+        const cssCode = '.class > tag';
+
+        let capturedMessage: string;
+        try {
+          tokenize(cssCode, false, CssLexerMode.STYLE_BLOCK);
+        } catch (e) {
+          capturedMessage = getRawMessage(e);
+        }
+
+        expect(capturedMessage).toMatch(/Unexpected character \[\>\] at column 0:7 in expression/g);
+        capturedMessage = null;
+
+        try {
+          tokenize(cssCode, false, CssLexerMode.SELECTOR);
+        } catch (e) {
+          capturedMessage = getRawMessage(e);
+        }
+
+        expect(capturedMessage).toEqual(null);
+      });
+    });
+
+    describe('Attribute Mode', () => {
+      it('should consider attribute selectors as valid input and throw when an invalid modifier is used',
+         () => {
+           function tokenizeAttr(modifier: string) {
+             const cssCode = 'value' + modifier + '=\'something\'';
+             return tokenize(cssCode, false, CssLexerMode.ATTRIBUTE_SELECTOR);
+           }
+
+           expect(tokenizeAttr('*').length).toEqual(4);
+           expect(tokenizeAttr('|').length).toEqual(4);
+           expect(tokenizeAttr('^').length).toEqual(4);
+           expect(tokenizeAttr('$').length).toEqual(4);
+           expect(tokenizeAttr('~').length).toEqual(4);
+           expect(tokenizeAttr('').length).toEqual(3);
+
+           expect(() => { tokenizeAttr('+'); }).toThrow();
+         });
+    });
+
+    describe('Media Query Mode', () => {
+      it('should validate media queries with a reduced subset of valid characters', () => {
+        function tokenizeQuery(code: string) {
+          return tokenize(code, false, CssLexerMode.MEDIA_QUERY);
+        }
+
+        // the reason why the numbers are so high is because MediaQueries keep
+        // track of the whitespace values
+        expect(tokenizeQuery('(prop: value)').length).toEqual(5);
+        expect(tokenizeQuery('(prop: value) and (prop2: value2)').length).toEqual(11);
+        expect(tokenizeQuery('tv and (prop: value)').length).toEqual(7);
+        expect(tokenizeQuery('print and ((prop: value) or (prop2: value2))').length).toEqual(15);
+        expect(tokenizeQuery('(content: \'something $ crazy inside &\')').length).toEqual(5);
+
+        expect(() => { tokenizeQuery('(max-height: 10 + 20)'); }).toThrow();
+
+        expect(() => { tokenizeQuery('(max-height: fifty < 100)'); }).toThrow();
+      });
+    });
+
+    describe('Pseudo Selector Mode', () => {
+      it('should validate pseudo selector identifiers with a reduced subset of valid characters',
+         () => {
+           function tokenizePseudo(code: string, withArgs = false): CssToken[] {
+             const mode = withArgs ? CssLexerMode.PSEUDO_SELECTOR_WITH_ARGUMENTS :
+                                     CssLexerMode.PSEUDO_SELECTOR;
+             return tokenize(code, false, mode);
+           }
+
+           expect(tokenizePseudo('hover').length).toEqual(1);
+           expect(tokenizePseudo('focus').length).toEqual(1);
+           expect(tokenizePseudo('lang(en-us)', true).length).toEqual(4);
+
+           expect(() => { tokenizePseudo('lang(something:broken)', true); }).toThrow();
+
+           expect(() => { tokenizePseudo('not(.selector)', true); }).toThrow();
+         });
+    });
+
+    describe(
+        'Style Block Mode', () => {
+          it('should style blocks with a reduced subset of valid characters',
+             () => {
+               function tokenizeStyles(code: string) {
+                 return tokenize(code, false, CssLexerMode.STYLE_BLOCK);
+               }
+
+               expect(tokenizeStyles(`
+          key: value;
+          prop: 100;
+          style: value3!important;
+        `).length).toEqual(14);
+
+               expect(() => tokenizeStyles(` key$: value; `)).toThrow();
+               expect(() => tokenizeStyles(` key: value$; `)).toThrow();
+               expect(() => tokenizeStyles(` key: value + 10; `)).toThrow();
+               expect(() => tokenizeStyles(` key: &value; `)).toThrow();
+             });
+        });
+  });
+}

packages/compiler/test/css_parser/css_parser_spec.ts

@@ -0,0 +1,802 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+
+import {describe, expect, it} from '../../../core/testing/testing_internal';
+import {CssBlockAst, CssBlockDefinitionRuleAst, CssBlockRuleAst, CssDefinitionAst, CssInlineRuleAst, CssKeyframeDefinitionAst, CssKeyframeRuleAst, CssMediaQueryRuleAst, CssSelectorRuleAst, CssStyleSheetAst, CssStyleValueAst} from '../../src/css_parser/css_ast';
+import {BlockType, CssParseError, CssParser, CssToken, ParsedCssResult} from '../../src/css_parser/css_parser';
+import {ParseLocation} from '../../src/parse_util';
+
+export function assertTokens(tokens: CssToken[], valuesArr: string[]) {
+  for (let i = 0; i < tokens.length; i++) {
+    expect(tokens[i].strValue == valuesArr[i]);
+  }
+}
+
+export function main() {
+  describe('CssParser', () => {
+    function parse(css: string): ParsedCssResult {
+      return new CssParser().parse(css, 'some-fake-css-file.css');
+    }
+
+    function makeAst(css: string): CssStyleSheetAst {
+      const output = parse(css);
+      const errors = output.errors;
+      if (errors.length > 0) {
+        throw new Error(errors.map((error: CssParseError) => error.msg).join(', '));
+      }
+      return output.ast;
+    }
+
+    it('should parse CSS into a stylesheet Ast', () => {
+      const styles = '.selector { prop: value123; }';
+
+      const ast = makeAst(styles);
+      expect(ast.rules.length).toEqual(1);
+
+      const rule = <CssSelectorRuleAst>ast.rules[0];
+      const selector = rule.selectors[0];
+      expect(selector.strValue).toEqual('.selector');
+
+      const block: CssBlockAst = rule.block;
+      expect(block.entries.length).toEqual(1);
+
+      const definition = <CssDefinitionAst>block.entries[0];
+      expect(definition.property.strValue).toEqual('prop');
+
+      const value = <CssStyleValueAst>definition.value;
+      expect(value.tokens[0].strValue).toEqual('value123');
+    });
+
+    it('should parse multiple CSS selectors sharing the same set of styles', () => {
+      const styles = `
+        .class, #id, tag, [attr], key + value, * value, :-moz-any-link {
+          prop: value123;
+        }
+      `;
+
+      const ast = makeAst(styles);
+      expect(ast.rules.length).toEqual(1);
+
+      const rule = <CssSelectorRuleAst>ast.rules[0];
+      expect(rule.selectors.length).toBe(7);
+
+      const classRule = rule.selectors[0];
+      const idRule = rule.selectors[1];
+      const tagRule = rule.selectors[2];
+      const attrRule = rule.selectors[3];
+      const plusOpRule = rule.selectors[4];
+      const starOpRule = rule.selectors[5];
+      const mozRule = rule.selectors[6];
+
+      assertTokens(classRule.selectorParts[0].tokens, ['.', 'class']);
+      assertTokens(idRule.selectorParts[0].tokens, ['.', 'class']);
+      assertTokens(attrRule.selectorParts[0].tokens, ['[', 'attr', ']']);
+
+      assertTokens(plusOpRule.selectorParts[0].tokens, ['key']);
+      expect(plusOpRule.selectorParts[0].operator.strValue).toEqual('+');
+      assertTokens(plusOpRule.selectorParts[1].tokens, ['value']);
+
+      assertTokens(starOpRule.selectorParts[0].tokens, ['*']);
+      assertTokens(starOpRule.selectorParts[1].tokens, ['value']);
+
+      assertTokens(mozRule.selectorParts[0].pseudoSelectors[0].tokens, [':', '-moz-any-link']);
+
+      const style1 = <CssDefinitionAst>rule.block.entries[0];
+      expect(style1.property.strValue).toEqual('prop');
+      assertTokens(style1.value.tokens, ['value123']);
+    });
+
+    it('should parse keyframe rules', () => {
+      const styles = `
+        @keyframes rotateMe {
+          from {
+            transform: rotate(-360deg);
+          }
+          50% {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      `;
+
+      const ast = makeAst(styles);
+      expect(ast.rules.length).toEqual(1);
+
+      const rule = <CssKeyframeRuleAst>ast.rules[0];
+      expect(rule.name.strValue).toEqual('rotateMe');
+
+      const block = <CssBlockAst>rule.block;
+      const fromRule = <CssKeyframeDefinitionAst>block.entries[0];
+
+      expect(fromRule.name.strValue).toEqual('from');
+      const fromStyle = <CssDefinitionAst>(<CssBlockAst>fromRule.block).entries[0];
+      expect(fromStyle.property.strValue).toEqual('transform');
+      assertTokens(fromStyle.value.tokens, ['rotate', '(', '-360', 'deg', ')']);
+
+      const midRule = <CssKeyframeDefinitionAst>block.entries[1];
+
+      expect(midRule.name.strValue).toEqual('50%');
+      const midStyle = <CssDefinitionAst>(<CssBlockAst>midRule.block).entries[0];
+      expect(midStyle.property.strValue).toEqual('transform');
+      assertTokens(midStyle.value.tokens, ['rotate', '(', '0', 'deg', ')']);
+
+      const toRule = <CssKeyframeDefinitionAst>block.entries[2];
+
+      expect(toRule.name.strValue).toEqual('to');
+      const toStyle = <CssDefinitionAst>(<CssBlockAst>toRule.block).entries[0];
+      expect(toStyle.property.strValue).toEqual('transform');
+      assertTokens(toStyle.value.tokens, ['rotate', '(', '360', 'deg', ')']);
+    });
+
+    it('should parse media queries into a stylesheet Ast', () => {
+      const styles = `
+        @media all and (max-width:100px) {
+          .selector {
+            prop: value123;
+          }
+        }
+      `;
+
+      const ast = makeAst(styles);
+      expect(ast.rules.length).toEqual(1);
+
+      const rule = <CssMediaQueryRuleAst>ast.rules[0];
+      assertTokens(rule.query.tokens, ['all', 'and', '(', 'max-width', ':', '100', 'px', ')']);
+
+      const block = <CssBlockAst>rule.block;
+      expect(block.entries.length).toEqual(1);
+
+      const rule2 = <CssSelectorRuleAst>block.entries[0];
+      expect(rule2.selectors[0].strValue).toEqual('.selector');
+
+      const block2 = <CssBlockAst>rule2.block;
+      expect(block2.entries.length).toEqual(1);
+    });
+
+    it('should parse inline CSS values', () => {
+      const styles = `
+        @import url('remote.css');
+        @charset "UTF-8";
+        @namespace ng url(http://angular.io/namespace/ng);
+      `;
+
+      const ast = makeAst(styles);
+
+      const importRule = <CssInlineRuleAst>ast.rules[0];
+      expect(importRule.type).toEqual(BlockType.Import);
+      assertTokens(importRule.value.tokens, ['url', '(', 'remote', '.', 'css', ')']);
+
+      const charsetRule = <CssInlineRuleAst>ast.rules[1];
+      expect(charsetRule.type).toEqual(BlockType.Charset);
+      assertTokens(charsetRule.value.tokens, ['UTF-8']);
+
+      const namespaceRule = <CssInlineRuleAst>ast.rules[2];
+      expect(namespaceRule.type).toEqual(BlockType.Namespace);
+      assertTokens(
+          namespaceRule.value.tokens, ['ng', 'url', '(', 'http://angular.io/namespace/ng', ')']);
+    });
+
+    it('should parse CSS values that contain functions and leave the inner function data untokenized',
+       () => {
+         const styles = `
+        .class {
+          background: url(matias.css);
+          animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+          height: calc(100% - 50px);
+          background-image: linear-gradient( 45deg, rgba(100, 0, 0, 0.5), black );
+        }
+      `;
+
+         const ast = makeAst(styles);
+         expect(ast.rules.length).toEqual(1);
+
+         const defs = (<CssSelectorRuleAst>ast.rules[0]).block.entries;
+         expect(defs.length).toEqual(4);
+
+         assertTokens((<CssDefinitionAst>defs[0]).value.tokens, ['url', '(', 'matias.css', ')']);
+         assertTokens(
+             (<CssDefinitionAst>defs[1]).value.tokens,
+             ['cubic-bezier', '(', '0.755, 0.050, 0.855, 0.060', ')']);
+         assertTokens((<CssDefinitionAst>defs[2]).value.tokens, ['calc', '(', '100% - 50px', ')']);
+         assertTokens(
+             (<CssDefinitionAst>defs[3]).value.tokens,
+             ['linear-gradient', '(', '45deg, rgba(100, 0, 0, 0.5), black', ')']);
+       });
+
+    it('should parse un-named block-level CSS values', () => {
+      const styles = `
+        @font-face {
+          font-family: "Matias";
+          font-weight: bold;
+          src: url(font-face.ttf);
+        }
+        @viewport {
+          max-width: 100px;
+          min-height: 1000px;
+        }
+      `;
+
+      const ast = makeAst(styles);
+
+      const fontFaceRule = <CssBlockRuleAst>ast.rules[0];
+      expect(fontFaceRule.type).toEqual(BlockType.FontFace);
+      expect(fontFaceRule.block.entries.length).toEqual(3);
+
+      const viewportRule = <CssBlockRuleAst>ast.rules[1];
+      expect(viewportRule.type).toEqual(BlockType.Viewport);
+      expect(viewportRule.block.entries.length).toEqual(2);
+    });
+
+    it('should parse multiple levels of semicolons', () => {
+      const styles = `
+        ;;;
+        @import url('something something')
+        ;;;;;;;;
+        ;;;;;;;;
+        ;@font-face {
+          ;src   :   url(font-face.ttf);;;;;;;;
+          ;;;-webkit-animation:my-animation
+        };;;
+        @media all and (max-width:100px)
+        {;
+          .selector {prop: value123;};
+          ;.selector2{prop:1}}
+      `;
+
+      const ast = makeAst(styles);
+
+      const importRule = <CssInlineRuleAst>ast.rules[0];
+      expect(importRule.type).toEqual(BlockType.Import);
+      assertTokens(importRule.value.tokens, ['url', '(', 'something something', ')']);
+
+      const fontFaceRule = <CssBlockRuleAst>ast.rules[1];
+      expect(fontFaceRule.type).toEqual(BlockType.FontFace);
+      expect(fontFaceRule.block.entries.length).toEqual(2);
+
+      const mediaQueryRule = <CssMediaQueryRuleAst>ast.rules[2];
+      assertTokens(
+          mediaQueryRule.query.tokens, ['all', 'and', '(', 'max-width', ':', '100', 'px', ')']);
+      expect(mediaQueryRule.block.entries.length).toEqual(2);
+    });
+
+    it('should throw an error if an unknown @value block rule is parsed', () => {
+      const styles = `
+        @matias { hello: there; }
+      `;
+
+      expect(() => {
+        makeAst(styles);
+      }).toThrowError(/^CSS Parse Error: The CSS "at" rule "@matias" is not allowed to used here/g);
+    });
+
+    it('should parse empty rules', () => {
+      const styles = `
+        .empty-rule { }
+        .somewhat-empty-rule { /* property: value; */ }
+        .non-empty-rule { property: value; }
+      `;
+
+      const ast = makeAst(styles);
+
+      const rules = ast.rules;
+      expect((<CssSelectorRuleAst>rules[0]).block.entries.length).toEqual(0);
+      expect((<CssSelectorRuleAst>rules[1]).block.entries.length).toEqual(0);
+      expect((<CssSelectorRuleAst>rules[2]).block.entries.length).toEqual(1);
+    });
+
+    it('should parse the @document rule', () => {
+      const styles = `
+        @document url(http://www.w3.org/),
+                       url-prefix(http://www.w3.org/Style/),
+                       domain(mozilla.org),
+                       regexp("https:.*")
+        {
+          /* CSS rules here apply to:
+             - The page "http://www.w3.org/".
+             - Any page whose URL begins with "http://www.w3.org/Style/"
+             - Any page whose URL's host is "mozilla.org" or ends with
+               ".mozilla.org"
+             - Any page whose URL starts with "https:" */
+
+          /* make the above-mentioned pages really ugly */
+          body {
+            color: purple;
+            background: yellow;
+          }
+        }
+      `;
+
+      const ast = makeAst(styles);
+
+      const rules = ast.rules;
+      const documentRule = <CssBlockDefinitionRuleAst>rules[0];
+      expect(documentRule.type).toEqual(BlockType.Document);
+
+      const rule = <CssSelectorRuleAst>documentRule.block.entries[0];
+      expect(rule.strValue).toEqual('body');
+    });
+
+    it('should parse the @page rule', () => {
+      const styles = `
+        @page one {
+          .selector { prop: value; }
+        }
+        @page two {
+          .selector2 { prop: value2; }
+        }
+      `;
+
+      const ast = makeAst(styles);
+
+      const rules = ast.rules;
+
+      const pageRule1 = <CssBlockDefinitionRuleAst>rules[0];
+      expect(pageRule1.query.strValue).toEqual('@page one');
+      expect(pageRule1.query.tokens[0].strValue).toEqual('one');
+      expect(pageRule1.type).toEqual(BlockType.Page);
+
+      const pageRule2 = <CssBlockDefinitionRuleAst>rules[1];
+      expect(pageRule2.query.strValue).toEqual('@page two');
+      expect(pageRule2.query.tokens[0].strValue).toEqual('two');
+      expect(pageRule2.type).toEqual(BlockType.Page);
+
+      const selectorOne = <CssSelectorRuleAst>pageRule1.block.entries[0];
+      expect(selectorOne.strValue).toEqual('.selector');
+
+      const selectorTwo = <CssSelectorRuleAst>pageRule2.block.entries[0];
+      expect(selectorTwo.strValue).toEqual('.selector2');
+    });
+
+    it('should parse the @supports rule', () => {
+      const styles = `
+        @supports (animation-name: "rotate") {
+          a:hover { animation: rotate 1s; }
+        }
+      `;
+
+      const ast = makeAst(styles);
+
+      const rules = ast.rules;
+
+      const supportsRule = <CssBlockDefinitionRuleAst>rules[0];
+      assertTokens(supportsRule.query.tokens, ['(', 'animation-name', ':', 'rotate', ')']);
+      expect(supportsRule.type).toEqual(BlockType.Supports);
+
+      const selectorOne = <CssSelectorRuleAst>supportsRule.block.entries[0];
+      expect(selectorOne.strValue).toEqual('a:hover');
+    });
+
+    it('should collect multiple errors during parsing', () => {
+      const styles = `
+        .class$value { something: something }
+        @custom { something: something }
+        #id { cool^: value }
+      `;
+
+      const output = parse(styles);
+      expect(output.errors.length).toEqual(3);
+    });
+
+    it('should recover from selector errors and continue parsing', () => {
+      const styles = `
+        tag& { key: value; }
+        .%tag { key: value; }
+        #tag$ { key: value; }
+      `;
+
+      const output = parse(styles);
+      const errors = output.errors;
+      const ast = output.ast;
+
+      expect(errors.length).toEqual(3);
+
+      expect(ast.rules.length).toEqual(3);
+
+      const rule1 = <CssSelectorRuleAst>ast.rules[0];
+      expect(rule1.selectors[0].strValue).toEqual('tag&');
+      expect(rule1.block.entries.length).toEqual(1);
+
+      const rule2 = <CssSelectorRuleAst>ast.rules[1];
+      expect(rule2.selectors[0].strValue).toEqual('.%tag');
+      expect(rule2.block.entries.length).toEqual(1);
+
+      const rule3 = <CssSelectorRuleAst>ast.rules[2];
+      expect(rule3.selectors[0].strValue).toEqual('#tag$');
+      expect(rule3.block.entries.length).toEqual(1);
+    });
+
+    it('should throw an error when parsing invalid CSS Selectors', () => {
+      const styles = '.class[[prop%=value}] { style: val; }';
+      const output = parse(styles);
+      const errors = output.errors;
+
+      expect(errors.length).toEqual(3);
+
+      expect(errors[0].msg).toMatch(/Unexpected character \[\[\] at column 0:7/g);
+
+      expect(errors[1].msg).toMatch(/Unexpected character \[%\] at column 0:12/g);
+
+      expect(errors[2].msg).toMatch(/Unexpected character \[}\] at column 0:19/g);
+    });
+
+    it('should throw an error if an attribute selector is not closed properly', () => {
+      const styles = '.class[prop=value { style: val; }';
+      const output = parse(styles);
+      const errors = output.errors;
+
+      expect(errors[0].msg).toMatch(/Unbalanced CSS attribute selector at column 0:12/g);
+    });
+
+    it('should throw an error if a pseudo function selector is not closed properly', () => {
+      const styles = 'body:lang(en { key:value; }';
+      const output = parse(styles);
+      const errors = output.errors;
+
+      expect(errors[0].msg)
+          .toMatch(/Character does not match expected Character value \("{" should match "\)"\)/);
+    });
+
+    it('should raise an error when a semi colon is missing from a CSS style/pair that isn\'t the last entry',
+       () => {
+         const styles = `.class {
+        color: red
+        background: blue
+      }`;
+
+         const output = parse(styles);
+         const errors = output.errors;
+
+         expect(errors.length).toEqual(1);
+
+         expect(errors[0].msg)
+             .toMatch(/The CSS key\/value definition did not end with a semicolon at column 1:15/g);
+       });
+
+    it('should parse the inner value of a :not() pseudo-selector as a CSS selector', () => {
+      const styles = `div:not(.ignore-this-div) {
+        prop: value;
+      }`;
+
+      const output = parse(styles);
+      const errors = output.errors;
+      const ast = output.ast;
+
+      expect(errors.length).toEqual(0);
+
+      const rule1 = <CssSelectorRuleAst>ast.rules[0];
+      expect(rule1.selectors.length).toEqual(1);
+
+      const simpleSelector = rule1.selectors[0].selectorParts[0];
+      assertTokens(simpleSelector.tokens, ['div']);
+
+      const pseudoSelector = simpleSelector.pseudoSelectors[0];
+      expect(pseudoSelector.name).toEqual('not');
+      assertTokens(pseudoSelector.tokens, ['.', 'ignore-this-div']);
+    });
+
+    it('should parse the inner selectors of a :host-context selector', () => {
+      const styles = `body > :host-context(.a, .b, .c:hover) {
+        prop: value;
+      }`;
+
+      const output = parse(styles);
+      const errors = output.errors;
+      const ast = output.ast;
+
+      expect(errors.length).toEqual(0);
+
+      const rule1 = <CssSelectorRuleAst>ast.rules[0];
+      expect(rule1.selectors.length).toEqual(1);
+
+      const simpleSelector = rule1.selectors[0].selectorParts[1];
+      const innerSelectors = simpleSelector.pseudoSelectors[0].innerSelectors;
+
+      assertTokens(innerSelectors[0].selectorParts[0].tokens, ['.', 'a']);
+      assertTokens(innerSelectors[1].selectorParts[0].tokens, ['.', 'b']);
+
+      const finalSelector = innerSelectors[2].selectorParts[0];
+      assertTokens(finalSelector.tokens, ['.', 'c', ':', 'hover']);
+      assertTokens(finalSelector.pseudoSelectors[0].tokens, [':', 'hover']);
+    });
+
+    it('should raise parse errors when CSS key/value pairs are invalid', () => {
+      const styles = `.class {
+        background color: value;
+        color: value
+        font-size;
+        font-weight
+      }`;
+
+      const output = parse(styles);
+      const errors = output.errors;
+
+      expect(errors.length).toEqual(4);
+
+      expect(errors[0].msg)
+          .toMatch(
+              /Identifier does not match expected Character value \("color" should match ":"\) at column 1:19/g);
+
+      expect(errors[1].msg)
+          .toMatch(/The CSS key\/value definition did not end with a semicolon at column 2:15/g);
+
+      expect(errors[2].msg)
+          .toMatch(/The CSS property was not paired with a style value at column 3:8/g);
+
+      expect(errors[3].msg)
+          .toMatch(/The CSS property was not paired with a style value at column 4:8/g);
+    });
+
+    it('should recover from CSS key/value parse errors', () => {
+      const styles = `
+        .problem-class { background color: red; color: white; }
+        .good-boy-class { background-color: red; color: white; }
+       `;
+
+      const output = parse(styles);
+      const ast = output.ast;
+
+      expect(ast.rules.length).toEqual(2);
+
+      const rule1 = <CssSelectorRuleAst>ast.rules[0];
+      expect(rule1.block.entries.length).toEqual(2);
+
+      const style1 = <CssDefinitionAst>rule1.block.entries[0];
+      expect(style1.property.strValue).toEqual('background color');
+      assertTokens(style1.value.tokens, ['red']);
+
+      const style2 = <CssDefinitionAst>rule1.block.entries[1];
+      expect(style2.property.strValue).toEqual('color');
+      assertTokens(style2.value.tokens, ['white']);
+    });
+
+    describe('location offsets', () => {
+      let styles: string;
+
+      function assertMatchesOffsetAndChar(
+          location: ParseLocation, expectedOffset: number, expectedChar: string): void {
+        expect(location.offset).toEqual(expectedOffset);
+        expect(styles[expectedOffset]).toEqual(expectedChar);
+      }
+
+      it('should collect the source span location of each AST node with regular selectors', () => {
+        styles = '.problem-class { border-top-right: 1px; color: white; }\n';
+        styles += '#good-boy-rule_ { background-color: #fe4; color: teal; }';
+
+        const output = parse(styles);
+        const ast = output.ast;
+        assertMatchesOffsetAndChar(ast.location.start, 0, '.');
+        assertMatchesOffsetAndChar(ast.location.end, 111, '}');
+
+        const rule1 = <CssSelectorRuleAst>ast.rules[0];
+        assertMatchesOffsetAndChar(rule1.location.start, 0, '.');
+        assertMatchesOffsetAndChar(rule1.location.end, 54, '}');
+
+        const rule2 = <CssSelectorRuleAst>ast.rules[1];
+        assertMatchesOffsetAndChar(rule2.location.start, 56, '#');
+        assertMatchesOffsetAndChar(rule2.location.end, 111, '}');
+
+        const selector1 = rule1.selectors[0];
+        assertMatchesOffsetAndChar(selector1.location.start, 0, '.');
+        assertMatchesOffsetAndChar(selector1.location.end, 1, 'p');  // problem-class
+
+        const selector2 = rule2.selectors[0];
+        assertMatchesOffsetAndChar(selector2.location.start, 56, '#');
+        assertMatchesOffsetAndChar(selector2.location.end, 57, 'g');  // good-boy-rule_
+
+        const block1 = rule1.block;
+        assertMatchesOffsetAndChar(block1.location.start, 15, '{');
+        assertMatchesOffsetAndChar(block1.location.end, 54, '}');
+
+        const block2 = rule2.block;
+        assertMatchesOffsetAndChar(block2.location.start, 72, '{');
+        assertMatchesOffsetAndChar(block2.location.end, 111, '}');
+
+        const block1def1 = <CssDefinitionAst>block1.entries[0];
+        assertMatchesOffsetAndChar(block1def1.location.start, 17, 'b');  // border-top-right
+        assertMatchesOffsetAndChar(block1def1.location.end, 36, 'p');    // px
+
+        const block1def2 = <CssDefinitionAst>block1.entries[1];
+        assertMatchesOffsetAndChar(block1def2.location.start, 40, 'c');  // color
+        assertMatchesOffsetAndChar(block1def2.location.end, 47, 'w');    // white
+
+        const block2def1 = <CssDefinitionAst>block2.entries[0];
+        assertMatchesOffsetAndChar(block2def1.location.start, 74, 'b');  // background-color
+        assertMatchesOffsetAndChar(block2def1.location.end, 93, 'f');    // fe4
+
+        const block2def2 = <CssDefinitionAst>block2.entries[1];
+        assertMatchesOffsetAndChar(block2def2.location.start, 98, 'c');  // color
+        assertMatchesOffsetAndChar(block2def2.location.end, 105, 't');   // teal
+
+        const block1value1 = block1def1.value;
+        assertMatchesOffsetAndChar(block1value1.location.start, 35, '1');
+        assertMatchesOffsetAndChar(block1value1.location.end, 36, 'p');
+
+        const block1value2 = block1def2.value;
+        assertMatchesOffsetAndChar(block1value2.location.start, 47, 'w');
+        assertMatchesOffsetAndChar(block1value2.location.end, 47, 'w');
+
+        const block2value1 = block2def1.value;
+        assertMatchesOffsetAndChar(block2value1.location.start, 92, '#');
+        assertMatchesOffsetAndChar(block2value1.location.end, 93, 'f');
+
+        const block2value2 = block2def2.value;
+        assertMatchesOffsetAndChar(block2value2.location.start, 105, 't');
+        assertMatchesOffsetAndChar(block2value2.location.end, 105, 't');
+      });
+
+      it('should collect the source span location of each AST node with media query data', () => {
+        styles = '@media (all and max-width: 100px) { a { display:none; } }';
+
+        const output = parse(styles);
+        const ast = output.ast;
+
+        const mediaQuery = <CssMediaQueryRuleAst>ast.rules[0];
+        assertMatchesOffsetAndChar(mediaQuery.location.start, 0, '@');
+        assertMatchesOffsetAndChar(mediaQuery.location.end, 56, '}');
+
+        const predicate = mediaQuery.query;
+        assertMatchesOffsetAndChar(predicate.location.start, 0, '@');
+        assertMatchesOffsetAndChar(predicate.location.end, 32, ')');
+
+        const rule = <CssSelectorRuleAst>mediaQuery.block.entries[0];
+        assertMatchesOffsetAndChar(rule.location.start, 36, 'a');
+        assertMatchesOffsetAndChar(rule.location.end, 54, '}');
+      });
+
+      it('should collect the source span location of each AST node with keyframe data', () => {
+        styles = '@keyframes rotateAndZoomOut { ';
+        styles += 'from { transform: rotate(0deg); } ';
+        styles += '100% { transform: rotate(360deg) scale(2); }';
+        styles += '}';
+
+        const output = parse(styles);
+        const ast = output.ast;
+
+        const keyframes = <CssKeyframeRuleAst>ast.rules[0];
+        assertMatchesOffsetAndChar(keyframes.location.start, 0, '@');
+        assertMatchesOffsetAndChar(keyframes.location.end, 108, '}');
+
+        const step1 = <CssKeyframeDefinitionAst>keyframes.block.entries[0];
+        assertMatchesOffsetAndChar(step1.location.start, 30, 'f');
+        assertMatchesOffsetAndChar(step1.location.end, 62, '}');
+
+        const step2 = <CssKeyframeDefinitionAst>keyframes.block.entries[1];
+        assertMatchesOffsetAndChar(step2.location.start, 64, '1');
+        assertMatchesOffsetAndChar(step2.location.end, 107, '}');
+      });
+
+      it('should collect the source span location of each AST node with an inline rule', () => {
+        styles = '@import url(something.css)';
+
+        const output = parse(styles);
+        const ast = output.ast;
+
+        const rule = <CssInlineRuleAst>ast.rules[0];
+        assertMatchesOffsetAndChar(rule.location.start, 0, '@');
+        assertMatchesOffsetAndChar(rule.location.end, 25, ')');
+
+        const value = rule.value;
+        assertMatchesOffsetAndChar(value.location.start, 8, 'u');
+        assertMatchesOffsetAndChar(value.location.end, 25, ')');
+      });
+
+      it('should property collect the start/end locations with an invalid stylesheet', () => {
+        styles = '#id { something: value';
+
+        const output = parse(styles);
+        const ast = output.ast;
+
+        assertMatchesOffsetAndChar(ast.location.start, 0, '#');
+        assertMatchesOffsetAndChar(ast.location.end, 22, undefined);
+      });
+    });
+
+    it('should parse minified CSS content properly', () => {
+      // this code was taken from the angular.io webpage's CSS code
+      const styles = `
+.is-hidden{display:none!important}
+.is-visible{display:block!important}
+.is-visually-hidden{height:1px;width:1px;overflow:hidden;opacity:0.01;position:absolute;bottom:0;right:0;z-index:1}
+.grid-fluid,.grid-fixed{margin:0 auto}
+.grid-fluid .c1,.grid-fixed .c1,.grid-fluid .c2,.grid-fixed .c2,.grid-fluid .c3,.grid-fixed .c3,.grid-fluid .c4,.grid-fixed .c4,.grid-fluid .c5,.grid-fixed .c5,.grid-fluid .c6,.grid-fixed .c6,.grid-fluid .c7,.grid-fixed .c7,.grid-fluid .c8,.grid-fixed .c8,.grid-fluid .c9,.grid-fixed .c9,.grid-fluid .c10,.grid-fixed .c10,.grid-fluid .c11,.grid-fixed .c11,.grid-fluid .c12,.grid-fixed .c12{display:inline;float:left}
+.grid-fluid .c1.grid-right,.grid-fixed .c1.grid-right,.grid-fluid .c2.grid-right,.grid-fixed .c2.grid-right,.grid-fluid .c3.grid-right,.grid-fixed .c3.grid-right,.grid-fluid .c4.grid-right,.grid-fixed .c4.grid-right,.grid-fluid .c5.grid-right,.grid-fixed .c5.grid-right,.grid-fluid .c6.grid-right,.grid-fixed .c6.grid-right,.grid-fluid .c7.grid-right,.grid-fixed .c7.grid-right,.grid-fluid .c8.grid-right,.grid-fixed .c8.grid-right,.grid-fluid .c9.grid-right,.grid-fixed .c9.grid-right,.grid-fluid .c10.grid-right,.grid-fixed .c10.grid-right,.grid-fluid .c11.grid-right,.grid-fixed .c11.grid-right,.grid-fluid .c12.grid-right,.grid-fixed .c12.grid-right{float:right}
+.grid-fluid .c1.nb,.grid-fixed .c1.nb,.grid-fluid .c2.nb,.grid-fixed .c2.nb,.grid-fluid .c3.nb,.grid-fixed .c3.nb,.grid-fluid .c4.nb,.grid-fixed .c4.nb,.grid-fluid .c5.nb,.grid-fixed .c5.nb,.grid-fluid .c6.nb,.grid-fixed .c6.nb,.grid-fluid .c7.nb,.grid-fixed .c7.nb,.grid-fluid .c8.nb,.grid-fixed .c8.nb,.grid-fluid .c9.nb,.grid-fixed .c9.nb,.grid-fluid .c10.nb,.grid-fixed .c10.nb,.grid-fluid .c11.nb,.grid-fixed .c11.nb,.grid-fluid .c12.nb,.grid-fixed .c12.nb{margin-left:0}
+.grid-fluid .c1.na,.grid-fixed .c1.na,.grid-fluid .c2.na,.grid-fixed .c2.na,.grid-fluid .c3.na,.grid-fixed .c3.na,.grid-fluid .c4.na,.grid-fixed .c4.na,.grid-fluid .c5.na,.grid-fixed .c5.na,.grid-fluid .c6.na,.grid-fixed .c6.na,.grid-fluid .c7.na,.grid-fixed .c7.na,.grid-fluid .c8.na,.grid-fixed .c8.na,.grid-fluid .c9.na,.grid-fixed .c9.na,.grid-fluid .c10.na,.grid-fixed .c10.na,.grid-fluid .c11.na,.grid-fixed .c11.na,.grid-fluid .c12.na,.grid-fixed .c12.na{margin-right:0}
+       `;
+
+      const output = parse(styles);
+      const errors = output.errors;
+      expect(errors.length).toEqual(0);
+
+      const ast = output.ast;
+      expect(ast.rules.length).toEqual(8);
+    });
+
+    it('should parse a snippet of keyframe code from animate.css properly', () => {
+      // this code was taken from the angular.io webpage's CSS code
+      const styles = `
+@charset "UTF-8";
+
+/*!
+ * animate.css -http://daneden.me/animate
+ * Version - 3.5.1
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2016 Daniel Eden
+ */
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+.animated.flipOutX,
+.animated.flipOutY,
+.animated.bounceIn,
+.animated.bounceOut {
+  -webkit-animation-duration: .75s;
+  animation-duration: .75s;
+}
+
+@-webkit-keyframes bounce {
+  from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    -webkit-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+  }
+
+  40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -30px, 0);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -15px, 0);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0,-4px,0);
+    transform: translate3d(0,-4px,0);
+  }
+}
+       `;
+
+      const output = parse(styles);
+      const errors = output.errors;
+      expect(errors.length).toEqual(0);
+
+      const ast = output.ast;
+      expect(ast.rules.length).toEqual(6);
+
+      const finalRule = <CssBlockRuleAst>ast.rules[ast.rules.length - 1];
+      expect(finalRule.type).toEqual(BlockType.Keyframes);
+      expect(finalRule.block.entries.length).toEqual(4);
+    });
+  });
+}

packages/compiler/test/css_parser/css_visitor_spec.ts

@@ -0,0 +1,321 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+
+import {beforeEach, describe, expect, it} from '../../../core/testing/testing_internal';
+import {CssAst, CssAstVisitor, CssAtRulePredicateAst, CssBlockAst, CssDefinitionAst, CssInlineRuleAst, CssKeyframeDefinitionAst, CssKeyframeRuleAst, CssMediaQueryRuleAst, CssPseudoSelectorAst, CssRuleAst, CssSelectorAst, CssSelectorRuleAst, CssSimpleSelectorAst, CssStyleSheetAst, CssStyleValueAst, CssStylesBlockAst, CssUnknownRuleAst, CssUnknownTokenListAst} from '../../src/css_parser/css_ast';
+import {BlockType, CssParseError, CssParser, CssToken} from '../../src/css_parser/css_parser';
+
+function _assertTokens(tokens: CssToken[], valuesArr: string[]): void {
+  expect(tokens.length).toEqual(valuesArr.length);
+  for (let i = 0; i < tokens.length; i++) {
+    expect(tokens[i].strValue == valuesArr[i]);
+  }
+}
+
+class MyVisitor implements CssAstVisitor {
+  captures: {[key: string]: any[]} = {};
+
+  /**
+   * @internal
+   */
+  _capture(method: string, ast: CssAst, context: any) {
+    this.captures[method] = this.captures[method] || [];
+    this.captures[method].push([ast, context]);
+  }
+
+  constructor(ast: CssStyleSheetAst, context: any) { ast.visit(this, context); }
+
+  visitCssValue(ast: CssStyleValueAst, context: any): void {
+    this._capture('visitCssValue', ast, context);
+  }
+
+  visitCssInlineRule(ast: CssInlineRuleAst, context: any): void {
+    this._capture('visitCssInlineRule', ast, context);
+  }
+
+  visitCssAtRulePredicate(ast: CssAtRulePredicateAst, context: any): void {
+    this._capture('visitCssAtRulePredicate', ast, context);
+  }
+
+  visitCssKeyframeRule(ast: CssKeyframeRuleAst, context: any): void {
+    this._capture('visitCssKeyframeRule', ast, context);
+    ast.block.visit(this, context);
+  }
+
+  visitCssKeyframeDefinition(ast: CssKeyframeDefinitionAst, context: any): void {
+    this._capture('visitCssKeyframeDefinition', ast, context);
+    ast.block.visit(this, context);
+  }
+
+  visitCssMediaQueryRule(ast: CssMediaQueryRuleAst, context: any): void {
+    this._capture('visitCssMediaQueryRule', ast, context);
+    ast.query.visit(this, context);
+    ast.block.visit(this, context);
+  }
+
+  visitCssSelectorRule(ast: CssSelectorRuleAst, context: any): void {
+    this._capture('visitCssSelectorRule', ast, context);
+    ast.selectors.forEach((selAst: CssSelectorAst) => { selAst.visit(this, context); });
+    ast.block.visit(this, context);
+  }
+
+  visitCssSelector(ast: CssSelectorAst, context: any): void {
+    this._capture('visitCssSelector', ast, context);
+    ast.selectorParts.forEach(
+        (simpleAst: CssSimpleSelectorAst) => { simpleAst.visit(this, context); });
+  }
+
+  visitCssSimpleSelector(ast: CssSimpleSelectorAst, context: any): void {
+    this._capture('visitCssSimpleSelector', ast, context);
+    ast.pseudoSelectors.forEach(
+        (pseudoAst: CssPseudoSelectorAst) => { pseudoAst.visit(this, context); });
+  }
+
+  visitCssDefinition(ast: CssDefinitionAst, context: any): void {
+    this._capture('visitCssDefinition', ast, context);
+    ast.value.visit(this, context);
+  }
+
+  visitCssBlock(ast: CssBlockAst, context: any): void {
+    this._capture('visitCssBlock', ast, context);
+    ast.entries.forEach((entryAst: CssAst) => { entryAst.visit(this, context); });
+  }
+
+  visitCssStylesBlock(ast: CssStylesBlockAst, context: any): void {
+    this._capture('visitCssStylesBlock', ast, context);
+    ast.definitions.forEach(
+        (definitionAst: CssDefinitionAst) => { definitionAst.visit(this, context); });
+  }
+
+  visitCssStyleSheet(ast: CssStyleSheetAst, context: any): void {
+    this._capture('visitCssStyleSheet', ast, context);
+    ast.rules.forEach((ruleAst: CssRuleAst) => { ruleAst.visit(this, context); });
+  }
+
+  visitCssUnknownRule(ast: CssUnknownRuleAst, context: any): void {
+    this._capture('visitCssUnknownRule', ast, context);
+  }
+
+  visitCssUnknownTokenList(ast: CssUnknownTokenListAst, context: any): void {
+    this._capture('visitCssUnknownTokenList', ast, context);
+  }
+
+  visitCssPseudoSelector(ast: CssPseudoSelectorAst, context: any): void {
+    this._capture('visitCssPseudoSelector', ast, context);
+  }
+}
+
+function _getCaptureAst(capture: any[], index = 0): CssAst {
+  return <CssAst>capture[index][0];
+}
+
+export function main() {
+  function parse(cssCode: string, ignoreErrors: boolean = false) {
+    const output = new CssParser().parse(cssCode, 'some-fake-css-file.css');
+    const errors = output.errors;
+    if (errors.length > 0 && !ignoreErrors) {
+      throw new Error(errors.map((error: CssParseError) => error.msg).join(', '));
+    }
+    return output.ast;
+  }
+
+  describe('CSS parsing and visiting', () => {
+    let ast: CssStyleSheetAst;
+    const context = {};
+
+    beforeEach(() => {
+      const cssCode = `
+        .rule1 { prop1: value1 }
+        .rule2 { prop2: value2 }
+
+        @media all (max-width: 100px) {
+          #id { prop3 :value3; }
+        }
+
+        @import url(file.css);
+
+        @keyframes rotate {
+          from {
+            prop4: value4;
+          }
+          50%, 100% {
+            prop5: value5;
+          }
+        }
+      `;
+      ast = parse(cssCode);
+    });
+
+    it('should parse and visit a stylesheet', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssStyleSheet'];
+
+      expect(captures.length).toEqual(1);
+
+      const capture = captures[0];
+      expect(capture[0]).toEqual(ast);
+      expect(capture[1]).toEqual(context);
+    });
+
+    it('should parse and visit each of the stylesheet selectors', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssSelectorRule'];
+
+      expect(captures.length).toEqual(3);
+
+      const rule1 = <CssSelectorRuleAst>_getCaptureAst(captures, 0);
+      expect(rule1).toEqual(ast.rules[0]);
+
+      const firstSelector = rule1.selectors[0];
+      const firstSimpleSelector = firstSelector.selectorParts[0];
+      _assertTokens(firstSimpleSelector.tokens, ['.', 'rule1']);
+
+      const rule2 = <CssSelectorRuleAst>_getCaptureAst(captures, 1);
+      expect(rule2).toEqual(ast.rules[1]);
+
+      const secondSelector = rule2.selectors[0];
+      const secondSimpleSelector = secondSelector.selectorParts[0];
+      _assertTokens(secondSimpleSelector.tokens, ['.', 'rule2']);
+
+      const rule3 = <CssSelectorRuleAst>_getCaptureAst(captures, 2);
+      expect(rule3).toEqual((<CssMediaQueryRuleAst>ast.rules[2]).block.entries[0]);
+
+      const thirdSelector = rule3.selectors[0];
+      const thirdSimpleSelector = thirdSelector.selectorParts[0];
+      _assertTokens(thirdSimpleSelector.tokens, ['#', 'rule3']);
+    });
+
+    it('should parse and visit each of the stylesheet style key/value definitions', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssDefinition'];
+
+      expect(captures.length).toEqual(5);
+
+      const def1 = <CssDefinitionAst>_getCaptureAst(captures, 0);
+      expect(def1.property.strValue).toEqual('prop1');
+      expect(def1.value.tokens[0].strValue).toEqual('value1');
+
+      const def2 = <CssDefinitionAst>_getCaptureAst(captures, 1);
+      expect(def2.property.strValue).toEqual('prop2');
+      expect(def2.value.tokens[0].strValue).toEqual('value2');
+
+      const def3 = <CssDefinitionAst>_getCaptureAst(captures, 2);
+      expect(def3.property.strValue).toEqual('prop3');
+      expect(def3.value.tokens[0].strValue).toEqual('value3');
+
+      const def4 = <CssDefinitionAst>_getCaptureAst(captures, 3);
+      expect(def4.property.strValue).toEqual('prop4');
+      expect(def4.value.tokens[0].strValue).toEqual('value4');
+
+      const def5 = <CssDefinitionAst>_getCaptureAst(captures, 4);
+      expect(def5.property.strValue).toEqual('prop5');
+      expect(def5.value.tokens[0].strValue).toEqual('value5');
+    });
+
+    it('should parse and visit the associated media query values', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssMediaQueryRule'];
+
+      expect(captures.length).toEqual(1);
+
+      const query1 = <CssMediaQueryRuleAst>_getCaptureAst(captures, 0);
+      _assertTokens(query1.query.tokens, ['all', 'and', '(', 'max-width', '100', 'px', ')']);
+      expect(query1.block.entries.length).toEqual(1);
+    });
+
+    it('should capture the media query predicate', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssAtRulePredicate'];
+
+      expect(captures.length).toEqual(1);
+
+      const predicate = <CssAtRulePredicateAst>_getCaptureAst(captures, 0);
+      expect(predicate.strValue).toEqual('@media all (max-width: 100px)');
+    });
+
+    it('should parse and visit the associated "@inline" rule values', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssInlineRule'];
+
+      expect(captures.length).toEqual(1);
+
+      const inline1 = <CssInlineRuleAst>_getCaptureAst(captures, 0);
+      expect(inline1.type).toEqual(BlockType.Import);
+      _assertTokens(inline1.value.tokens, ['url', '(', 'file.css', ')']);
+    });
+
+    it('should parse and visit the keyframe blocks', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssKeyframeRule'];
+
+      expect(captures.length).toEqual(1);
+
+      const keyframe1 = <CssKeyframeRuleAst>_getCaptureAst(captures, 0);
+      expect(keyframe1.name.strValue).toEqual('rotate');
+      expect(keyframe1.block.entries.length).toEqual(2);
+    });
+
+    it('should parse and visit the associated keyframe rules', () => {
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssKeyframeDefinition'];
+
+      expect(captures.length).toEqual(2);
+
+      const def1 = <CssKeyframeDefinitionAst>_getCaptureAst(captures, 0);
+      _assertTokens(def1.steps, ['from']);
+      expect(def1.block.entries.length).toEqual(1);
+
+      const def2 = <CssKeyframeDefinitionAst>_getCaptureAst(captures, 1);
+      _assertTokens(def2.steps, ['50%', '100%']);
+      expect(def2.block.entries.length).toEqual(1);
+    });
+
+    it('should visit an unknown `@` rule', () => {
+      const cssCode = `
+        @someUnknownRule param {
+          one two three
+        }
+      `;
+      ast = parse(cssCode, true);
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssUnknownRule'];
+
+      expect(captures.length).toEqual(1);
+
+      const rule = <CssUnknownRuleAst>_getCaptureAst(captures, 0);
+      expect(rule.ruleName).toEqual('@someUnknownRule');
+
+      _assertTokens(rule.tokens, ['param', '{', 'one', 'two', 'three', '}']);
+    });
+
+    it('should collect an invalid list of tokens before a valid selector', () => {
+      const cssCode = 'one two three four five; selector { }';
+      ast = parse(cssCode, true);
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssUnknownTokenList'];
+
+      expect(captures.length).toEqual(1);
+
+      const rule = <CssUnknownTokenListAst>_getCaptureAst(captures, 0);
+      _assertTokens(rule.tokens, ['one', 'two', 'three', 'four', 'five']);
+    });
+
+    it('should collect an invalid list of tokens after a valid selector', () => {
+      const cssCode = 'selector { } six seven eight';
+      ast = parse(cssCode, true);
+      const visitor = new MyVisitor(ast, context);
+      const captures = visitor.captures['visitCssUnknownTokenList'];
+
+      expect(captures.length).toEqual(1);
+
+      const rule = <CssUnknownTokenListAst>_getCaptureAst(captures, 0);
+      _assertTokens(rule.tokens, ['six', 'seven', 'eight']);
+    });
+  });
+}