postcss-namespace-selector
Prefix every CSS selector with a custom namespace
.a => .namespace .a
Table of Contents
Install
$ npm install postcss-namespace-selector
Usage with PostCSS
const prefixer = // css to be processedconst css = fs const out = css
Using the options above and the CSS below...
You will get the following output
Usage with webpack
Use it like you'd use any other PostCSS plugin. If you also have autoprefixer
in your webpack config then make sure that postcss-namespace-selector
is called first. This is needed to avoid running the prefixer twice on both standard selectors and vendor specific ones (ex: @keyframes
and @webkit-keyframes
).
const prefixer = ; module: rules: test: /\.css$/ use: require require loader: require options:
Options
prefix
- This string is added before every CSS selector.exclude
- It's possible to avoid prefixing some selectors by passing an array of selectors (strings or regular expressions).transform
- In cases where you may want to use the prefix differently for different selectors, it is possible to pass in a custom transform method.findConfig
- will find the nearest postcss.config.js configuration file when set totrue
.