angular/packages/compiler/src/css_parser/css_parser.ts at bazel · ascorbic/angular

903 lines (761 loc) · 31.4 KB
 * @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 * as chars from '../chars';
import {ParseError, ParseLocation, ParseSourceFile, ParseSourceSpan} from '../parse_util';
import {BlockType, CssAst, CssAtRulePredicateAst, CssBlockAst, CssBlockDefinitionRuleAst, CssBlockRuleAst, CssDefinitionAst, CssInlineRuleAst, CssKeyframeDefinitionAst, CssKeyframeRuleAst, CssMediaQueryRuleAst, CssPseudoSelectorAst, CssRuleAst, CssSelectorAst, CssSelectorRuleAst, CssSimpleSelectorAst, CssStyleSheetAst, CssStyleValueAst, CssStylesBlockAst, CssUnknownRuleAst, CssUnknownTokenListAst, mergeTokens} from './css_ast';
import {CssLexer, CssLexerMode, CssScanner, CssToken, CssTokenType, generateErrorMessage, getRawMessage, isNewline} from './css_lexer';
const SPACE_OPERATOR = ' ';
export {CssToken} from './css_lexer';
export {BlockType} from './css_ast';
const SLASH_CHARACTER = '/';
const GT_CHARACTER = '>';
const TRIPLE_GT_OPERATOR_STR = '>>>';
const DEEP_OPERATOR_STR = '/deep/';
const EOF_DELIM_FLAG = 1;
const RBRACE_DELIM_FLAG = 2;
const LBRACE_DELIM_FLAG = 4;
const COMMA_DELIM_FLAG = 8;
const COLON_DELIM_FLAG = 16;
const SEMICOLON_DELIM_FLAG = 32;
const NEWLINE_DELIM_FLAG = 64;
const RPAREN_DELIM_FLAG = 128;
const LPAREN_DELIM_FLAG = 256;
const SPACE_DELIM_FLAG = 512;
function _pseudoSelectorSupportsInnerSelectors(name: string): boolean {
  return ['not', 'host', 'host-context'].indexOf(name) >= 0;
function isSelectorOperatorCharacter(code: number): boolean {
  switch (code) {
    case chars.$SLASH:
    case chars.$TILDA:
    case chars.$PLUS:
    case chars.$GT:
      return true;
    default:
      return chars.isWhitespace(code);
function getDelimFromCharacter(code: number): number {
  switch (code) {
    case chars.$EOF:
      return EOF_DELIM_FLAG;
    case chars.$COMMA:
      return COMMA_DELIM_FLAG;
    case chars.$COLON:
      return COLON_DELIM_FLAG;
    case chars.$SEMICOLON:
      return SEMICOLON_DELIM_FLAG;
    case chars.$RBRACE:
      return RBRACE_DELIM_FLAG;
    case chars.$LBRACE:
      return LBRACE_DELIM_FLAG;
    case chars.$RPAREN:
      return RPAREN_DELIM_FLAG;
    case chars.$SPACE:
    case chars.$TAB:
      return SPACE_DELIM_FLAG;
    default:
      return isNewline(code) ? NEWLINE_DELIM_FLAG : 0;
function characterContainsDelimiter(code: number, delimiters: number): boolean {
  return (getDelimFromCharacter(code) & delimiters) > 0;
export class ParsedCssResult {
  constructor(public errors: CssParseError[], public ast: CssStyleSheetAst) {}
export class CssParser {
  private _errors: CssParseError[] = [];
  // TODO(issue/24571): remove '!'.
  private _file !: ParseSourceFile;
  // TODO(issue/24571): remove '!'.
  private _scanner !: CssScanner;
  // TODO(issue/24571): remove '!'.
  private _lastToken !: CssToken;
   * @param css the CSS code that will be parsed
   * @param url the name of the CSS file containing the CSS source code
  parse(css: string, url: string): ParsedCssResult {
    const lexer = new CssLexer();
    this._file = new ParseSourceFile(css, url);
    this._scanner = lexer.scan(css, false);
    const ast = this._parseStyleSheet(EOF_DELIM_FLAG);
    const errors = this._errors;
    this._errors = [];
    const result = new ParsedCssResult(errors, ast);
    this._file = null as any;
    this._scanner = null as any;
    return result;
  /** @internal */
  _parseStyleSheet(delimiters: number): CssStyleSheetAst {
    const results: CssRuleAst[] = [];
    this._scanner.consumeEmptyStatements();
    while (this._scanner.peek != chars.$EOF) {
      this._scanner.setMode(CssLexerMode.BLOCK);
      results.push(this._parseRule(delimiters));
    let span: ParseSourceSpan|null = null;
    if (results.length > 0) {
      const firstRule = results[0];
      // we collect the last token like so incase there was an
      // EOF token that was emitted sometime during the lexing
      span = this._generateSourceSpan(firstRule, this._lastToken);
    return new CssStyleSheetAst(span !, results);
  /** @internal */
  _getSourceContent(): string { return this._scanner != null ? this._scanner.input : ''; }
  /** @internal */
  _extractSourceContent(start: number, end: number): string {
    return this._getSourceContent().substring(start, end + 1);
  /** @internal */
  _generateSourceSpan(start: CssToken|CssAst, end: CssToken|CssAst|null = null): ParseSourceSpan {
    let startLoc: ParseLocation;
    if (start instanceof CssAst) {
      startLoc = start.location.start;
    } else {
      let token = start;
      if (token == null) {
        // the data here is invalid, however, if and when this does
        // occur, any other errors associated with this will be collected
        token = this._lastToken;
      startLoc = new ParseLocation(this._file, token.index, token.line, token.column);
    if (end == null) {
      end = this._lastToken;
    let endLine: number = -1;
    let endColumn: number = -1;
    let endIndex: number = -1;
    if (end instanceof CssAst) {
      endLine = end.location.end.line !;
      endColumn = end.location.end.col !;
      endIndex = end.location.end.offset !;
    } else if (end instanceof CssToken) {
      endLine = end.line;
      endColumn = end.column;
      endIndex = end.index;
    const endLoc = new ParseLocation(this._file, endIndex, endLine, endColumn);
    return new ParseSourceSpan(startLoc, endLoc);
  /** @internal */
  _resolveBlockType(token: CssToken): BlockType {
    switch (token.strValue) {
      case '@-o-keyframes':
      case '@-moz-keyframes':
      case '@-webkit-keyframes':
      case '@keyframes':
        return BlockType.Keyframes;
      case '@charset':
        return BlockType.Charset;
      case '@import':
        return BlockType.Import;
      case '@namespace':
        return BlockType.Namespace;
      case '@page':
        return BlockType.Page;
      case '@document':
        return BlockType.Document;
      case '@media':
        return BlockType.MediaQuery;
      case '@font-face':
        return BlockType.FontFace;
      case '@viewport':
        return BlockType.Viewport;
      case '@supports':
        return BlockType.Supports;
      default:
        return BlockType.Unsupported;
  /** @internal */
  _parseRule(delimiters: number): CssRuleAst {
    if (this._scanner.peek == chars.$AT) {
      return this._parseAtRule(delimiters);
    return this._parseSelectorRule(delimiters);
  /** @internal */
  _parseAtRule(delimiters: number): CssRuleAst {
    const start = this._getScannerIndex();
    this._scanner.setMode(CssLexerMode.BLOCK);
    const token = this._scan();
    const startToken = token;
    this._assertCondition(
        token.type == CssTokenType.AtKeyword,
        `The CSS Rule ${token.strValue} is not a valid [@] rule.`, token);
    let block: CssBlockAst;
    const type = this._resolveBlockType(token);
    let span: ParseSourceSpan;
    let tokens: CssToken[];
    let endToken: CssToken;
    let end: number;
    let strValue: string;
    let query: CssAtRulePredicateAst;
    switch (type) {
      case BlockType.Charset:
      case BlockType.Namespace:
      case BlockType.Import:
        let value = this._parseValue(delimiters);
        this._scanner.setMode(CssLexerMode.BLOCK);
        this._scanner.consumeEmptyStatements();
        span = this._generateSourceSpan(startToken, value);
        return new CssInlineRuleAst(span, type, value);
      case BlockType.Viewport:
      case BlockType.FontFace:
        block = this._parseStyleBlock(delimiters) !;
        span = this._generateSourceSpan(startToken, block);
        return new CssBlockRuleAst(span, type, block);
      case BlockType.Keyframes:
        tokens = this._collectUntilDelim(delimiters | RBRACE_DELIM_FLAG | LBRACE_DELIM_FLAG);
        // keyframes only have one identifier name
        let name = tokens[0];
        block = this._parseKeyframeBlock(delimiters);
        span = this._generateSourceSpan(startToken, block);
        return new CssKeyframeRuleAst(span, name, block);
      case BlockType.MediaQuery:
        this._scanner.setMode(CssLexerMode.MEDIA_QUERY);
        tokens = this._collectUntilDelim(delimiters | RBRACE_DELIM_FLAG | LBRACE_DELIM_FLAG);
        endToken = tokens[tokens.length - 1];
        // we do not track the whitespace after the mediaQuery predicate ends
        // so we have to calculate the end string value on our own
        end = endToken.index + endToken.strValue.length - 1;
        strValue = this._extractSourceContent(start, end);
        span = this._generateSourceSpan(startToken, endToken);
        query = new CssAtRulePredicateAst(span, strValue, tokens);
        block = this._parseBlock(delimiters);
        strValue = this._extractSourceContent(start, this._getScannerIndex() - 1);
        span = this._generateSourceSpan(startToken, block);
        return new CssMediaQueryRuleAst(span, strValue, query, block);
      case BlockType.Document:
      case BlockType.Supports:
      case BlockType.Page:
        this._scanner.setMode(CssLexerMode.AT_RULE_QUERY);
        tokens = this._collectUntilDelim(delimiters | RBRACE_DELIM_FLAG | LBRACE_DELIM_FLAG);
        endToken = tokens[tokens.length - 1];
        // we do not track the whitespace after this block rule predicate ends
        // so we have to calculate the end string value on our own
        end = endToken.index + endToken.strValue.length - 1;
        strValue = this._extractSourceContent(start, end);
        span = this._generateSourceSpan(startToken, tokens[tokens.length - 1]);
        query = new CssAtRulePredicateAst(span, strValue, tokens);
        block = this._parseBlock(delimiters);
        strValue = this._extractSourceContent(start, block.end.offset !);
        span = this._generateSourceSpan(startToken, block);
        return new CssBlockDefinitionRuleAst(span, strValue, type, query, block);
      // if a custom @rule { ... } is used it should still tokenize the insides
      default:
        let listOfTokens: CssToken[] = [];
        let tokenName = token.strValue;
        this._scanner.setMode(CssLexerMode.ALL);
        this._error(
            generateErrorMessage(
                this._getSourceContent(),
                `The CSS "at" rule "${tokenName}" is not allowed to used here`, token.strValue,
                token.index, token.line, token.column),
            token);
        this._collectUntilDelim(delimiters | LBRACE_DELIM_FLAG | SEMICOLON_DELIM_FLAG)
            .forEach((token) => { listOfTokens.push(token); });
        if (this._scanner.peek == chars.$LBRACE) {
          listOfTokens.push(this._consume(CssTokenType.Character, '{'));
          this._collectUntilDelim(delimiters | RBRACE_DELIM_FLAG | LBRACE_DELIM_FLAG)
              .forEach((token) => { listOfTokens.push(token); });
          listOfTokens.push(this._consume(CssTokenType.Character, '}'));
        endToken = listOfTokens[listOfTokens.length - 1];
        span = this._generateSourceSpan(startToken, endToken);
        return new CssUnknownRuleAst(span, tokenName, listOfTokens);
  /** @internal */
  _parseSelectorRule(delimiters: number): CssRuleAst {
    const start = this._getScannerIndex();
    const selectors = this._parseSelectors(delimiters);
    const block = this._parseStyleBlock(delimiters);
    let ruleAst: CssRuleAst;
    let span: ParseSourceSpan;
    const startSelector = selectors[0];
    if (block != null) {
      span = this._generateSourceSpan(startSelector, block);
      ruleAst = new CssSelectorRuleAst(span, selectors, block);
    } else {
      const name = this._extractSourceContent(start, this._getScannerIndex() - 1);
      const innerTokens: CssToken[] = [];
      selectors.forEach((selector: CssSelectorAst) => {
        selector.selectorParts.forEach((part: CssSimpleSelectorAst) => {
          part.tokens.forEach((token: CssToken) => { innerTokens.push(token); });
        });
      const endToken = innerTokens[innerTokens.length - 1];
      span = this._generateSourceSpan(startSelector, endToken);
      ruleAst = new CssUnknownTokenListAst(span, name, innerTokens);
    this._scanner.setMode(CssLexerMode.BLOCK);
    this._scanner.consumeEmptyStatements();
    return ruleAst;
  /** @internal */
  _parseSelectors(delimiters: number): CssSelectorAst[] {
    delimiters |= LBRACE_DELIM_FLAG | SEMICOLON_DELIM_FLAG;
    const selectors: CssSelectorAst[] = [];
    let isParsingSelectors = true;
    while (isParsingSelectors) {
      selectors.push(this._parseSelector(delimiters));
      isParsingSelectors = !characterContainsDelimiter(this._scanner.peek, delimiters);
      if (isParsingSelectors) {
        this._consume(CssTokenType.Character, ',');
        isParsingSelectors = !characterContainsDelimiter(this._scanner.peek, delimiters);
        if (isParsingSelectors) {
          this._scanner.consumeWhitespace();
    return selectors;
  /** @internal */
  _scan(): CssToken {
    const output = this._scanner.scan() !;
    const token = output.token;
    const error = output.error;
    if (error != null) {
      this._error(getRawMessage(error), token);
    this._lastToken = token;
    return token;
  /** @internal */
  _getScannerIndex(): number { return this._scanner.index; }
  /** @internal */
  _consume(type: CssTokenType, value: string|null = null): CssToken {
    const output = this._scanner.consume(type, value);
    const token = output.token;
    const error = output.error;
    if (error != null) {
      this._error(getRawMessage(error), token);
    this._lastToken = token;
    return token;
  /** @internal */
  _parseKeyframeBlock(delimiters: number): CssBlockAst {
    delimiters |= RBRACE_DELIM_FLAG;
    this._scanner.setMode(CssLexerMode.KEYFRAME_BLOCK);
    const startToken = this._consume(CssTokenType.Character, '{');
    const definitions: CssKeyframeDefinitionAst[] = [];
    while (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
      definitions.push(this._parseKeyframeDefinition(delimiters));
    const endToken = this._consume(CssTokenType.Character, '}');
    const span = this._generateSourceSpan(startToken, endToken);
    return new CssBlockAst(span, definitions);
  /** @internal */
  _parseKeyframeDefinition(delimiters: number): CssKeyframeDefinitionAst {
    const start = this._getScannerIndex();
    const stepTokens: CssToken[] = [];
    delimiters |= LBRACE_DELIM_FLAG;
    while (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
      stepTokens.push(this._parseKeyframeLabel(delimiters | COMMA_DELIM_FLAG));
      if (this._scanner.peek != chars.$LBRACE) {
        this._consume(CssTokenType.Character, ',');
    const stylesBlock = this._parseStyleBlock(delimiters | RBRACE_DELIM_FLAG);
    const span = this._generateSourceSpan(stepTokens[0], stylesBlock);
    const ast = new CssKeyframeDefinitionAst(span, stepTokens, stylesBlock !);
    this._scanner.setMode(CssLexerMode.BLOCK);
    return ast;
  /** @internal */
  _parseKeyframeLabel(delimiters: number): CssToken {
    this._scanner.setMode(CssLexerMode.KEYFRAME_BLOCK);
    return mergeTokens(this._collectUntilDelim(delimiters));
  /** @internal */
  _parsePseudoSelector(delimiters: number): CssPseudoSelectorAst {
    const start = this._getScannerIndex();
    delimiters &= ~COMMA_DELIM_FLAG;
    // we keep the original value since we may use it to recurse when :not, :host are used
    const startingDelims = delimiters;
    const startToken = this._consume(CssTokenType.Character, ':');
    const tokens = [startToken];
    if (this._scanner.peek == chars.$COLON) {  // ::something
      tokens.push(this._consume(CssTokenType.Character, ':'));
    const innerSelectors: CssSelectorAst[] = [];
    this._scanner.setMode(CssLexerMode.PSEUDO_SELECTOR);
    // host, host-context, lang, not, nth-child are all identifiers
    const pseudoSelectorToken = this._consume(CssTokenType.Identifier);
    const pseudoSelectorName = pseudoSelectorToken.strValue;
    tokens.push(pseudoSelectorToken);
    // host(), lang(), nth-child(), etc...
    if (this._scanner.peek == chars.$LPAREN) {
      this._scanner.setMode(CssLexerMode.PSEUDO_SELECTOR_WITH_ARGUMENTS);
      const openParenToken = this._consume(CssTokenType.Character, '(');
      tokens.push(openParenToken);
      // :host(innerSelector(s)), :not(selector), etc...
      if (_pseudoSelectorSupportsInnerSelectors(pseudoSelectorName)) {
        let innerDelims = startingDelims | LPAREN_DELIM_FLAG | RPAREN_DELIM_FLAG;
        if (pseudoSelectorName == 'not') {
          // the inner selector inside of :not(...) can only be one
          // CSS selector (no commas allowed) ... This is according
          // to the CSS specification
          innerDelims |= COMMA_DELIM_FLAG;
        // :host(a, b, c) {
        this._parseSelectors(innerDelims).forEach((selector, index) => {
          innerSelectors.push(selector);
        });
      } else {
        // this branch is for things like "en-us, 2k + 1, etc..."
        // which all end up in pseudoSelectors like :lang, :nth-child, etc..
        const innerValueDelims = delimiters | LBRACE_DELIM_FLAG | COLON_DELIM_FLAG |
            RPAREN_DELIM_FLAG | LPAREN_DELIM_FLAG;
        while (!characterContainsDelimiter(this._scanner.peek, innerValueDelims)) {
          const token = this._scan();
          tokens.push(token);
      const closeParenToken = this._consume(CssTokenType.Character, ')');
      tokens.push(closeParenToken);
    const end = this._getScannerIndex() - 1;
    const strValue = this._extractSourceContent(start, end);
    const endToken = tokens[tokens.length - 1];
    const span = this._generateSourceSpan(startToken, endToken);
    return new CssPseudoSelectorAst(span, strValue, pseudoSelectorName, tokens, innerSelectors);
  /** @internal */
  _parseSimpleSelector(delimiters: number): CssSimpleSelectorAst {
    const start = this._getScannerIndex();
    delimiters |= COMMA_DELIM_FLAG;
    this._scanner.setMode(CssLexerMode.SELECTOR);
    const selectorCssTokens: CssToken[] = [];
    const pseudoSelectors: CssPseudoSelectorAst[] = [];
    let previousToken: CssToken = undefined !;
    const selectorPartDelimiters = delimiters | SPACE_DELIM_FLAG;
    let loopOverSelector = !characterContainsDelimiter(this._scanner.peek, selectorPartDelimiters);
    let hasAttributeError = false;
    while (loopOverSelector) {
      const peek = this._scanner.peek;
      switch (peek) {
        case chars.$COLON:
          let innerPseudo = this._parsePseudoSelector(delimiters);
          pseudoSelectors.push(innerPseudo);
          this._scanner.setMode(CssLexerMode.SELECTOR);
          break;
        case chars.$LBRACKET:
          // we set the mode after the scan because attribute mode does not
          // allow attribute [] values. And this also will catch any errors
          // if an extra "[" is used inside.
          selectorCssTokens.push(this._scan());
          this._scanner.setMode(CssLexerMode.ATTRIBUTE_SELECTOR);
          break;
        case chars.$RBRACKET:
          if (this._scanner.getMode() != CssLexerMode.ATTRIBUTE_SELECTOR) {
            hasAttributeError = true;
          // we set the mode early because attribute mode does not
          // allow attribute [] values
          this._scanner.setMode(CssLexerMode.SELECTOR);
          selectorCssTokens.push(this._scan());
          break;
        default:
          if (isSelectorOperatorCharacter(peek)) {
            loopOverSelector = false;
            continue;
          let token = this._scan();
          previousToken = token;
          selectorCssTokens.push(token);
          break;
      loopOverSelector = !characterContainsDelimiter(this._scanner.peek, selectorPartDelimiters);
    hasAttributeError =
        hasAttributeError || this._scanner.getMode() == CssLexerMode.ATTRIBUTE_SELECTOR;
    if (hasAttributeError) {
      this._error(
          `Unbalanced CSS attribute selector at column ${previousToken.line}:${previousToken.column}`,
          previousToken);
    let end = this._getScannerIndex() - 1;
    // this happens if the selector is not directly followed by
    // a comma or curly brace without a space in between
    let operator: CssToken|null = null;
    let operatorScanCount = 0;
    let lastOperatorToken: CssToken|null = null;
    if (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
      while (operator == null && !characterContainsDelimiter(this._scanner.peek, delimiters) &&
             isSelectorOperatorCharacter(this._scanner.peek)) {
        let token = this._scan();
        const tokenOperator = token.strValue;
        operatorScanCount++;
        lastOperatorToken = token;
        if (tokenOperator != SPACE_OPERATOR) {
          switch (tokenOperator) {
            case SLASH_CHARACTER:
              // /deep/ operator
              let deepToken = this._consume(CssTokenType.Identifier);
              let deepSlash = this._consume(CssTokenType.Character);
              let index = lastOperatorToken.index;
              let line = lastOperatorToken.line;
              let column = lastOperatorToken.column;
              if (deepToken != null && deepToken.strValue.toLowerCase() == 'deep' &&
                  deepSlash.strValue == SLASH_CHARACTER) {
                token = new CssToken(
                    lastOperatorToken.index, lastOperatorToken.column, lastOperatorToken.line,
                    CssTokenType.Identifier, DEEP_OPERATOR_STR);
              } else {
                const text = SLASH_CHARACTER + deepToken.strValue + deepSlash.strValue;
                this._error(
                    generateErrorMessage(
                        this._getSourceContent(), `${text} is an invalid CSS operator`, text, index,
                        line, column),
                    lastOperatorToken);
                token = new CssToken(index, column, line, CssTokenType.Invalid, text);
              break;
            case GT_CHARACTER:
              // >>> operator
              if (this._scanner.peek == chars.$GT && this._scanner.peekPeek == chars.$GT) {
                this._consume(CssTokenType.Character, GT_CHARACTER);
                this._consume(CssTokenType.Character, GT_CHARACTER);
                token = new CssToken(
                    lastOperatorToken.index, lastOperatorToken.column, lastOperatorToken.line,
                    CssTokenType.Identifier, TRIPLE_GT_OPERATOR_STR);
              break;
          operator = token;
      // so long as there is an operator then we can have an
      // ending value that is beyond the selector value ...
      // otherwise it's just a bunch of trailing whitespace
      if (operator != null) {
        end = operator.index;
    this._scanner.consumeWhitespace();
    const strValue = this._extractSourceContent(start, end);
    // if we do come across one or more spaces inside of
    // the operators loop then an empty space is still a
    // valid operator to use if something else was not found
    if (operator == null && operatorScanCount > 0 && this._scanner.peek != chars.$LBRACE) {
      operator = lastOperatorToken;
    // please note that `endToken` is reassigned multiple times below
    // so please do not optimize the if statements into if/elseif
    let startTokenOrAst: CssToken|CssAst|null = null;
    let endTokenOrAst: CssToken|CssAst|null = null;
    if (selectorCssTokens.length > 0) {
      startTokenOrAst = startTokenOrAst || selectorCssTokens[0];
      endTokenOrAst = selectorCssTokens[selectorCssTokens.length - 1];
    if (pseudoSelectors.length > 0) {
      startTokenOrAst = startTokenOrAst || pseudoSelectors[0];
      endTokenOrAst = pseudoSelectors[pseudoSelectors.length - 1];
    if (operator != null) {
      startTokenOrAst = startTokenOrAst || operator;
      endTokenOrAst = operator;
    const span = this._generateSourceSpan(startTokenOrAst !, endTokenOrAst);
    return new CssSimpleSelectorAst(span, selectorCssTokens, strValue, pseudoSelectors, operator !);
  /** @internal */
  _parseSelector(delimiters: number): CssSelectorAst {
    delimiters |= COMMA_DELIM_FLAG;
    this._scanner.setMode(CssLexerMode.SELECTOR);
    const simpleSelectors: CssSimpleSelectorAst[] = [];
    while (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
      simpleSelectors.push(this._parseSimpleSelector(delimiters));
      this._scanner.consumeWhitespace();
    const firstSelector = simpleSelectors[0];
    const lastSelector = simpleSelectors[simpleSelectors.length - 1];
    const span = this._generateSourceSpan(firstSelector, lastSelector);
    return new CssSelectorAst(span, simpleSelectors);
  /** @internal */
  _parseValue(delimiters: number): CssStyleValueAst {
    delimiters |= RBRACE_DELIM_FLAG | SEMICOLON_DELIM_FLAG | NEWLINE_DELIM_FLAG;
    this._scanner.setMode(CssLexerMode.STYLE_VALUE);
    const start = this._getScannerIndex();
    const tokens: CssToken[] = [];
    let wsStr = '';
    let previous: CssToken = undefined !;
    while (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
      let token: CssToken;
      if (previous != null && previous.type == CssTokenType.Identifier &&
          this._scanner.peek == chars.$LPAREN) {
        token = this._consume(CssTokenType.Character, '(');
        tokens.push(token);
        this._scanner.setMode(CssLexerMode.STYLE_VALUE_FUNCTION);
        token = this._scan();
        tokens.push(token);
        this._scanner.setMode(CssLexerMode.STYLE_VALUE);
        token = this._consume(CssTokenType.Character, ')');
        tokens.push(token);
      } else {
        token = this._scan();
        if (token.type == CssTokenType.Whitespace) {
          wsStr += token.strValue;
        } else {
          wsStr = '';
          tokens.push(token);
      previous = token;
    const end = this._getScannerIndex() - 1;
    this._scanner.consumeWhitespace();
    const code = this._scanner.peek;
    if (code == chars.$SEMICOLON) {
      this._consume(CssTokenType.Character, ';');
    } else if (code != chars.$RBRACE) {
      this._error(
          generateErrorMessage(
              this._getSourceContent(), `The CSS key/value definition did not end with a semicolon`,
              previous.strValue, previous.index, previous.line, previous.column),
          previous);
    const strValue = this._extractSourceContent(start, end);
    const startToken = tokens[0];
    const endToken = tokens[tokens.length - 1];
    const span = this._generateSourceSpan(startToken, endToken);
    return new CssStyleValueAst(span, tokens, strValue);
  /** @internal */
  _collectUntilDelim(delimiters: number, assertType: CssTokenType|null = null): CssToken[] {
    const tokens: CssToken[] = [];
    while (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
      const val = assertType != null ? this._consume(assertType) : this._scan();
      tokens.push(val);
    return tokens;
  /** @internal */
  _parseBlock(delimiters: number): CssBlockAst {
    delimiters |= RBRACE_DELIM_FLAG;
    this._scanner.setMode(CssLexerMode.BLOCK);
    const startToken = this._consume(CssTokenType.Character, '{');
    this._scanner.consumeEmptyStatements();
    const results: CssRuleAst[] = [];
    while (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
      results.push(this._parseRule(delimiters));
    const endToken = this._consume(CssTokenType.Character, '}');
    this._scanner.setMode(CssLexerMode.BLOCK);
    this._scanner.consumeEmptyStatements();
    const span = this._generateSourceSpan(startToken, endToken);
    return new CssBlockAst(span, results);
  /** @internal */
  _parseStyleBlock(delimiters: number): CssStylesBlockAst|null {
    delimiters |= RBRACE_DELIM_FLAG | LBRACE_DELIM_FLAG;
    this._scanner.setMode(CssLexerMode.STYLE_BLOCK);
    const startToken = this._consume(CssTokenType.Character, '{');
    if (startToken.numValue != chars.$LBRACE) {
      return null;
    const definitions: CssDefinitionAst[] = [];
    this._scanner.consumeEmptyStatements();
    while (!characterContainsDelimiter(this._scanner.peek, delimiters)) {
      definitions.push(this._parseDefinition(delimiters));
      this._scanner.consumeEmptyStatements();
    const endToken = this._consume(CssTokenType.Character, '}');
    this._scanner.setMode(CssLexerMode.STYLE_BLOCK);
    this._scanner.consumeEmptyStatements();
    const span = this._generateSourceSpan(startToken, endToken);
    return new CssStylesBlockAst(span, definitions);
  /** @internal */
  _parseDefinition(delimiters: number): CssDefinitionAst {
    this._scanner.setMode(CssLexerMode.STYLE_BLOCK);
    let prop = this._consume(CssTokenType.Identifier);
    let parseValue: boolean = false;
    let value: CssStyleValueAst|null = null;
    let endToken: CssToken|CssStyleValueAst = prop;
    // the colon value separates the prop from the style.
    // there are a few cases as to what could happen if it
    // is missing
    switch (this._scanner.peek) {
      case chars.$SEMICOLON:
      case chars.$RBRACE:
      case chars.$EOF:
        parseValue = false;
        break;
      default:
        let propStr = [prop.strValue];
        if (this._scanner.peek != chars.$COLON) {
          // this will throw the error
          const nextValue = this._consume(CssTokenType.Character, ':');
          propStr.push(nextValue.strValue);
          const remainingTokens = this._collectUntilDelim(
              delimiters | COLON_DELIM_FLAG | SEMICOLON_DELIM_FLAG, CssTokenType.Identifier);
          if (remainingTokens.length > 0) {
            remainingTokens.forEach((token) => { propStr.push(token.strValue); });
          endToken = prop =
              new CssToken(prop.index, prop.column, prop.line, prop.type, propStr.join(' '));
        // this means we've reached the end of the definition and/or block
        if (this._scanner.peek == chars.$COLON) {
          this._consume(CssTokenType.Character, ':');
          parseValue = true;
        break;
    if (parseValue) {
      value = this._parseValue(delimiters);
      endToken = value;
    } else {
      this._error(
          generateErrorMessage(
              this._getSourceContent(), `The CSS property was not paired with a style value`,
              prop.strValue, prop.index, prop.line, prop.column),
          prop);
    const span = this._generateSourceSpan(prop, endToken);
    return new CssDefinitionAst(span, prop, value !);
  /** @internal */
  _assertCondition(status: boolean, errorMessage: string, problemToken: CssToken): boolean {
    if (!status) {
      this._error(errorMessage, problemToken);
      return true;
    return false;
  /** @internal */
  _error(message: string, problemToken: CssToken) {
    const length = problemToken.strValue.length;
    const error = CssParseError.create(
        this._file, 0, problemToken.line, problemToken.column, length, message);
    this._errors.push(error);
export class CssParseError extends ParseError {
  static create(
      file: ParseSourceFile, offset: number, line: number, col: number, length: number,
      errMsg: string): CssParseError {
    const start = new ParseLocation(file, offset, line, col);
    const end = new ParseLocation(file, offset, line, col + length);
    const span = new ParseSourceSpan(start, end);
    return new CssParseError(span, 'CSS Parse Error: ' + errMsg);
  constructor(span: ParseSourceSpan, message: string) { super(span, message); }
Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

css_parser.ts

Latest commit

History

css_parser.ts

File metadata and controls
