feat(core): ensure CSS parser tracks start/end values and understands complex pseudo selectors

modules/@angular/compiler/src/css/lexer.ts

@@ -1,9 +1,9 @@
-import {$$, $0, $9, $A, $AMPERSAND, $AT, $BACKSLASH, $BANG, $CARET, $COLON, $COMMA, $CR, $DQ, $EOF, $EQ, $FF, $GT, $HASH, $LBRACE, $LBRACKET, $LF, $LPAREN, $MINUS, $PERCENT, $PERIOD, $PIPE, $PLUS, $QUESTION, $RBRACE, $RBRACKET, $RPAREN, $SEMICOLON, $SLASH, $SQ, $STAR, $TILDA, $VTAB, $Z, $_, $a, $z, isWhitespace} from '@angular/compiler/src/chars';
+import {$$, $0, $9, $A, $AMPERSAND, $AT, $BACKSLASH, $BANG, $CARET, $COLON, $COMMA, $CR, $DQ, $EOF, $EQ, $FF, $GT, $HASH, $LBRACE, $LBRACKET, $LF, $LPAREN, $MINUS, $PERCENT, $PERIOD, $PIPE, $PLUS, $QUESTION, $RBRACE, $RBRACKET, $RPAREN, $SEMICOLON, $SLASH, $SQ, $STAR, $TILDA, $VTAB, $Z, $_, $a, $z, isWhitespace} from '../chars';
 
 import {BaseException} from '../facade/exceptions';
-import {NumberWrapper, StringWrapper, isPresent, resolveEnumToken} from '../facade/lang';
+import {StringWrapper, isPresent, resolveEnumToken} from '../facade/lang';
 
-export {$AT, $COLON, $COMMA, $EOF, $LBRACE, $LBRACKET, $LPAREN, $RBRACE, $RBRACKET, $RPAREN, $SEMICOLON, isWhitespace} from '@angular/compiler/src/chars';
+export {$AT, $COLON, $COMMA, $EOF, $GT, $LBRACE, $LBRACKET, $LPAREN, $PLUS, $RBRACE, $RBRACKET, $RPAREN, $SEMICOLON, $SLASH, $SPACE, $TAB, $TILDA, isWhitespace} from '../chars';
 
 export enum CssTokenType {
   EOF,
@@ -23,6 +23,7 @@ export enum CssLexerMode {
   ALL_TRACK_WS,
   SELECTOR,
   PSEUDO_SELECTOR,
+  PSEUDO_SELECTOR_WITH_ARGUMENTS,
   ATTRIBUTE_SELECTOR,
   AT_RULE_QUERY,
   MEDIA_QUERY,
@@ -94,6 +95,7 @@ export class CssScannerError extends BaseException {
 function _trackWhitespace(mode: CssLexerMode) {
   switch (mode) {
     case CssLexerMode.SELECTOR:
+    case CssLexerMode.PSEUDO_SELECTOR:
     case CssLexerMode.ALL_TRACK_WS:
     case CssLexerMode.STYLE_VALUE:
       return true;
@@ -126,7 +128,7 @@ export class CssScanner {
 
   setMode(mode: CssLexerMode) {
     if (this._currentMode != mode) {
-      if (_trackWhitespace(this._currentMode)) {
+      if (_trackWhitespace(this._currentMode) && !_trackWhitespace(mode)) {
         this.consumeWhitespace();
       }
       this._currentMode = mode;
@@ -178,21 +180,25 @@ export class CssScanner {
 
   consume(type: CssTokenType, value: string = null): LexedCssResult {
     var mode = this._currentMode;
-    this.setMode(CssLexerMode.ALL);
+
+    this.setMode(_trackWhitespace(mode) ? CssLexerMode.ALL_TRACK_WS : CssLexerMode.ALL);
 
     var previousIndex = this.index;
     var previousLine = this.line;
     var previousColumn = this.column;
 
+    var next: CssToken;
     var output = this.scan();
+    if (isPresent(output)) {
+      // just incase the inner scan method returned an error
+      if (isPresent(output.error)) {
+        this.setMode(mode);
+        return output;
+      }
 
-    // just incase the inner scan method returned an error
+      next = output.token;
-    if (isPresent(output.error)) {
-      this.setMode(mode);
-      return output;
     }
 
-    var next = output.token;
     if (!isPresent(next)) {
       next = new CssToken(0, 0, 0, CssTokenType.EOF, 'end of file');
     }
@@ -563,6 +569,8 @@ function isValidSelectorCharacter(code: number): boolean {
     case $COLON:
     case $PIPE:
     case $COMMA:
+    case $LBRACKET:
+    case $RBRACKET:
       return true;
     default:
       return false;
@@ -658,7 +666,7 @@ function isValidCssCharacter(code: number, mode: CssLexerMode): boolean {
     case CssLexerMode.SELECTOR:
       return isValidSelectorCharacter(code);
 
-    case CssLexerMode.PSEUDO_SELECTOR:
+    case CssLexerMode.PSEUDO_SELECTOR_WITH_ARGUMENTS:
       return isValidPseudoSelectorCharacter(code);
 
     case CssLexerMode.ATTRIBUTE_SELECTOR:

modules/@angular/compiler/test/css/lexer_spec.ts

@@ -331,34 +331,19 @@ export function main() {
     describe('Pseudo Selector Mode', () => {
       it('should validate pseudo selector identifiers with a reduced subset of valid characters',
          () => {
-           function tokenizePseudo(code: any /** TODO #9100 */) {
+           function tokenizePseudo(code: string, withArgs = false): CssToken[] {
-             return tokenize(code, false, CssLexerMode.PSEUDO_SELECTOR);
+             var mode = withArgs ? CssLexerMode.PSEUDO_SELECTOR_WITH_ARGUMENTS :
+                                   CssLexerMode.PSEUDO_SELECTOR;
+             return tokenize(code, false, mode);
            }
 
-           expect(tokenizePseudo('lang(en-us)').length).toEqual(4);
            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)'); }).toThrow();
+           expect(() => { tokenizePseudo('lang(something:broken)', true); }).toThrow();
 
-           expect(() => { tokenizePseudo('not(.selector)'); }).toThrow();
+           expect(() => { tokenizePseudo('not(.selector)', true); }).toThrow();
-         });
-    });
-
-    describe('Pseudo Selector Mode', () => {
-      it('should validate pseudo selector identifiers with a reduced subset of valid characters',
-         () => {
-           function tokenizePseudo(code: any /** TODO #9100 */) {
-             return tokenize(code, false, CssLexerMode.PSEUDO_SELECTOR);
-           }
-
-           expect(tokenizePseudo('lang(en-us)').length).toEqual(4);
-           expect(tokenizePseudo('hover').length).toEqual(1);
-           expect(tokenizePseudo('focus').length).toEqual(1);
-
-           expect(() => { tokenizePseudo('lang(something:broken)'); }).toThrow();
-
-           expect(() => { tokenizePseudo('not(.selector)'); }).toThrow();
          });
     });
 

modules/@angular/compiler/test/css/parser_spec.ts

@@ -52,7 +52,7 @@ export function main() {
       expect(value.tokens[0].strValue).toEqual('value123');
     });
 
-    it('should parse mutliple CSS selectors sharing the same set of styles', () => {
+    it('should parse multiple CSS selectors sharing the same set of styles', () => {
       var styles = `
         .class, #id, tag, [attr], key + value, * value, :-moz-any-link {
           prop: value123;
@@ -65,13 +65,26 @@ export function main() {
       var rule = <CssSelectorRuleAST>ast.rules[0];
       expect(rule.selectors.length).toBe(7);
 
-      assertTokens(rule.selectors[0].tokens, ['.', 'class']);
+      var classRule = rule.selectors[0];
-      assertTokens(rule.selectors[1].tokens, ['#', 'id']);
+      var idRule = rule.selectors[1];
-      assertTokens(rule.selectors[2].tokens, ['tag']);
+      var tagRule = rule.selectors[2];
-      assertTokens(rule.selectors[3].tokens, ['[', 'attr', ']']);
+      var attrRule = rule.selectors[3];
-      assertTokens(rule.selectors[4].tokens, ['key', ' ', '+', ' ', 'value']);
+      var plusOpRule = rule.selectors[4];
-      assertTokens(rule.selectors[5].tokens, ['*', ' ', 'value']);
+      var starOpRule = rule.selectors[5];
-      assertTokens(rule.selectors[6].tokens, [':', '-moz-any-link']);
+      var 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']);
 
       var style1 = <CssDefinitionAST>rule.block.entries[0];
       expect(style1.property.strValue).toEqual('prop');
@@ -324,11 +337,13 @@ export function main() {
       var rules = ast.rules;
 
       var pageRule1 = <CssBlockDefinitionRuleAST>rules[0];
-      expect(pageRule1.strValue).toEqual('one');
+      expect(pageRule1.query.strValue).toEqual('@page one');
+      expect(pageRule1.query.tokens[0].strValue).toEqual('one');
       expect(pageRule1.type).toEqual(BlockType.Page);
 
       var pageRule2 = <CssBlockDefinitionRuleAST>rules[1];
-      expect(pageRule2.strValue).toEqual('two');
+      expect(pageRule2.query.strValue).toEqual('@page two');
+      expect(pageRule2.query.tokens[0].strValue).toEqual('two');
       expect(pageRule2.type).toEqual(BlockType.Page);
 
       var selectorOne = <CssSelectorRuleAST>pageRule1.block.entries[0];
@@ -424,7 +439,8 @@ export function main() {
       var errors = output.errors;
 
       expect(errors[0].msg)
-          .toMatchPattern(/Unbalanced pseudo selector function value at column 0:10/g);
+          .toMatchPattern(
+              /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',
@@ -458,8 +474,37 @@ export function main() {
       var rule1 = <CssSelectorRuleAST>ast.rules[0];
       expect(rule1.selectors.length).toEqual(1);
 
-      var selector = rule1.selectors[0];
+      var simpleSelector = rule1.selectors[0].selectorParts[0];
-      assertTokens(selector.tokens, ['div', ':', 'not', '(', '.', 'ignore-this-div', ')']);
+      assertTokens(simpleSelector.tokens, ['div']);
+
+      var 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', () => {
+      var styles = `body > :host-context(.a, .b, .c:hover) {
+        prop: value;
+      }`;
+
+      var output = parse(styles);
+      var errors = output.errors;
+      var ast = output.ast;
+
+      expect(errors.length).toEqual(0);
+
+      var rule1 = <CssSelectorRuleAST>ast.rules[0];
+      expect(rule1.selectors.length).toEqual(1);
+
+      var simpleSelector = rule1.selectors[0].selectorParts[1];
+      var innerSelectors = simpleSelector.pseudoSelectors[0].innerSelectors;
+
+      assertTokens(innerSelectors[0].selectorParts[0].tokens, ['.', 'a']);
+      assertTokens(innerSelectors[1].selectorParts[0].tokens, ['.', 'b']);
+
+      var 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', () => {

modules/@angular/compiler/test/css/visitor_spec.ts

@@ -1,11 +1,12 @@
 import {CssLexer} from '@angular/compiler/src/css/lexer';
-import {BlockType, CssAST, CssASTVisitor, CssBlockAST, CssBlockDefinitionRuleAST, CssBlockRuleAST, CssDefinitionAST, CssInlineRuleAST, CssKeyframeDefinitionAST, CssKeyframeRuleAST, CssMediaQueryRuleAST, CssParseError, CssParser, CssRuleAST, CssSelectorAST, CssSelectorRuleAST, CssStyleSheetAST, CssStyleValueAST, CssToken, CssUnknownTokenListAST} from '@angular/compiler/src/css/parser';
+import {BlockType, CssAST, CssASTVisitor, CssAtRulePredicateAST, CssBlockAST, CssBlockDefinitionRuleAST, CssBlockRuleAST, CssDefinitionAST, CssInlineRuleAST, CssKeyframeDefinitionAST, CssKeyframeRuleAST, CssMediaQueryRuleAST, CssParseError, CssParser, CssPseudoSelectorAST, CssRuleAST, CssSelectorAST, CssSelectorRuleAST, CssSimpleSelectorAST, CssStyleSheetAST, CssStyleValueAST, CssStylesBlockAST, CssToken, CssUnknownRuleAST, CssUnknownTokenListAST} from '@angular/compiler/src/css/parser';
 import {afterEach, beforeEach, ddescribe, describe, expect, iit, it, xit} from '@angular/core/testing/testing_internal';
 
 import {BaseException} from '../../src/facade/exceptions';
 import {NumberWrapper, StringWrapper, isPresent} from '../../src/facade/lang';
 
-function _assertTokens(tokens: any /** TODO #9100 */, valuesArr: any /** TODO #9100 */) {
+function _assertTokens(tokens: CssToken[], valuesArr: string[]): void {
+  expect(tokens.length).toEqual(valuesArr.length);
   for (var i = 0; i < tokens.length; i++) {
     expect(tokens[i].strValue == valuesArr[i]);
   }
@@ -14,75 +15,105 @@ function _assertTokens(tokens: any /** TODO #9100 */, valuesArr: any /** TODO #9
 class MyVisitor implements CssASTVisitor {
   captures: {[key: string]: any[]} = {};
 
-  _capture(
+  _capture(method: string, ast: CssAST, context: any) {
-      method: any /** TODO #9100 */, ast: any /** TODO #9100 */, context: any /** TODO #9100 */) {
     this.captures[method] = isPresent(this.captures[method]) ? this.captures[method] : [];
     this.captures[method].push([ast, context]);
   }
 
-  constructor(ast: CssStyleSheetAST, context?: any) { ast.visit(this, context); }
+  constructor(ast: CssStyleSheetAST, context: any) { ast.visit(this, context); }
 
-  visitCssValue(ast: any /** TODO #9100 */, context?: any): void {
+  visitCssValue(ast: CssStyleValueAST, context: any): void {
     this._capture('visitCssValue', ast, context);
   }
 
-  visitInlineCssRule(ast: any /** TODO #9100 */, context?: any): void {
+  visitCssInlineRule(ast: CssInlineRuleAST, context: any): void {
     this._capture('visitInlineCssRule', ast, context);
   }
 
-  visitCssKeyframeRule(ast: CssKeyframeRuleAST, context?: any): void {
+  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 {
+  visitCssKeyframeDefinition(ast: CssKeyframeDefinitionAST, context: any): void {
     this._capture('visitCssKeyframeDefinition', ast, context);
     ast.block.visit(this, context);
   }
 
-  visitCssMediaQueryRule(ast: CssMediaQueryRuleAST, context?: any): void {
+  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 {
+  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 {
+  visitCssSelector(ast: CssSelectorAST, context: any): void {
     this._capture('visitCssSelector', ast, context);
+    ast.selectorParts.forEach(
+        (simpleAst: CssSimpleSelectorAST) => { simpleAst.visit(this, context); });
   }
 
-  visitCssDefinition(ast: CssDefinitionAST, context?: any): void {
+  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 {
+  visitCssBlock(ast: CssBlockAST, context: any): void {
     this._capture('visitCssBlock', ast, context);
     ast.entries.forEach((entryAST: CssAST) => { entryAST.visit(this, context); });
   }
 
-  visitCssStyleSheet(ast: CssStyleSheetAST, context?: any): void {
+  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); });
   }
 
-  visitUnkownRule(ast: CssUnknownTokenListAST, context?: any): void {
+  visitCssUnknownRule(ast: CssUnknownRuleAST, context: any): void {
-    // nothing
+    this._capture('visitUnknownRule', ast, context);
+  }
+
+  visitCssUnknownTokenList(ast: CssUnknownTokenListAST, context: any): void {
+    this._capture('visitUnknownTokenList', 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) {
+  function parse(cssCode: string, ignoreErrors: boolean = false) {
     var lexer = new CssLexer();
     var scanner = lexer.scan(cssCode);
     var parser = new CssParser(scanner, 'some-fake-file-name.css');
     var output = parser.parse();
     var errors = output.errors;
-    if (errors.length > 0) {
+    if (errors.length > 0 && !ignoreErrors) {
       throw new BaseException(errors.map((error: CssParseError) => error.msg).join(', '));
     }
     return output.ast;
@@ -132,17 +163,26 @@ export function main() {
 
       expect(captures.length).toEqual(3);
 
-      var rule1 = <CssSelectorRuleAST>captures[0][0];
+      var rule1 = <CssSelectorRuleAST>_getCaptureAst(captures, 0);
       expect(rule1).toEqual(ast.rules[0]);
-      _assertTokens(rule1.selectors[0].tokens, ['.', 'rule1']);
 
-      var rule2 = <CssSelectorRuleAST>captures[1][0];
+      var firstSelector = rule1.selectors[0];
+      var firstSimpleSelector = firstSelector.selectorParts[0];
+      _assertTokens(firstSimpleSelector.tokens, ['.', 'rule1']);
+
+      var rule2 = <CssSelectorRuleAST>_getCaptureAst(captures, 1);
       expect(rule2).toEqual(ast.rules[1]);
-      _assertTokens(rule2.selectors[0].tokens, ['.', 'rule2']);
 
-      var rule3 = captures[2][0];
+      var secondSelector = rule2.selectors[0];
+      var secondSimpleSelector = secondSelector.selectorParts[0];
+      _assertTokens(secondSimpleSelector.tokens, ['.', 'rule2']);
+
+      var rule3 = <CssSelectorRuleAST>_getCaptureAst(captures, 2);
       expect(rule3).toEqual((<CssMediaQueryRuleAST>ast.rules[2]).block.entries[0]);
-      _assertTokens(rule3.selectors[0].tokens, ['#', 'rule3']);
+
+      var thirdSelector = rule3.selectors[0];
+      var thirdSimpleSelector = thirdSelector.selectorParts[0];
+      _assertTokens(thirdSimpleSelector.tokens, ['#', 'rule3']);
     });
 
     it('should parse and visit each of the stylesheet style key/value definitions', () => {
@@ -151,23 +191,23 @@ export function main() {
 
       expect(captures.length).toEqual(5);
 
-      var def1 = <CssDefinitionAST>captures[0][0];
+      var def1 = <CssDefinitionAST>_getCaptureAst(captures, 0);
       expect(def1.property.strValue).toEqual('prop1');
       expect(def1.value.tokens[0].strValue).toEqual('value1');
 
-      var def2 = <CssDefinitionAST>captures[1][0];
+      var def2 = <CssDefinitionAST>_getCaptureAst(captures, 1);
       expect(def2.property.strValue).toEqual('prop2');
       expect(def2.value.tokens[0].strValue).toEqual('value2');
 
-      var def3 = <CssDefinitionAST>captures[2][0];
+      var def3 = <CssDefinitionAST>_getCaptureAst(captures, 2);
       expect(def3.property.strValue).toEqual('prop3');
       expect(def3.value.tokens[0].strValue).toEqual('value3');
 
-      var def4 = <CssDefinitionAST>captures[3][0];
+      var def4 = <CssDefinitionAST>_getCaptureAst(captures, 3);
       expect(def4.property.strValue).toEqual('prop4');
       expect(def4.value.tokens[0].strValue).toEqual('value4');
 
-      var def5 = <CssDefinitionAST>captures[4][0];
+      var def5 = <CssDefinitionAST>_getCaptureAst(captures, 4);
       expect(def5.property.strValue).toEqual('prop5');
       expect(def5.value.tokens[0].strValue).toEqual('value5');
     });
@@ -178,20 +218,30 @@ export function main() {
 
       expect(captures.length).toEqual(1);
 
-      var query1 = <CssMediaQueryRuleAST>captures[0][0];
+      var query1 = <CssMediaQueryRuleAST>_getCaptureAst(captures, 0);
-      _assertTokens(query1.query, ['all', 'and', '(', 'max-width', '100', 'px', ')']);
+      _assertTokens(query1.query.tokens, ['all', 'and', '(', 'max-width', '100', 'px', ')']);
       expect(query1.block.entries.length).toEqual(1);
     });
 
+    it('should capture the media query predicate', () => {
+      var visitor = new MyVisitor(ast, context);
+      var captures = visitor.captures['visitCssAtRulePredicate'];
+
+      expect(captures.length).toEqual(1);
+
+      var predicate = <CssAtRulePredicateAST>_getCaptureAst(captures, 0);
+      expect(predicate.strValue).toEqual('@media all (max-width: 100px)');
+    });
+
     it('should parse and visit the associated "@inline" rule values', () => {
       var visitor = new MyVisitor(ast, context);
-      var captures = visitor.captures['visitInlineCssRule'];
+      var captures = visitor.captures['visitCssInlineRule'];
 
       expect(captures.length).toEqual(1);
 
-      var query1 = <CssInlineRuleAST>captures[0][0];
+      var inline1 = <CssInlineRuleAST>_getCaptureAst(captures, 0);
-      expect(query1.type).toEqual(BlockType.Import);
+      expect(inline1.type).toEqual(BlockType.Import);
-      _assertTokens(query1.value.tokens, ['url', '(', 'file.css', ')']);
+      _assertTokens(inline1.value.tokens, ['url', '(', 'file.css', ')']);
     });
 
     it('should parse and visit the keyframe blocks', () => {
@@ -200,7 +250,7 @@ export function main() {
 
       expect(captures.length).toEqual(1);
 
-      var keyframe1 = <CssKeyframeRuleAST>captures[0][0];
+      var keyframe1 = <CssKeyframeRuleAST>_getCaptureAst(captures, 0);
       expect(keyframe1.name.strValue).toEqual('rotate');
       expect(keyframe1.block.entries.length).toEqual(2);
     });
@@ -211,13 +261,55 @@ export function main() {
 
       expect(captures.length).toEqual(2);
 
-      var def1 = <CssKeyframeDefinitionAST>captures[0][0];
+      var def1 = <CssKeyframeDefinitionAST>_getCaptureAst(captures, 0);
       _assertTokens(def1.steps, ['from']);
       expect(def1.block.entries.length).toEqual(1);
 
-      var def2 = <CssKeyframeDefinitionAST>captures[1][0];
+      var def2 = <CssKeyframeDefinitionAST>_getCaptureAst(captures, 1);
       _assertTokens(def2.steps, ['50%', '100%']);
       expect(def2.block.entries.length).toEqual(1);
     });
+
+    it('should visit an unknown `@` rule', () => {
+      var cssCode = `
+        @someUnknownRule param {
+          one two three
+        }
+      `;
+      ast = parse(cssCode, true);
+      var visitor = new MyVisitor(ast, context);
+      var captures = visitor.captures['visitCssUnknownRule'];
+
+      expect(captures.length).toEqual(1);
+
+      var 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', () => {
+      var cssCode = 'one two three four five; selector { }';
+      ast = parse(cssCode, true);
+      var visitor = new MyVisitor(ast, context);
+      var captures = visitor.captures['visitCssUnknownTokenList'];
+
+      expect(captures.length).toEqual(1);
+
+      var 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', () => {
+      var cssCode = 'selector { } six seven eight';
+      ast = parse(cssCode, true);
+      var visitor = new MyVisitor(ast, context);
+      var captures = visitor.captures['visitCssUnknownTokenList'];
+
+      expect(captures.length).toEqual(1);
+
+      var rule = <CssUnknownTokenListAST>_getCaptureAst(captures, 0);
+      _assertTokens(rule.tokens, ['six', 'seven', 'eight']);
+    });
   });
 }

modules/@angular/facade/src/lang.ts

@@ -497,6 +497,10 @@ export function bitWiseAnd(values: number[]): number {
   return values.reduce((a, b) => { return a & b; });
 }
 
+export function bitWiseNot(value: number): number {
+  return ~value;
+}
+
 export function escape(s: string): string {
   return _global.encodeURI(s);
 }