PostCSS plugin to add a prefix to all css selectors classes and ids.
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"
}
postcss([ require('postcss-prefixer')({ /* options */ }) ])
Type: string
Default: none
String to be used as prefix
Type: array
Default: []
Array of selectors to be ignored by the plugin, accepts string and regex.
Example of usage with results generated by the plugin.
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);
#selector-one .example {
/* content */
}
.selector-two .example2 {
/* content */
}
#ignore .ignore {
/* content */
}
#ignore .other {
/* content */
}
#selector-one .prefix-example {
/* content */
}
.selector-two .prefix-example2 {
/* content */
}
#ignore .ignore {
/* content */
}
#ignore .prefix-other {
/* content */
}
Plugin based on postcss-class-prefix create by thompsongl.