This is a Webpack plugin for prepending a selector to all your CSS with prepend-selector-webpack-plugin
. This allows prepending CSS classes with a string while also using CSS modules. If that's possilble with a built in solution when you find this, use that instead.
It turns this:
li {
color: blue;
}
.myClassName, .someoneElsesClassName {
color: green;
}
into this:
.myContainer li {
color: blue;
}
.myContainer .myClassName, .myContainer .someoneElsesClassName {
color: green;
}
Add this to your plugins:
var webpackPlugins = [
new PrependSelectorPlugin({
selector: '.mySelector '
})
];
You can use all the (one) options that postcss-prepend-selector accepts.
This is useful for creating a widget that will live on a website where you won't control the environment.
Doing this manually, or with said plugin, breaks the compose
keyword in CSS Modules.