In one of the projects I am working on I recently faced quite an interesting issue. This is a microfrontend application which is being added into another application by using Module Federation in Vite . Both the host and the microfrontend use ReactJS. Now this microfrontend is using a frontend design framework which is also used by the host application.

One day we opened this microfrontend in the host and saw the typography was off. It was falling back to the browser’s default style. I asked one of my team members to look into this issue. Later we suspected that the issue was caused by an update in the design framework version in the host, which is now different from what it is in the microfrontend.

The fix suggested by the team member and the host application team was to update our microfrontend to match their ReactJS and Design Component version, which seemed like a bad solution because host updates shouldn’t have any impact on the microfrontend. I had a gut feeling that something else was wrong here — how could an update in the host break the microfrontend?

I then took the help of Claude. I started the session in the project directory, cloned the host application locally, and added it to my session with /add-dir .

Here is my prompt:

The microfrontend-app-name is integrated as vite module federation inside the host-app-name. Recent commit {commit-sha} in the host-app-name has caused the styling issues in the microfrontend-app-name. Design Component Typography is not working. Check the before and after screenshots attached. I want you to find out root cause of this issue.
Constraint: Find a solution which does not need any change in the host application.
Create a html page of this finding so i can read it easily.
[image #1] [image #2]

I ran this prompt on Fable 5, with auto mode on.

In 8 to 10 minutes, I got a beautiful HTML page with the RCA. The one given by Fable 5 won because it outlined the solution in simple words and also suggested a more pragmatic solution compared to Opus.

Root Cause

The microfrontend’s Design Component CSS rules have always silently borrowed the CSS variables those rules consume from the host’s Design Component. The host upgraded the Design Component version, which renamed a bunch of variables and dropped some entirely. The 22 variables the microfrontend’s typography depends on no longer exist on the page, so font-size: var(--undefined) falls back to browser defaults, which is why the design broke.

Solution

  1. Wrapping the microfrontend’s Design Component into its own Design Component root.

  2. Zero-specificity scoping: added a custom Vite plugin that rewrites the Design-Component-sourced global selectors to zero specificity. This scoping will make sure nothing leaks into the host.

// vite.config.ts
function designComponentDescope(): Plugin {
  return {
    name: "design-component-css-descope",
    enforce: "pre",
    transform(code, id) {
      if (id.includes("designComponentImportPath") && id.endsWith(".css")) {
        return code.replace(
          regex to wrap the rules with :where() 
        )
      }
    }
  }
}

For e.g. this css

:root { --color: red; }
.design-black .btn { ... }

becomes

:where(:root) { --color: red; }
:where(.design-black) .btn {... }