css-modules-modify-specificity-loader v1.1.3
css-modules-modify-specificity-loader
This webpack loader modifies css modules output to bump specificity of composed css classes when using css modules. It is useful when using dynamic css chunks generated by mini-css-extract-plugin when the order of classes can be random and so the applied styles.
a.module.css
.test { background-color: red; }
b.module.css
.test2 { composes: test from "./a.module.css"; background-color: blue; }
- c.module.css
.test3 { composes: test2 from "./b.module.css"; background-color: green; }
a.module.css
.test { background-color: red; }
b.module.css
.test { background-color: red; } .test2 { background-color: blue; }
c.module.css
``` .test { background-color: red; } .test2 { background-color: blue; } .test3 { background-color: green; } ```
.test {
background-color: red;
}
.test {
background-color: red;
}
.test2 {
background-color: blue;
}
.test3 {
background-color: green;
}
.test {
background-color: red;
}
.test2 {
background-color: blue;
}
When considering element using classnames from c.module.css,
<div class="test_localname test2_localname test3_localname" />
the applied background color of the element would be blue instad of green.
This plugin changes the output of files to this:
a.module.css
.test { background-color: red; }
b.module.css
.test { background-color: red; } .test2.test2 { background-color: blue; }
c.module.css
.test { background-color: red; } .test2.test2 { background-color: blue; } .test3.test3.test3 { background-color: green; }
Which in our example the current applied css would be:
.test {
background-color: red;
}
.test {
background-color: red;
}
.test2.test2 {
background-color: blue;
}
.test3.test3.test3 {
background-color: green;
}
.test {
background-color: red;
}
.test2.test2 {
background-color: blue;
}
This way the element from example above will always have green background color no mather what.
Instead of:
<div className={styles.test + ' alert-light'} />
Use:
.test {
composes: alert-light from global;
}
in your css module file and then:
<div className={styles.test} />
In development:
{
test: /\.module\.css$/,
use: [
'style-loader',
'css-modules-modify-specificity-loader',
{
loader: 'css-loader',
options: {
modules: true,
}
},
],
}
In production:
{
test: /\.module\.css$/,
use: [
MiniCssExtractPlugin.loader
'css-modules-modify-specificity-loader',
{
loader: 'css-loader',
options: {
modules: true,
}
},
],
}