How to bundle all css modules to one file when Module federation "exposes" is defined in config?

[krutoo]

Hi, in my case i use css modules a lot in codebase of my project.

I want to bundle all css files to one file for example index.css

According to docs:
https://webpack.js.org/plugins/mini-css-extract-plugin/#extracting-all-css-in-a-single-file

I use optimization.splitChunks.cacheGroups and this works fine

But when i add ModuleFederationPlugin i have error:

ERROR in SplitChunksPlugin
Cache group "styles" conflicts with existing chunk.
Both have the same name "main" and existing chunk is not a parent of the selected modules.
Use a different name for the cache group or make sure that the existing chunk is a parent (e. g. via dependOn).
HINT: You can omit "name" to automatically create a name.
BREAKING CHANGE: webpack < 5 used to allow to use an entrypoint as splitChunk. This is no longer allowed when the entrypoint is not a parent of the selected modules.
Remove this entrypoint and add modules to cache group's 'test' instead. If you need modules to be evaluated on startup, add them to the existing entrypoints (make them arrays). See migration guide of more info.

webpack 5.90.1 compiled with 1 error in 427 ms

Here is an example repo with reproduction:
https://github.com/krutoo/webpack-mf-css-modules-bundle

Is it possible to generate one file with all css without modify source code of my project?

I want this file to be used both in the remote entry point and in the main entry point

[krutoo]

Looks like i missed that my example contains wrong config:

Instead of

name: 'styles',

Config contains:

name: (module, chunks) => chunks[0].runtime,

Replacing fixes build errors