Post CSS Prefix Plugin for webpack
npm install postcss-prefix-webpackWebpack plugin to add a prefix to all css selectors classes and ids.
postcss-prefix-webpack on your project directory:```
npm install postcss-prefix-webpack --save-dev
##### input - Input file Path
Type: string
Default: none
##### output - Output file path
Type: string
Default: none
##### prefixProperties - Object which has properties: prefix and ignore
##### prefix
Type: string
Default: none
String to be used as prefix
##### ignore
Type: array[]
Default:
js
const PostCSSPrefix = require('postcss-prefix-webpack');module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new PostCSSPrefix({
input:'./src/style.css',
output: './public/style-prefix.css',
prefixProperties: {
prefix: 'prefix-',
ignore: [/selector-/, '.ignore', '#ignore']
}
})
]
}
`#### Input:
`css
#selector-one .example {
/ content /
}.selector-two .example2 {
/ content /
}
#ignore .ignore {
/ content /
}
#ignore .other {
/ content /
}
`#### Output:
`css
#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.
- postcss-prefixer create by Marcelo Ucker.