Order problem - Githubissues

alexander-akait commented 4 years ago

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.

Screenshot from 2020-04-06 11 22 27

Actual Behavior

After dynamically importing component B, components C styles get overriden.

Screenshot from 2020-04-06 11 22 52

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,
                        },
                    },
                ],
            },
        ],
    },
...