Implemented from : https://drafts.csswg.org/css-syntax/
Add CSS Tokenizer to your project:
npm install @csstools/css-tokenizer --save-devimport { tokenize } from '@csstools/css-tokenizer';
const myCSS = `@media only screen and (min-width: 768rem) {
.foo {
content: 'Some content!' !important;
}
}
`;
const tokens = tokenize({
css: myCSS,
});
console.log(tokens);Or use the streaming interface:
import { tokenizer, TokenType } from '@csstools/css-tokenizer';
const myCSS = `@media only screen and (min-width: 768rem) {
.foo {
content: 'Some content!' !important;
}
}
`;
const t = tokenizer({
css: myCSS,
});
while (true) {
const token = t.nextToken();
if (token[0] === TokenType.EOF) {
break;
}
console.log(token);
}{
onParseError?: (error: ParseError) => void
}The tokenizer is forgiving and won't stop when a parse error is encountered.
To receive parsing error information you can set a callback.
import { tokenizer, TokenType } from '@csstools/css-tokenizer';
const t = tokenizer({
css: '\\',
}, { onParseError: (err) => console.warn(err) });
while (true) {
const token = t.nextToken();
if (token[0] === TokenType.EOF) {
break;
}
}Parser errors will try to inform you where in the tokenizer logic the error happened. This tells you what kind of error occurred.
- specification compliance
- correctness
- reliability
- tokenizing and serializing must round trip losslessly
- exposing useful aspects about the source code
- runtime performance
- package size