lexeme v0.0.1
/LL
| LL
| LL /eeeeee /xx /xx /eeeeee /mmmmmm/mmmm /eeeeee
| LL /ee__ ee | xx /xx/ /ee__ ee | mm_ mm_ mm /ee__ ee
| LL | eeeeeeee \ xxxx/ | eeeeeeee | mm \ mm \ mm | eeeeeeee
| LL | ee_____/ >xx xx | ee_____/ | mm | mm | mm | ee_____/
| LLLLLLLL | eeeeeee /xx/\ xx | eeeeeee | mm | mm | mm | eeeeeee
|________/ \_______/ |__/ \__/ \_______/ |__/ |__/ |__/ \_______/
Lexeme is a lexical analyzer that turns CSS into parser friendly tokens.
Install
Install Lexeme from npm:
npm install lexeme
Or with yarn:
yarn add lexeme
Then require it into any module:
const { tokenize } = require('lexeme');
Tokens
A single token is represented as an Array
with the following shape:
[
// The token type, for example `BRACE_OPEN`
type{String},
// The value of the token, for example `{`
value{String},
// The position of the string being tokenized, for example [1,10]
location{Array<line<number>, column<?number>}
]
Token Types
Type | Example |
---|---|
BRACE_OPEN | { |
BRACE_CLOSE | } |
MEDIA_QUERY | @media (min-width: 300px) |
KEYFRAME | @keyframes slide |
KEYFRAME_SELECTOR | from | to | 0-100% |
FONT_FACE | @font-face |
CHARSET | @charset |
SUPPORTS | @supports |
DECLARATION | display: flex; |
SELECTOR | nav | span.icon | h1, h2, h3 |
Note: Inline and multi-line comments in CSS are ignored.
API
tokenize
tokenize(CSS)
Description:
Transforms CSS into tokens.
Parameters:
CSS{String}
: The CSS source code.
Returns:
An interface to query tokens:
{ tokens: ƒ tokens() selectors: ƒ selectors() declarations: ƒ declarations() mediaQueries: ƒ mediaQueries() rulesets: ƒ rulesets() rulesetsAsObjects: ƒ rulesetsAsObjects() }
.tokens()
tokenize(CSS).tokens();
Returns:
An
Array
containing all tokens.
.selectors()
tokenize(CSS).selectors();
Returns:
An
Array
containing tokens of the typeSELECTOR
.
.declarations()
tokenize(CSS).declarations();
Returns:
An
Array
containing tokens of the typeDECLARATION
.
.mediaQueries()
tokenize(CSS).mediaQueries();
Returns:
An
Array
containing tokens of the typeMEDIA_QUERY
.
.rulesets()
tokenize(CSS).rulesets();
Returns:
An
Array
containing aMap
for each ruleset:[ Map { selector{String}, declarations{Array<String>} }, Map { ... } ]
.rulesetsAsObjects()
tokenize(CSS).rulesetsAsObjects();
Returns:
An
Array
containing anObject
for each ruleset:[ { selector{String}, declarations{Array<String>} }, { ... } ]
Tests
Run all tests with:
npm test
Or run a specific test with:
npm test tokens
Licence
Copyright (c) 2018-present, Callum Hart
6 years ago