How to put css in different style tags by condition?

Question

webpack

Good afternoon. Please help me configure webpack.
What is: a lot of files like "styles.css", "styles.dark.css" located in the directories of react components.
What I want: two tags , in the first one all the usual styles should be collected, in the second - all the dark ones. Clicking the button disables or enables the "dark" style sheet ( ). Now the rules look like this:<style>document.styleSheets[1].disabled = true

{
  test: /\.css$/,
  exclude: /\.dark\.css$/,
  use: [
    {
      loader: 'style-loader',
      options: { singleton: true }
    }
  ]
},
      
{
  test: /\.dark\.css$/,
  use: [
    {
      loader: 'style-loader'
    }
  ]
}

In the first rule, the singleton: true parameter does exactly what I need - it collects all the styles that match the condition into a single style tag. But if you specify this parameter in the second rule, then all styles that match the second condition will be collected in the same first tag, and not in a separate one.
What can be done?

Answer 1

I guess it's impossible to do what I want. In order for the styles to be folded into two different style tags, you need two style-loader instances, each of which will have a singleton: true parameter. But for loaders, unlike plugins, there is no provision for creating instances through new. The only thing I came up with was to create a copy of the module (node_modules/style-loader -> node_modules/style-loader-a) and refer to it in the second rule.
So far, I have abandoned the internal CSS in favor of the external one. Everything is simpler here - instead of style-loader, you can use extract-text-webpack-plugin, specifying different instances of it in different rules.