agentsclimarketplace

Mfa portal css isolation

Skill kjuhwa/skills-hub/skills/design/mfa-portal-css-isolation

Self-correcting knowledge corpus for Claude Code — 9 stable shape clusters, bias-correction pipeline baked into contribution flow. 47 papers, 45 techniques, 1.1k skills.

Install
npx -y skills add kjuhwa/skills-hub --skill mfa-portal-css-isolation

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Isolate Tailwind CSS in Module Federation portals using lazyStyleTag injection, postcss-prefix-selector with :where() specificity control, scoped root elements, and Headless UI PortalGroup

SKILL.md

3.1 KB, 636 tokens by cl100k_base, as published. Nobody here has run it

MFA Portal CSS Isolation

Problem

Tailwind's preflight resets (*, html, body) and global styles leak across Module Federation boundaries, breaking sibling remotes. Portal-based overlays (Dialog, Tooltip) render outside the scoped container, losing Tailwind styles entirely.

Steps

  1. Separate webpack CSS rule for the Tailwind module:

    • include targets only the Tailwind module path
    • Main CSS rule must exclude the same path to avoid double-processing
    • Use style-loader with injectType: 'lazyStyleTag' (on-demand injection)
    • css-loader with importLoaders: 1, import: false (let PostCSS handle @import)

  2. postcss-prefix-selector with :where() wrapper:

    • Prefix: :where(.nds-root) — zero specificity, overridable by host
    • :root/:host → :where(.nds-theme) (token scoping)
    • [data-theme="dark"] → :where(.nds-theme)[data-nds-theme="dark"] (namespaced theme attributes)
    • Class selectors: generate both descendant and self forms (.btn → :where(.nds-root) .btn, :where(.nds-root).btn)
    • Exclude @keyframes, @property, @font-face internals from prefixing

  3. lazyStyleTag lifecycle:

    • portalStyles.use() on mount, portalStyles.unuse() on unmount
    • CSS only active while the remote is rendered

  4. NdsPortalProvider — body-level portal root:

    • useLayoutEffect creates <div id="nds-portal-root" class="nds-root nds-theme"> on <body>
    • Headless UI <PortalGroup target={portalRef}> redirects all portals
    • useEffect syncs data-nds-theme attribute when theme changes
    • Singleton: checks for existing #nds-portal-root (supports HMR)
    • React context exposes portal root for custom consumers

  5. Wrap all overlay consumers:

    • Every Dialog, Tooltip, Menu, Popover renders inside the PortalGroup target
    • Never nest PortalProviders — one per remote boundary

Pitfalls

  • @keyframes must be excluded from prefixing — scoped keyframe names break animations
  • @property (CSS Houdini) declarations must also be excluded
  • useLayoutEffect not useEffect for portal root — must exist before first child render
  • overflow: hidden on main container clips portals rendered as children — body-level root avoids this
  • Portal.Group typing: not publicly exported in Headless UI types, requires cast
  • Multiple MFA remotes: each should check for existing portal root element before creating

See also

  • content.md for full webpack config, selector transform function, and provider implementation

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.