Style-loader duplicates insert function

[HuHguZ]

• Operating System: linux mint 20
• Node Version: v14.16.0
• NPM Version: 6.14.11
• webpack Version: 5.28.0
• css-loader Version: 3.0.0

Expected Behavior

I expect that the style-loader will add the insert function to the bundle exactly 1 time.

Actual Behavior

But in reality, this function is created for each css file and inserted as an expression, webpack cannot optimize it, because it thinks that these are different functions

Code

//css part of module.rules productuion config
{
    test: /\.css$/,
    exclude: /\.page\.css$/,
    use: [
      {
        loader: 'style-loader',
        options: {
          injectType: 'singletonStyleTag',
          insert: [Function: _insertCssIntoIframeImportedByStyleLoader]
        }
      },
      'css-modules-typescript-loader'
    ]
  },
  {
    test: /\.page\.css$/,
    use: [ 'style-loader', 'css-modules-typescript-loader' ]
  },
  {
    test: /\.css$/,
    use: [
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
          modules: { localIdentName: '[hash:base64:5]' }
        }
      },
      'postcss-loader'
    ]
  }

[alexander-akait]

Partial fixed here #520, anyway it is impossible to use custom function and include this only once, but we have solution { insert: require.resolve('./my-custom-style-function') }, so you will not have multiple functions, WIP on this

[alexander-akait]

Fixed #521, note you need to use insert: require.resolve('./path/to/insert.js') to allow reduce size of runtime

[HuHguZ]

thanks