postcss-variables-prefixer
v1.2.0
Published
postcss plugin to prefix all css custom properties
Downloads
2,041
Maintainers
Readme
postcss-variables-prefixer
PostCSS plugin to add a prefix to all css custom properties.
Usage
With PostCSS cli:
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
"scripts": {
"postcss": "postcss input.css -u postcss-variables-prefixer -o output.css"
}
Others
postcss([ require('postcss-variables-prefixer')({ /* options */ }) ])
Options
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.
Code
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);
Input:
: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)
}
Output:
: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.