Skip to content

PostCSS plugin to extract values from css properties and put them into variables.

License

Notifications You must be signed in to change notification settings

lutien/postcss-extract-value

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PostCSS Extract Value Build Status Coverage Status

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 keywords) will be extracted from values.

scope

Type: string
Required: false
Default: :root

You can set custom selector, which will contain variables.

variableSyntax

Type: string
Required: false
Default: ``

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

templateVariableName

Type: string
Required: false
Default: ``

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

Usage templateVariableName

With options filterByProps or without any options by default:

[propertyName]

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

With options onlyColor:

[colorKeyword]

Color keyword of the nearest color.

[tint]

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

Others

[selectorName]

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.

About

PostCSS plugin to extract values from css properties and put them into variables.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published