Order problem #555
Description
- Operating System: Ubuntu 16.04.5 LTS
- Node Version: v10.19.0
- NPM Version: 6.13.4
- webpack Version: 4.42.1
- css-loader Version: 3.4.1 (used in latest CRA https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/package.json)
Expected Behavior
After dynamically importing component, which composes css class, that an already present component also composes, the existing component should preserve its styles.
Actual Behavior
After dynamically importing component B, components C styles get overriden.
Code
// index.module.css
.test {
background-color: red;
padding: 30px;
}
// b.module.css
.test2 {
composes: test from '../index.module.css';
background-color: blue;
}
// c.moodule.css
.test3 {
composes: test from '../index.module.css';
background-color: green;
}
Result:
<head>
<link rel="stylesheet" type="text/css" href="chunk-2.css">
<script charset="utf-8" src="2.main.js"></script>
<link rel="stylesheet" type="text/css" href="chunk-1.css">
<script charset="utf-8" src="1.main.js"></script>
</head>// chunk-2.css
._2D6NmF3oNXamuyZ2z-z6-2 {
background-color: red;
padding: 30px;
}
._2vSpwQvfEWT-h3qiyUMFPO {
background-color: green;
}// chunk-1.css
._2D6NmF3oNXamuyZ2z-z6-2 {
background-color: red;
padding: 30px;
}
._3IkLTxcAE-k8TWXxjYQrik {
background-color: blue;
}Webpack config:
// webpack.config.js
...
module: {
rules: [
{
test: /\.module\.css$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
},
},
],
},
],
},
...How Do We Reproduce?
For reproduction, see this minimal repo:
https://github.com/OHUSAR/css-modules-chunk-specificity-bug
Originally posted by @OHUSAR in webpack-contrib/css-loader#997 (comment)