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

A lexer for css value declaration grammar

Stats

StarsIssuesVersionUpdatedCreatedSize
@johanneslumpe/css-value-declaration-grammer-lexer
0.1.43 years ago3 years agoMinified + gzip package size for @johanneslumpe/css-value-declaration-grammer-lexer in KB

Readme

css-value-declaration-grammer-lexer

Build status codecov

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.