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.