postcss plugin to prefix all css selector classes and ids
npm install postcss-prefixer[PostCSS]: https://github.com/postcss/postcss
[PostCSS Usage]: https://github.com/postcss/postcss#usage
A [PostCSS] plugin to prefix css selectors.
```css
/ source css file /
#selector { / content / }
.selector { / content / }
.selector:hover { / content / }
.selector__element { / content / }
``
``css
/ output css file prefixed with "prfx__" /
#prfx__selector { / content / }
.prfx__selector { / content / }
.prfx__selector:hover { / content / }
.prfx__selector__element { / content / }
``
npm i -D postcss postcss-prefixer or yarn add -D postcss postcss-prefixer
create a postcss.config.js with:`js`
module.exports = {
plugins: [
require('postcss-prefixer')({ / options / })
]
}
> Refer to [PostCSS Usage] on how to use it with your preferred build tool.
#### Example
`js
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);
`
#### Options
| Name | Description |
|------------------|--------------------------------------------|
|prefix (string) | prefix value to be used |ignore` (array) | list of selectors to ignore, accepts regex |
|
Plugin based on postcss-class-prefix create by thompsongl.