Socket
Socket
Sign inDemoInstall

postcss-prefix-webpack

Package Overview
Dependencies
3
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-prefix-webpack


Version published
Maintainers
1
Install size
2.84 MB
Created

Readme

Source

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

Keywords

FAQs

Last updated on 09 Aug 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc