postcss-prefix-webpack

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

Options

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

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:

#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 */
}

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.