simonwep/cssvjs

Fast, spec-conform css-value parser written entirely in vanilla JavaScript. Can be used in any environment.

Fast, Refined CSS Value-Parser

Getting Started

⚠ cssvjs is currently not stable and heavily under development. The API might change and all 0.0.x releases should be treated as test / preview releases.

Install via npm:

$ npm install cssvjs

Install via yarn:

$ yarn add cssvjs

Include directly via jsdelivr:

<script src="https://cdn.jsdelivr.net/npm/graceful-ws/dist/cssvjs.min.js"></script>

Usage

import {parse} from 'cssvjs';

// Return first matching type
// const {parse} = require('cssvjs'); // Without es6 import
// const {parse} = CSSvJS; // In a browser env
console.log(parse(`rgba(40 54 22 / 23%)`));

// Targed a specific type
console.log(parse('linear-gradient(to right, red, blue)', 'gradient');

Result of parse(rgba(40 54 22 / 23%)):

{
  type: 'color',
  format: 'rgba',
  value: [
    {type: 'number', value: 40},
    {type: 'number', value: 54},
    {type: 'number', value: 22},
    {type: 'percentage', value: 23}
  ]
}

Supported values

All values are fully tested, submit an issue if you find a bug. I'll slowly fill add more types. Version 1.0.0 will cover all the basic ones.

• <angle> parser / tests
• <color> parser / tests
• <length> parser / tests
• <percentage> parser / tests
• <position> parser / tests
• <ratio> parser / tests
• <string> parser / tests
• <time> parser / tests
• <url> parser / tests
• <flex-value> parser / tests
• <resolution> parser / tests
• <blend-mode> parser / tests
• <integer> parser / tests
• <number> parser / tests
• <border-radius> parser / tests
• <basic-shape> parser / tests
• <gradient> parser / tests
• <shape> parser / tests (Deprecated)
• <transform-function> parser / tests
• <filter-function> parser / tests
• <timing-function> parser / tests
• <var> parser / tests
• <calc> parser / tests
• <element> parser / tests
• <repeat-style> parser / tests
• <env> parser / tests (Editors Draft)
• <frequency> parser / tests
• <attr> parser / tests
• <cross-fade> parser / tests (Working Draft)
• <minmax> parser / tests
• <min> parser / tests
• <max> parser / tests
• <clamp> parser / tests
• <custom-ident> parser / tests
• <symbols> parser / tests
• <counters> parser / tests
• <inheritance-keyword> parser / tests