postcss-prefix-selector
Prefix every CSS selector with a custom namespace
.a => .prefix .a
Table of Contents
Install
$ npm install postcss-prefix-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-prefix-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.
Maintainer
This project was originally created by @jongleberry and is being maintained by @RadValentin. If you have any questions, feel free to ping the latter.
Contribute
Please contribute! If you have any questions or bugs, open an issue. Or, open a pull request with a fix.
This project uses Mocha. If you submit a PR, please add appropriate tests and make sure that everything is green for your branch.
License
MIT © 2015-2019 Jonathan Ong.