postcss-prefixer

postcss-prefixer

PostCSS plugin to add a prefix to all css selectors classes and ids.

Usage

With PostCSS cli:

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

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

and at your package.json

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

Others

postcss([ require('postcss-prefixer')({ /* options */ }) ])

Options

prefix

Type: string
Default: none

String to be used as prefix

ignore

Type: array
Default: []

Array of selectors 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-prefixer');

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

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

Input:

#selector-one .example {
  /* content */
}

.selector-two .example2 {
  /* content */
}

#ignore .ignore {
  /* content */
}

#ignore .other {
  /* content */
}

Output:

#selector-one .prefix-example {
  /* content */
}

.selector-two .prefix-example2 {
  /* content */
}

#ignore .ignore {
  /* content */
}

#ignore .prefix-other {
  /* content */
}

Credits

Plugin based on postcss-class-prefix create by thompsongl.