Design System CSS token sharing across module federation remotes

[jaknas]

Hi, I have a question about handling shared dependencies in a module federation setup and whether Rspack could help resolve our CSS conflicts.

Context:

Our project consists of a host application and two remote modules:

• Host App
• Remote A
• Remote B

Each of these apps relies on a shared dependency, @foo/design-system, but potentially at different versions:

• Host App uses @foo/[email protected]
• Remote A uses @foo/[email protected]

This dependency defines CSS custom properties (using CSS variables on the :root element), which creates a conflict when navigating between the modules.

Problem:

When a user navigates from the Host App to Remote A, the @foo/[email protected] custom properties are loaded. However, upon returning to the Host App, these newer custom properties remain, overriding those defined in @foo/[email protected]. This results in styling issues within the Host App due to potentially incompatible CSS properties.

Question:

Does Rspack offer any mechanisms to manage or isolate CSS custom properties in a module federation environment where different versions of shared dependencies might conflict? Alternatively, is there an established approach in Rspack to handle or reset CSS custom properties when navigating between federated modules? Or maybe this is a problem that can be solved without Rspack?

Thank you for any guidance!