Paragon’s design tokens intends to compile its own theme CSS instead of MFEs needing to compile Paragon’s SCSS → CSS.
It would result in core.css and light.css CSS files.
Relies on 2 new config variables being present (potentially 3+ in the future):
APP_THEME_CORE_URL (core theme CSS)
APP_THEME_LIGHT_URL (CSS variable definitions specific to light theme variant)
[in the future] APP_THEME_DARK_URL (CSS variables definitions specific to dark theme variant, one day)
Implements useAppTheme React hook to inject the external theme URLs into the HTML <head>.
Does not render MFE until the external CSS is loaded to avoid Flash of Unstyled Content (FoUC).
Ensures that once we do support more than 1 theme variant (i.e., both light and dark), switching between them does not introduce FoUC.
Provides a mechanism for consuming MFEs to (eventually) switch the theme at runtime by exposing a dispatch function and a set of reducer actions to mutate the app theme state (e.g., a consuming MFE could do setAppThemeVariant('dark') in the future once more theme variants beyond "light" is supported.
Discuss:
What about versioning?
For example, will the externally hosted CSS (e.g., on CDN) ever be incompatible with the version of Paragon installed in each individual MFE?
Should the externally hosted CSS be versioned in some way?
Concerns around using an open source, versioned CDN that’s always in sync with published NPM versions?
For example, jsDelivr suggests they are ”production-ready” (docs).
Currently, I have a Node.js Express API running locally with endpoints to serve the compiled core CSS and the light theme variant CSS from my local Paragon checkout.
Need to explore options if there’s a way to point the config variables to CSS files from local checkout of Paragon without needing to serve them from a running Node.js Express API.
Alternatives to hosting compiled CSS on a CDN in our current MFE architecture?