Skip to content

Extracts CSS variable and export them to a JavaScript object

License

Notifications You must be signed in to change notification settings

wanadev/css-var-parser

Folders and files

NameName
Last commit message
Last commit date
Oct 5, 2023
Oct 3, 2023
Oct 3, 2023
Aug 16, 2023
Aug 16, 2023
Oct 5, 2023
Oct 3, 2023
Oct 3, 2023
Oct 5, 2023
Oct 5, 2023
Oct 5, 2023
Oct 5, 2023

Repository files navigation

CSS Var Parser

Lint and test NPM Version License Discord

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