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); }

import postcssExtractValue from 'postcss-extract-value'; postcss([ postcssExtractValue(/* options */), // more plugins... ])

Type: array
Required: false
Default: []

You can add names of css properties and only from this properties will be extracted values.

Type: boolean
Required: false
Default: false

If you set true, only colors (hex, rgb, hsl, color keywords) will be extracted from values.

Type: string
Required: false
Default: :root

You can set custom selector, which will contain variables.

Type: string
Required: false
Default: ``

By default it will be used css variables syntax, other available variants less and sass.

Type: string
Required: false
Default: ``

You can set template for variables using special words. See more information below.

Name of css property (width, border, etc.).

postcss([ postcssExtractValue({ templateVariableName: 'theme[propertyName]' }), ])

.foo { width: 100px; }

:root { --theme-width-1: 100px; } .foo { width: var(--theme-width-1); }

Color keyword of the nearest color.

Deviation in the dark or light side from the nearest color. (light\dark)

postcss([ postcssExtractValue({ templateVariableName: 'theme[tint][colorKeyword]', }), ])

.foo { border: 2px solid #cc0000; color: #ff0000; background-color: rgb(255, 26, 26); }

:root { --theme-dark-red-1: #cc0000; --theme-red-1: #ff0000; --theme-light-red-1: rgb(255, 26, 26); } .foo { border: 2px solid var(--theme-dark-red-1); color: var(--theme-red-1); background-color: var(--theme-light-red-1); }

Name of css selector (className, id, etc.)

postcss([ postcssExtractValue({ templateVariableName: 'theme[selectorName]' }), ])

.foo { width: 100px; }

:root { --theme-foo-1: 100px; } .foo { width: var(--theme-foo-1); }

See PostCSS docs for examples for your environment.