Unmount multiple css

[Taifunov]

Hello, how can I unmount multiple CSS files?
For instance, I have my main CSS file: myModule.css, but after the build, it also creates a couple of chunks for those styles with names: 629.myModule.css, 927.myModule.css, and after switching from 1 micro-frontend to another it unmounts just main CSS, but other are still present.

[Numbers for chunk files can be any, this is just an example]

This is my main file:

import React from 'react';
import ReactDOMClient from 'react-dom/client';
import singleSpaReact from 'single-spa-react';
import singleSpaCss from 'single-spa-css';
import { ROOT_ELEMENT_ID, module } from './configs';
import RootComponent from './root.component';

const domElementGetter = () => {
  let el = document.getElementById(ROOT_ELEMENT_ID);
  if (!el) {
    el = document.createElement("div");
    el.id = "ROOT_ELEMENT_ID";
    document.body.appendChild(el);
  }
  return el;
};

const lifecycles = singleSpaReact({
  React,
  ReactDOMClient,
  renderType: "createRoot",
  rootComponent: RootComponent,
  domElementGetter,
  errorBoundary(err, info) {
    // eslint-disable-next-line no-console
    console.error(err, info);

    return (
      <div className='container'>
        <h1>Something went wrong.</h1>
        <details style={{ whiteSpace: 'pre-wrap' }}>
          {err?.toString()}
          <br />
          {info.componentStack}
        </details>
      </div>
    );
  },
});

const cssLifecycles = singleSpaCss({
  cssUrls: [`${module.url}/${module.styles}`],
  shouldUnmount: true,
  timeout: 15000,
});


export const bootstrap = [cssLifecycles.bootstrap, lifecycles.bootstrap];
export const mount = [cssLifecycles.mount, lifecycles.mount];
export const unmount = [lifecycles.unmount, cssLifecycles.unmount];

And this is my webpack config: https://gist.github.com/Taifunov/9bfe2855ff5d3bfed92a99e9b9c1e8d3