Transforms CSS to use CSS variables based on a JSON configuration file. This allows for easier theming and consistency, especially when working with frameworks or design systems that rely on CSS variables.
This tool helps manage CSS variables by:
- Replacing hardcoded values (like hex codes) with CSS variables.
- Replacing existing
var(...)references with mapped variables. - Updating variable declarations to use mapped variables.
- Generating a
*.vars.cssfile for all target theme variables.
It uses configuration files to define mappings and supports both robust AST-based (default) and faster Regex-based transformations.
npm install -g css-variables-transformer
# or locally
npm install --save-dev css-variables-transformer1. Transform CSS:
css-variables-transformer -i input.css -o output.css -c theme-map.json2. Generate Mapping Files (Optional):
css-variables-extractor -i source.css -o config/default-mapping.json
# or directly node dist/bin/extract-variables.js -i source.css -o config/default-mapping.json- Transformer Tool Usage: Detailed CLI options, configuration file format, advanced usage (two-step transformation), and the generated
.vars.cssfile. - Mapping Generation: How to use the
css-variables-extractorscript and understand its output files. - How It Works: Technical details on the AST and Regex transformation methods.
- Development Guide: Information for contributors, setup, development commands, project structure, and AI assistant configuration.
- LightningCSS - How to Transform a DashedIdent value - Blog post explaining how to use LightningCSS visitors to transform CSS variable values.
- LightningCSS AST Viewer
This code was generated with AI.
Contributions are welcome! Please see the Development Guide for details. Please feel free to submit a Pull Request.
MIT