postcss-variables-prefixer-plugin

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

Usage

With postcss.config.js:

In postcss.config.js

module.exports = {
  plugins: [
    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 in postcss.config.js

module.exports = {
  plugins: [
    require('postcss-variables-prefixer')({ prefix: 'prefix-' })
  ]
}

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-variables-prefixer