Css Syntax Parser
A simple parser for MDN's "CSS value definition syntax".
let resolveSyntax = require('css-syntax-parser');
const syntax = resolveSyntax('[ <length> | <percentage> | auto ]{1,4}');
syntax.print();
console.log(syntax.type);
console.log(syntax.multiplier);
console.log(syntax.range.min);
console.log(syntax.range.max);
let content = syntax.content;
console.log(content.type);
console.log(content.combinator);
let child1 = content.children[1];
console.log(child1.type);
console.log(child1.name);
console.log(child1.nonTerminal);
in Typescript:
import {
resolveSyntax,
BracketsTerm,
ComposedTerm,
DataTypeTerm,
Term,
TermMultiplier,
TermType
} from 'css-syntax-parser';
const syntax: Term = resolveSyntax('[ <length> | <percentage> | auto ]{1,4}');
console.log(syntax.type);
if (syntax.type === TermType.BRACKETS) {
const brackets: BracketsTerm = <BracketsTerm>syntax;
if (brackets.multiplier === TermMultiplier.RANGE) {
console.log(brackets.multiplier);
console.log(brackets.range.min);
console.log(brackets.range.max);
}
if (brackets.content.type === TermType.COMPOSED) {
const content: ComposedTerm = <ComposedTerm>brackets.content;
console.log(content.type);
console.log(content.combinator);
if (content.children[1].type === TermType.DATA_TYPE) {
const child1: DataTypeTerm = <DataTypeTerm>content.children[1];
console.log(child1.type);
console.log(child1.name);
console.log(child1.nonTerminal);
}
}
}
Methods
Method |
---|
resolveSyntax(syntax, recursive?) |
resolveSyntaxByName(propertyName, recursive?) |
Terms
Type | Samples |
---|
literal | / , , |
keyword | black , top , none |
method | calc( <calc-sum> ) , repeat( <length-percentage> ) |
data-type | <calc-sum> , <'border-width'> |
composed | <attr-name> <type-or-unit> , <'border-style'> && <'color'> |
bracket | [ <string-token> && <ident-token> ] |
Combinators
Type | Samples |
---|
mandatory exact order | value1 value2 |
mandatory any order | value1 && value2 |
at least one | `value1 |
exactly one | `value1 |
Multipliers
Type | Samples |
---|
zero or more | * |
one or more | + |
optional | ? |
range | {1,4} |
array | # |
required | ! |
Recursive resolve
let { resolveSyntaxByName } = require('css-syntax-parser');
const syntax = resolveSyntaxByName('grid', true);
syntax.print();