Styles being combined into one css file despite entry

[TannerS]

Bug report

We have an issue best described below

we have three entry points defined in webpack

  entry: {
    app: './src/client/app.js',
    widget: './src/client/template/widget.js',
    'common/widget': './src/client/template/common/widget.js',
  },

with these configs

        test: /\.s?css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: true,
            },
          },

and

const miniCssExtractPluginApp = new MiniCssExtractPlugin({
  filename: 'css/[name].css',
  ignoreOrder: false,
});
...
  output: {
    path: path.resolve(__dirname, 'static'),
    filename: '[name].js',
    publicPath: '/static/',
  },

and generates such

Our styles are set up like this

where common/widget.scss has its own special styling, and widget.scss has its own styling, BUT both import the _widgetCore.scss because it is common styles between them

So this is the setup, the bug is, for some reason....

widget.css is perfectly fine, but common/widget.css contains the styles for both common/widget.scss and widget.scss which is causing style conflicts on the pages those widgets are used.

if i opened the generated widget.css file I see this comment

/*!******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/client/styles/widget.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************/

but opening the common/widget.css file I see two of these

/*!******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/client/styles/widget.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************/

and

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/client/styles/common/widget.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************/

Actual Behavior

See above

Expected Behavior

I expect that widget.css and common/widget.css contain only the styles corresponding to there scss files, and not have common/widget.css contian the special styles from widget.scss

the reason being is both js files/styles are hosted on different pages and the styles conflict with one another.

I have no idea why widget.css is fine but the other combines both styling. I tried changing the file /entry paths and name

Please paste the results of npx webpack-cli info here, and mention other relevant information

System:
    OS: macOS 12.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 404.07 MB / 16.00 GB
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Chrome: 105.0.5195.102
    Firefox: 104.0.1
    Firefox Developer Edition: 105.0
    Safari: 15.5
  Packages:
    babel-loader: ^8.2.5 => 8.2.5 
    clean-webpack-plugin: ^4.0.0 => 4.0.0 
    css-loader: ^6.7.1 => 6.7.1 
    css-minimizer-webpack-plugin: ^4.0.0 => 4.0.0 
    postcss-loader: ^7.0.0 => 7.0.1 
    sass-loader: ^13.0.0 => 13.0.2 
    style-loader: ^3.3.1 => 3.3.1 
    stylelint-webpack-plugin: ^3.3.0 => 3.3.0 
    terser-webpack-plugin: 5.3.3 => 5.3.3 
    url-loader: ^4.1.1 => 4.1.1 
    webpack: ^5.73.0 => 5.74.0 
    webpack-bundle-analyzer: ^4.5.0 => 4.5.0 
    webpack-cli: ^4.10.0 => 4.10.0 
    webpack-merge: ^5.8.0 => 5.8.0 

This has been driving me crazy so any help is appreciated, thank you

[alexander-akait]

Please provide minimum reproducible test repo, but I think it is expected due sass logic, so I will show you why and how to solve it

[alexander-akait]

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!