PostCSS Extract Value
PostCSS plugin to extract values from css properties and put them into variables.
.foo {
width: 100px;
color: #000;
margin: 10px;
}
.bar {
color: #000;
margin: 15px;
}
:root {
--width-1: 100px;
--color-1: #000;
--margin-1: 10px;
--margin-2: 15px;
}
.foo {
width: var(--width-1);
color: var(--color-1);
margin: var(--margin-1);
}
.bar {
color: var(--color-1);
margin: var(--margin-2);
}
Usage
import postcssExtractValue from 'postcss-extract-value';
postcss([
postcssExtractValue(/* options */),
// more plugins...
])
Options
filterByProps
Type: array
Required: false
Default: []
You can add names of css properties and only from this properties will be extracted values.
onlyColor
Type: boolean
Required: false
Default: false
If you set true, only colors (hex, rgb, hsl, color keyword isn`t supported now) will be extracted from values.
See PostCSS docs for examples for your environment.