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.