css-hex-to-vars-transformer
v0.0.4
Published
A tool to find all hex codes in your css file, which will then be combined and converted to css variables.
Downloads
3
Maintainers
Readme
CSS hex to vars transformer
A fun project to publish a first open source npm package!
Takes all hex codes of a single css file, creates css variables and swaps the hex codes with the according variables.
Outputs the reworked css file and an extra variables.css
.
Installation
Install with npm
$ npm i css-hex-to-vars-transformer --save
Usage
Currently the tool is just meant to be run directly on cli.
Run this on your terminal:
> ./node_modules/.bin/css-hex-to-vars-transformer PATH_TO_YOUR_CSS_FILE
Example Output
Output files will be inside /dist-vars
.
example.css
.aclass {
background: #ffffff;
}
.bclass {
background: #ffffff;
}
.cclass {
background: #000000;
}
.dclass {
color: #abcdef;
background: #000000;
}
.eclass {
background: #dddfff;
color: #aaabbb;
}
After transformation you have following two files:
styles.css
.aclass {
background: var(colorvariable-0);
}
.bclass {
background: var(colorvariable-0);
}
.cclass {
background: var(colorvariable-1);
}
.dclass {
color: var(colorvariable-2);
background: var(colorvariable-1);
}
.eclass {
background: var(colorvariable-3);
color: var(colorvariable-4);
}
variables.css
:root {
--colorvariable-0: #ffffff;
--colorvariable-1: #000000;
--colorvariable-2: #abcdef;
--colorvariable-3: #dddfff;
--colorvariable-4: #aaabbb;
}
Contributing
Pull requests and ideas are welcome! You can find the repo here.
Author
Thomas Fischer