Any way to control CSS loading order from remote app?

[nkalinov]

So I have 2 MFE apps - a Host and an UI library exposing components.
Host is bootstrapped with create-react-app. Both containers are using CSS modules.
In the Host, I want to override a UI component's styles by providing a custom className via prop.

// UI lib - Button
import styles from './Button.module.scss'

function Button({ className }) {
  return <button className={cx(styles.base, className)} />
}

// Host
import Button from 'ui/Button'
import styles from './HostComponent.module.scss'

function HostComponent() {
  return <Button className={styles.override} />
}

Before Module Federation, the CSS chunks were loaded in the following order:

1. Button.module.scss
2. HostComponent.module.scss

With Module Federation, I assume because the Button is loaded asynchronously, the Button's CSS is loaded secondly.

Because of CSS modules and the locally scoped class names having the same priority there is an unexpected override of styles.

Is there any workaround to this or just in general tips/advices on how to design such components (having CSS modules in mind and locally scoped class names)?

To note that this is only reproducible in the production build (so when CSS files are extracted by mini-css-extract-plugin. In dev mode (which uses style-loader) this is not an issue, which is kind of weird too..

Thanks!

[nkalinov]

@ScriptedAlchemy Anything obvious that I'm missing to do here?

[ScriptedAlchemy]

No known ways to control css ordering.

[nkalinov]

Could/should that be abstracted as a Webpack or plugin option?
Or maybe through an Inline Magic Comment, something like:

/* webpackMiniCssExtractPrepend: true */
import Button from 'ui/Button';

Not sure if that's possible at all as it is built in a separate package?
(just throwing out some ideas, willing to help with any of them)

[ScriptedAlchemy]

Mini css supports a insert function. So you could have the remote modules append style links under a placeholder lower in the DOM

[nkalinov]

OMG this is exactly what I need, I feel silly for missing that from the docs, thank you!

[ScriptedAlchemy]

use something like then you can inject all remote css below that ID

Dont worry, the webpack docs are not trivial to navigate - I only know about insert because I was the one who wrote it :P

[nkalinov]

Just for reference to other readers: I ended up setting insert: 'title' at the UI lib mini-css plugin config.
This way UI lib stylesheets are always inserted after the title which falls before the Host's custom stylesheets.