Federating CSS/SCSS

[viktoriialurie]

Short Description

Making it easier to use CSS and SCSS files without losing the benefits/compatibility with module federation and SSR.

Longer Description

We can federate and share javascript easily between applications, it is particularly challenging with SSR though when trying to federate something like a button, because on the server side rendering currently struggles to process CSS and SCSS files that are not in the JS itself.

Acceptance Criteria

• Samples and documentation
  • Options of how to load CSS / SCSS for major frameworks
  • React, Next, Qwik, Angular
  • E2E tests to cover different ways to load styles, in JS, Remote, Remote Injected, etc
    • CSS files imported directly in JS
      • Relative
      • Fully qualified URL
    • CSS in JS
    • CSS from SCSS or LESS

[duannx]

Hi, are there any updates on the progress of options of how to load CSS/SCSS for major frameworks?

I have a problem with preloading CSS. Seem like CSS for components from MFE are loaded by remoteEntry.js on the client. Since CSS are loaded by JS, it causes FOUC and CLS because the HTML is already built and returned by the server.

Is there any way to add a custom plugin/loader to get CSS-related data from module federation and put it into the Next context to preload the CSS of MFEs?

Btw, I'm using [email protected], [email protected] and @module-federation/[email protected]

Thanks in advance

[viktoriialurie]

hey!
you can find more updates in this PR
not sure if it answers your question so please let me know if there are more questions
also tagging in @zackarychapple and @valorkin, so they can provide more details here

[duannx]

Hey!
I followed your instructions and successfully implemented CSS federation. Actually, I need to do some extra work to make it happen with Nextjs.
Thank you for guiding me!