feat(core): ensure CSS parser tracks start/end values and understands complex pseudo selectors
This commit is contained in:
Matias Niemelä
parent
e0c1c13004
commit
935c39a7e2
|
|
@ -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;
|
||||
}
|
||||
|
||||
var next = output.token;
|
||||
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:
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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 */) {
|
||||
return tokenize(code, false, CssLexerMode.PSEUDO_SELECTOR);
|
||||
function tokenizePseudo(code: string, withArgs = false): CssToken[] {
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
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();
|
||||
expect(() => { tokenizePseudo('not(.selector)', true); }).toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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']);
|
||||
assertTokens(rule.selectors[1].tokens, ['#', 'id']);
|
||||
assertTokens(rule.selectors[2].tokens, ['tag']);
|
||||
assertTokens(rule.selectors[3].tokens, ['[', 'attr', ']']);
|
||||
assertTokens(rule.selectors[4].tokens, ['key', ' ', '+', ' ', 'value']);
|
||||
assertTokens(rule.selectors[5].tokens, ['*', ' ', 'value']);
|
||||
assertTokens(rule.selectors[6].tokens, [':', '-moz-any-link']);
|
||||
var classRule = rule.selectors[0];
|
||||
var idRule = rule.selectors[1];
|
||||
var tagRule = rule.selectors[2];
|
||||
var attrRule = rule.selectors[3];
|
||||
var plusOpRule = rule.selectors[4];
|
||||
var starOpRule = rule.selectors[5];
|
||||
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];
|
||||
assertTokens(selector.tokens, ['div', ':', 'not', '(', '.', 'ignore-this-div', ')']);
|
||||
var simpleSelector = rule1.selectors[0].selectorParts[0];
|
||||
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', () => {
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
method: any /** TODO #9100 */, ast: any /** TODO #9100 */, context: any /** TODO #9100 */) {
|
||||
_capture(method: string, ast: CssAST, context: any) {
|
||||
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 {
|
||||
// nothing
|
||||
visitCssUnknownRule(ast: CssUnknownRuleAST, context: any): void {
|
||||
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];
|
||||
_assertTokens(query1.query, ['all', 'and', '(', 'max-width', '100', 'px', ')']);
|
||||
var 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', () => {
|
||||
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];
|
||||
expect(query1.type).toEqual(BlockType.Import);
|
||||
_assertTokens(query1.value.tokens, ['url', '(', 'file.css', ')']);
|
||||
var 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', () => {
|
||||
|
|
@ -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']);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue