wanadev/css-var-parser

Extracts CSS variable and export them to a JavaScript object

CSS Var Parser

Install

npm install css-var-parser

Usage

CSS Example :

#element.disabled {
    border-left-width: var(--Element_border-left-width--disabled, var(--Radio_border-width--disabled, var(--LC-border-width--disabled, 1px)));
}

JS Example :

import { readFileSync } from "fs";
import css_var_parser from "./src/parser.js";


import { dirname } from 'path';
import { fileURLToPath } from 'url';

const __dirname = dirname(fileURLToPath(import.meta.url));

const cssContent = readFileSync(__dirname + "/index.css", "utf-8");
const variables = css_var_parser.parse(cssContent);

console.log(JSON.stringify(variables));

Output:

[
  {
    selector: "#element.disabled",
    properties: [
      {
        propertyName: "border-left-width",
        variables: [
          {
            name: "--Element_border-left-width--disabled",
            fallback: "--Radio_border-width--disabled",
          },
          {
            name: "--Radio_border-width--disabled",
            fallback: "--LC-border-width--disabled",
          },
          {
            name: "--LC-border-width--disabled",
            fallback: undefined,
          },
        ],
        defaultValue: "1px",
      }
    ]
  }
]

Changelog

• [NEXT] (changes on main that have not been released yet):

  • build(deps): bump postcss from 8.4.28 to 8.4.31 (@damienfern)
  • Fix branch name in link LICENSE badge (@damienfern)

• v0.4.1:

  • Changed package name for its first public release
  • First public release