require.context + sass-loader produces the same output for different layers

[denzelem]

Bug report

What is the current behavior?

Webpack 5.87.0 produces the same output for different layers when using require.context, even if the rules per layer should produce a different output.

If the current behavior is a bug, please provide the steps to reproduce.

• Clone the repository https://github.com/denzelem/webpack5-issue-20230615
• Install Node v19.7.0
• Run npm install
• Run npm run build

├── app
│   └── assets
│       ├── dark.js
│       ├── light.js
│       ├── test1
│       │   └── shared.sass
│       └── test2
│           └── shared.sass
├── package.json
├── package-lock.json
├── public
│   └── assets
│       ├── dark-a050d6fca14afa704ffb.css
│       ├── dark.js
│       ├── light-0892e4f074e52b30fb53.css
│       └── light.js
├── README.md
└── webpack.config.js

webpack.config.js:

const path = require("path")
const webpack = require("webpack")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  mode: "production",
  entry: {
    light: { import: "./app/assets/light.js", layer: 'light' },
    dark: { import: "./app/assets/dark.js", layer: 'dark' },
  },
  output: {
    filename: "[name].js",
    sourceMapFilename: "[file].map",
    path: path.resolve(__dirname, "public/assets"),
    clean: true,
  },
  experiments: {
    layers: true,
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]-[contenthash].css'
    }),
  ],
  module: {
    rules: [
      {
        test: /\.sass$/i,
        oneOf: [
          {
            issuerLayer: 'light',
            use:
              [
                MiniCssExtractPlugin.loader,
                "css-loader",
                {
                  loader: 'sass-loader',
                  options: {
                    additionalData: '$color: white',
                  }
                },
              ],
          },
          {
            issuerLayer: 'dark',
            use:
              [
                MiniCssExtractPlugin.loader,
                "css-loader",
                {
                  loader: 'sass-loader',
                  options: {
                    additionalData: '$color: black',
                  }
                },
              ],
          },
        ]
      },
    ],
  },
}

diff --git a/app/assets/dark.js b/app/assets/dark.js
new file mode 100644
index 0000000..25200ec
--- /dev/null
+++ b/app/assets/dark.js
@@ -0,0 +1,2 @@
+require.context('./test1', true, /\.sass$/)
+require('./test2/shared.sass')
diff --git a/app/assets/light.js b/app/assets/light.js
new file mode 100644
index 0000000..25200ec
--- /dev/null
+++ b/app/assets/light.js
@@ -0,0 +1,2 @@
+require.context('./test1', true, /\.sass$/)
+require('./test2/shared.sass')
diff --git a/app/assets/test1/shared.sass b/app/assets/test1/shared.sass
new file mode 100644
index 0000000..2f615b1
--- /dev/null
+++ b/app/assets/test1/shared.sass
@@ -0,0 +1,2 @@
+.test1
+  color: $color
diff --git a/app/assets/test2/shared.sass b/app/assets/test2/shared.sass
new file mode 100644
index 0000000..dd46a99
--- /dev/null
+++ b/app/assets/test2/shared.sass
@@ -0,0 +1,2 @@
+.test2
+  color: $color

It produces two files in public/assets/.

Current result:

public/assets/light-a050d6fca14afa704ffb.css:

.test1{color:#000}
.test2{color:#fff}

public/assets/dark-a050d6fca14afa704ffb.css:

.test1{color:#000}
.test2{color:#000}

Note:

• test1 was required with require.context (and is broken)
• test2 was required with require (and works as expected)

What is the expected behavior?

Expected result:

public/assets/light-a050d6fca14afa704ffb.css:

.test1{color:#fff}
.test2{color:#fff}

public/assets/dark-a050d6fca14afa704ffb.css:

.test1{color:#000}
.test2{color:#000}

Maybe related to #17310.

Other relevant information:
webpack version: 5.87.0
Node.js version: 19.7.0
Operating System: Linux
Additional tools:

• sass-loader: 13.3.2

[alexander-akait]

Workaround - use require.context('./test1?foo', true, /\.sass$/), i.e. ?foo to avoid compare modules

[denzelem]

Workaround - use require.context('./test1?foo', true, /\.sass$/), i.e. ?foo to avoid compare modules

Thanks @alexander-akait for your fast reply and the PR 💯 Awesome!