Prefix every CSS selector with a custom namespace
.a => .namespace .a
Table of Contents
$ npm install postcss-namespace-selector
Usage with PostCSS
const prefixer =// css to be processedconst css = fsconst 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:
const prefixer = ;module:rules:test: /\.css$/use:requirerequireloader: requireoptions:
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 to