@johanneslumpe/css-value-declaration-grammer-lexer

css-value-declaration-grammer-lexer

Lexer for value declarations found at https://github.com/mdn/data/. It currently implements a subset of instructions, not the full spec.

As of now it supports:

• keywords
• data types
• functions
• groups
• combinators (|, ||, , &&)
• multipliers (+, *, ?, !, #, {})
• literal characters (,, /)

Get it

npm i @johanneslumpe/css-value-declaration-grammer-lexer

Use it

Below is a basic example of how to use the lexer:

import { lexValueDeclarationGrammar, formatTokens } from '@johanneslumpe/css-value-declaration-grammer-lexer';
const lexer = lexValueDeclarationGrammar(
  'hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )',
);

// `formatToken` will return a pretty-printed version of the emitted tokens
// which is useful for easy inspection of the token result
console.log(formatTokens(lexer.emittedTokens));

// the above will log:
//
// hsl(                                                        FUNCTION (FUNCTION_START)
//   <hue>                                                     DATA_TYPE (BASIC)
//                                                             COMBINATOR (JUXTAPOSITION)
//   <percentage>                                              DATA_TYPE (BASIC)
//                                                             COMBINATOR (JUXTAPOSITION)
//   <percentage>                                              DATA_TYPE (BASIC)
//                                                             COMBINATOR (JUXTAPOSITION)
//   [                                                         GROUP (GROUP_START)
//     /                                                       LITERAL
//                                                             COMBINATOR (JUXTAPOSITION)
//     <alpha-value>                                           DATA_TYPE (BASIC)
//   ]                                                         GROUP (GROUP_END)
//   ?                                                         MULTIPLIER (QUESTION_MARK)
// )                                                           FUNCTION (FUNCTION_END)
// |                                                           COMBINATOR (SINGLE_BAR)
// hsl(                                                        FUNCTION (FUNCTION_START)
//   <hue>                                                     DATA_TYPE (BASIC)
//   ,                                                         LITERAL
//                                                             COMBINATOR (JUXTAPOSITION)
//   <percentage>                                              DATA_TYPE (BASIC)
//   ,                                                         LITERAL
//                                                             COMBINATOR (JUXTAPOSITION)
//   <percentage>                                              DATA_TYPE (BASIC)
//   ,                                                         LITERAL
//                                                             COMBINATOR (JUXTAPOSITION)
//   <alpha-value>                                             DATA_TYPE (BASIC)
//   ?                                                         MULTIPLIER (QUESTION_MARK)
// )                                                           FUNCTION (FUNCTION_END)

Documentation

Typedocs can be found in the docs folder