postcss-variables-prefixer

!Libraries.io dependency status for latest release

PostCSS plugin to add a prefix to all css custom properties.

Usage

$3

Install postcss, postcss-cli and postcss-variables-prefixer on your project directory:

``
npm install postcss postcss-cli postcss-variables-prefixer --save-dev
`

and in your package.json

`json
"scripts": {
"postcss": "postcss input.css -u postcss-variables-prefixer -o output.css"
}
`

$3


`js
postcss([ require('postcss-variables-prefixer')({ / options / }) ])
`

$3

#### prefix
Type: string

Default: none

String to be used as prefix

#### ignore
Type: array

Default: []

Array of css custom properties to be ignored by the plugin, accepts string and regex.

Example

Example of usage with results generated by the plugin.

$3

`js
const postcss = require('postcss');
const prefixer = require('postcss-variables-prefixer');

const input = fs.readFileSync('path/to/file.css', 'utf-8');

const output = postcss([
prefixer({
prefix: 'prefix-',
ignore: [ /bar/, '--ignore' ]
})
]).process(input);

`

$3


`css
:root {
--foo: red;
--foo-bar: green;
--ignore: 300px;
--not-ignored: 100px;
--bar: yellow;
}

div {
background-color: var(--foo);
color: var(--foo-bar);
width: var(--ignore);
height: var(--not-ignored);
border-color: var(--bar)
}
`

$3


`css
:root {
--prefix-foo: red;
--foo-bar: green;
--ignore: 300px;
--prefix-not-ignored: 100px;
--bar: yellow;
}

div {
background-color: var(--prefix-foo);
color: var(--foo-bar);
width: var(--ignore);
height: var(--prefix-not-ignored);
border-color: var(--bar)
}
``

Credits

Plugin inspired by postcss-prefixer created by marceloucker.

Thanks to Andrey Sitnik @ai and Jonathan Neal @jonathantneal for the help.