style(compiler): reformat of codebase with new clang-format version (#36520)
This commit reformats the packages/compiler tree using the new version of clang-format. PR Close #36520
This commit is contained in:
Alex Rickabaugh
@ -7,370 +7,381 @@
|
||||
*/
|
||||
|
||||
import {describe, expect, it} from '../../../core/testing/src/testing_internal';
|
||||
import {CssLexer, CssLexerMode, CssToken, CssTokenType, cssScannerError, getRawMessage, getToken} from '../../src/css_parser/css_lexer';
|
||||
import {CssLexer, CssLexerMode, cssScannerError, CssToken, CssTokenType, getRawMessage, getToken} from '../../src/css_parser/css_lexer';
|
||||
|
||||
(function() {
|
||||
function tokenize(
|
||||
code: string, trackComments: boolean = false,
|
||||
mode: CssLexerMode = CssLexerMode.ALL): CssToken[] {
|
||||
const scanner = new CssLexer().scan(code, trackComments);
|
||||
scanner.setMode(mode);
|
||||
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();
|
||||
const tokens: CssToken[] = [];
|
||||
let output = scanner.scan();
|
||||
while (output != null) {
|
||||
const error = output.error;
|
||||
if (error != null) {
|
||||
throw cssScannerError(getToken(error), getRawMessage(error));
|
||||
}
|
||||
|
||||
return tokens;
|
||||
tokens.push(output.token);
|
||||
output = scanner.scan();
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
return tokens;
|
||||
}
|
||||
|
||||
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);
|
||||
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 not consider whitespace or newline values at all when whitespace mode is off',
|
||||
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|null = null;
|
||||
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',
|
||||
() => {
|
||||
const newlines = ['\n', '\r\n', '\r', '\f'].join('');
|
||||
const tokens = tokenize(newlines);
|
||||
expect(tokens.length).toEqual(0);
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
it('should lex simple selectors and their inner properties', () => {
|
||||
const cssCode = '\n' +
|
||||
' .selector { my-prop: my-value; }\n';
|
||||
const tokens = tokenize(cssCode);
|
||||
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);
|
||||
}
|
||||
|
||||
expect(tokens[0].type).toEqual(CssTokenType.Character);
|
||||
expect(tokens[0].strValue).toEqual('.');
|
||||
// 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(tokens[1].type).toEqual(CssTokenType.Identifier);
|
||||
expect(tokens[1].strValue).toEqual('selector');
|
||||
expect(() => {
|
||||
tokenizeQuery('(max-height: 10 + 20)');
|
||||
}).toThrow();
|
||||
|
||||
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('}');
|
||||
expect(() => {
|
||||
tokenizeQuery('(max-height: fifty < 100)');
|
||||
}).toThrow();
|
||||
});
|
||||
|
||||
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|null = null;
|
||||
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(`
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
expect(() => tokenizeStyles(` key$: value; `)).toThrow();
|
||||
expect(() => tokenizeStyles(` key: value$; `)).toThrow();
|
||||
expect(() => tokenizeStyles(` key: value + 10; `)).toThrow();
|
||||
expect(() => tokenizeStyles(` key: &value; `)).toThrow();
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
@ -111,26 +111,26 @@ export function assertTokens(tokens: CssToken[], valuesArr: string[]) {
|
||||
expect(ast.rules.length).toEqual(1);
|
||||
|
||||
const rule = <CssKeyframeRuleAst>ast.rules[0];
|
||||
expect(rule.name !.strValue).toEqual('rotateMe');
|
||||
expect(rule.name!.strValue).toEqual('rotateMe');
|
||||
|
||||
const block = <CssBlockAst>rule.block;
|
||||
const fromRule = <CssKeyframeDefinitionAst>block.entries[0];
|
||||
|
||||
expect(fromRule.name !.strValue).toEqual('from');
|
||||
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%');
|
||||
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');
|
||||
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', ')']);
|
||||
@ -695,7 +695,7 @@ export function assertTokens(tokens: CssToken[], valuesArr: string[]) {
|
||||
const ast = output.ast;
|
||||
|
||||
assertMatchesOffsetAndChar(ast.location.start, 0, '#');
|
||||
assertMatchesOffsetAndChar(ast.location.end, 22, undefined !);
|
||||
assertMatchesOffsetAndChar(ast.location.end, 22, undefined!);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
|
||||
import {beforeEach, describe, expect, it} from '../../../core/testing/src/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 {CssAst, CssAstVisitor, CssAtRulePredicateAst, CssBlockAst, CssDefinitionAst, CssInlineRuleAst, CssKeyframeDefinitionAst, CssKeyframeRuleAst, CssMediaQueryRuleAst, CssPseudoSelectorAst, CssRuleAst, CssSelectorAst, CssSelectorRuleAst, CssSimpleSelectorAst, CssStylesBlockAst, CssStyleSheetAst, CssStyleValueAst, 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 {
|
||||
@ -29,7 +29,9 @@ class MyVisitor implements CssAstVisitor {
|
||||
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: CssStyleValueAst, context: any): void {
|
||||
this._capture('visitCssValue', ast, context);
|
||||
@ -61,20 +63,24 @@ class MyVisitor implements CssAstVisitor {
|
||||
|
||||
visitCssSelectorRule(ast: CssSelectorRuleAst, context: any): void {
|
||||
this._capture('visitCssSelectorRule', ast, context);
|
||||
ast.selectors.forEach((selAst: CssSelectorAst) => { selAst.visit(this, 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); });
|
||||
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); });
|
||||
ast.pseudoSelectors.forEach((pseudoAst: CssPseudoSelectorAst) => {
|
||||
pseudoAst.visit(this, context);
|
||||
});
|
||||
}
|
||||
|
||||
visitCssDefinition(ast: CssDefinitionAst, context: any): void {
|
||||
@ -84,18 +90,23 @@ class MyVisitor implements CssAstVisitor {
|
||||
|
||||
visitCssBlock(ast: CssBlockAst, context: any): void {
|
||||
this._capture('visitCssBlock', ast, context);
|
||||
ast.entries.forEach((entryAst: CssAst) => { entryAst.visit(this, 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); });
|
||||
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); });
|
||||
ast.rules.forEach((ruleAst: CssRuleAst) => {
|
||||
ruleAst.visit(this, context);
|
||||
});
|
||||
}
|
||||
|
||||
visitCssUnknownRule(ast: CssUnknownRuleAst, context: any): void {
|
||||
@ -116,21 +127,21 @@ function _getCaptureAst(capture: any[], index = 0): CssAst {
|
||||
}
|
||||
|
||||
(function() {
|
||||
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;
|
||||
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 = {};
|
||||
describe('CSS parsing and visiting', () => {
|
||||
let ast: CssStyleSheetAst;
|
||||
const context = {};
|
||||
|
||||
beforeEach(() => {
|
||||
const cssCode = `
|
||||
beforeEach(() => {
|
||||
const cssCode = `
|
||||
.rule1 { prop1: value1 }
|
||||
.rule2 { prop2: value2 }
|
||||
|
||||
@ -149,174 +160,174 @@ function _getCaptureAst(capture: any[], index = 0): CssAst {
|
||||
}
|
||||
}
|
||||
`;
|
||||
ast = parse(cssCode);
|
||||
});
|
||||
ast = parse(cssCode);
|
||||
});
|
||||
|
||||
it('should parse and visit a stylesheet', () => {
|
||||
const visitor = new MyVisitor(ast, context);
|
||||
const captures = visitor.captures['visitCssStyleSheet'];
|
||||
it('should parse and visit a stylesheet', () => {
|
||||
const visitor = new MyVisitor(ast, context);
|
||||
const captures = visitor.captures['visitCssStyleSheet'];
|
||||
|
||||
expect(captures.length).toEqual(1);
|
||||
expect(captures.length).toEqual(1);
|
||||
|
||||
const capture = captures[0];
|
||||
expect(capture[0]).toEqual(ast);
|
||||
expect(capture[1]).toEqual(context);
|
||||
});
|
||||
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'];
|
||||
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);
|
||||
expect(captures.length).toEqual(3);
|
||||
|
||||
const rule1 = <CssSelectorRuleAst>_getCaptureAst(captures, 0);
|
||||
expect(rule1).toEqual(ast.rules[0] as CssSelectorRuleAst);
|
||||
const rule1 = <CssSelectorRuleAst>_getCaptureAst(captures, 0);
|
||||
expect(rule1).toEqual(ast.rules[0] as CssSelectorRuleAst);
|
||||
|
||||
const firstSelector = rule1.selectors[0];
|
||||
const firstSimpleSelector = firstSelector.selectorParts[0];
|
||||
_assertTokens(firstSimpleSelector.tokens, ['.', 'rule1']);
|
||||
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] as CssSelectorRuleAst);
|
||||
const rule2 = <CssSelectorRuleAst>_getCaptureAst(captures, 1);
|
||||
expect(rule2).toEqual(ast.rules[1] as CssSelectorRuleAst);
|
||||
|
||||
const secondSelector = rule2.selectors[0];
|
||||
const secondSimpleSelector = secondSelector.selectorParts[0];
|
||||
_assertTokens(secondSimpleSelector.tokens, ['.', 'rule2']);
|
||||
const secondSelector = rule2.selectors[0];
|
||||
const secondSimpleSelector = secondSelector.selectorParts[0];
|
||||
_assertTokens(secondSimpleSelector.tokens, ['.', 'rule2']);
|
||||
|
||||
const rule3 = <CssSelectorRuleAst>_getCaptureAst(captures, 2);
|
||||
expect(rule3).toEqual(
|
||||
(ast.rules[2] as CssSelectorRuleAst).block.entries[0] as CssSelectorRuleAst);
|
||||
const rule3 = <CssSelectorRuleAst>_getCaptureAst(captures, 2);
|
||||
expect(rule3).toEqual(
|
||||
(ast.rules[2] as CssSelectorRuleAst).block.entries[0] as CssSelectorRuleAst);
|
||||
|
||||
const thirdSelector = rule3.selectors[0];
|
||||
const thirdSimpleSelector = thirdSelector.selectorParts[0];
|
||||
_assertTokens(thirdSimpleSelector.tokens, ['#', 'rule3']);
|
||||
});
|
||||
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'];
|
||||
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);
|
||||
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 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 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 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 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');
|
||||
});
|
||||
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'];
|
||||
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);
|
||||
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);
|
||||
});
|
||||
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'];
|
||||
it('should capture the media query predicate', () => {
|
||||
const visitor = new MyVisitor(ast, context);
|
||||
const captures = visitor.captures['visitCssAtRulePredicate'];
|
||||
|
||||
expect(captures.length).toEqual(1);
|
||||
expect(captures.length).toEqual(1);
|
||||
|
||||
const predicate = <CssAtRulePredicateAst>_getCaptureAst(captures, 0);
|
||||
expect(predicate.strValue).toEqual('@media all (max-width: 100px)');
|
||||
});
|
||||
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'];
|
||||
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);
|
||||
expect(captures.length).toEqual(1);
|
||||
|
||||
const inline1 = <CssInlineRuleAst>_getCaptureAst(captures, 0);
|
||||
expect(inline1.type).toEqual(BlockType.Import);
|
||||
_assertTokens(inline1.value.tokens, ['url', '(', 'file.css', ')']);
|
||||
});
|
||||
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'];
|
||||
it('should parse and visit the keyframe blocks', () => {
|
||||
const visitor = new MyVisitor(ast, context);
|
||||
const captures = visitor.captures['visitCssKeyframeRule'];
|
||||
|
||||
expect(captures.length).toEqual(1);
|
||||
expect(captures.length).toEqual(1);
|
||||
|
||||
const keyframe1 = <CssKeyframeRuleAst>_getCaptureAst(captures, 0);
|
||||
expect(keyframe1.name !.strValue).toEqual('rotate');
|
||||
expect(keyframe1.block.entries.length).toEqual(2);
|
||||
});
|
||||
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'];
|
||||
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);
|
||||
expect(captures.length).toEqual(2);
|
||||
|
||||
const def1 = <CssKeyframeDefinitionAst>_getCaptureAst(captures, 0);
|
||||
_assertTokens(def1.steps, ['from']);
|
||||
expect(def1.block.entries.length).toEqual(1);
|
||||
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);
|
||||
});
|
||||
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 = `
|
||||
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'];
|
||||
ast = parse(cssCode, true);
|
||||
const visitor = new MyVisitor(ast, context);
|
||||
const captures = visitor.captures['visitCssUnknownRule'];
|
||||
|
||||
expect(captures.length).toEqual(1);
|
||||
expect(captures.length).toEqual(1);
|
||||
|
||||
const rule = <CssUnknownRuleAst>_getCaptureAst(captures, 0);
|
||||
expect(rule.ruleName).toEqual('@someUnknownRule');
|
||||
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']);
|
||||
});
|
||||
_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']);
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user