postcss-prefix-webpack

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

Usage

Install postcss-prefix-webpack on your project directory:

``
npm install postcss-prefix-webpack --save-dev
`

$3

##### 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: []

Example


Example of usage with results generated by the plugin.
#### Code
`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 /
}
``

Recommendation

* Use it with react-classname-prefix-loader-with-lookup for react className

Credits

Plugin based on
- postcss-class-prefix create by thompsongl.
- postcss-prefixer create by Marcelo Ucker.