Summary
SciReactUI 0.7.1 addressed font-loading issues in some applications by externalising the font CSS. However, this revealed a separate issue affecting server-side rendering.
In SSR applications such as EVO, DiamondDS tokens and typography variables are unavailable during the initial render. This can cause text to appear briefly in a fallback serif font before switching to Inter or another configured typeface. Other token-dependent styles may also change after the initial render, although these changes are likely to be less noticeable.
Expected behaviour
Design-system tokens and typography styles should be available before the first paint.
Actual behaviour
DiamondDSTokens.css and DiamondDSTypography.css are injected in the browser using style-inject.
Because style-inject does not run on the server, variables such as --ds-font-family-default are initially undefined. They become available only after the application renders, causing a visible font change.
The application’s MUI and Emotion SSR configuration works correctly for styles generated through Emotion. It cannot collect these separate CSS files.
See MUI's SSR guide for an explanation of its server-rendering mechanism.
Environment
- Package version:
@diamondlightsource/sci-react-ui@0.7.1
- Browser: Any modern browser
- OS: Any
- App or framework environment: Server-side rendered React application using MUI and Emotion
Additional context
A temporary consumer workaround is to define the font variables in server-rendered global CSS:
:root {
--ds-font-family-default: "Inter Variable", system-ui, sans-serif;
--ds-font-family-display:
"Outfit Variable", "Inter Variable", system-ui, sans-serif;
--ds-font-family-mono: "IBM Plex Mono", ui-monospace, monospace;
}A possible package fix is to publish the design tokens and typography rules as a static CSS export, following the existing font-styles.css pattern:
import '@diamondlightsource/sci-react-ui/font-styles.css';
import '@diamondlightsource/sci-react-ui/styles.css';
This would allow the consuming framework to include the styles before first paint. These foundational styles would no longer need to be injected at runtime using style-inject.
We can also unify both files into a single one.
A separate font swap may still occur while the .woff2 files download because font-styles.css uses font-display: swap (better for displaying content quickly). Applications can reduce that delay by preloading fonts used above the fold.
Summary
SciReactUI 0.7.1 addressed font-loading issues in some applications by externalising the font CSS. However, this revealed a separate issue affecting server-side rendering.
In SSR applications such as EVO, DiamondDS tokens and typography variables are unavailable during the initial render. This can cause text to appear briefly in a fallback serif font before switching to Inter or another configured typeface. Other token-dependent styles may also change after the initial render, although these changes are likely to be less noticeable.
Expected behaviour
Design-system tokens and typography styles should be available before the first paint.
Actual behaviour
DiamondDSTokens.cssandDiamondDSTypography.cssare injected in the browser usingstyle-inject.Because
style-injectdoes not run on the server, variables such as--ds-font-family-defaultare initially undefined. They become available only after the application renders, causing a visible font change.The application’s MUI and Emotion SSR configuration works correctly for styles generated through Emotion. It cannot collect these separate CSS files.
See MUI's SSR guide for an explanation of its server-rendering mechanism.
Environment
@diamondlightsource/sci-react-ui@0.7.1Additional context
A temporary consumer workaround is to define the font variables in server-rendered global CSS:
A possible package fix is to publish the design tokens and typography rules as a static CSS export, following the existing
font-styles.csspattern:This would allow the consuming framework to include the styles before first paint. These foundational styles would no longer need to be injected at runtime using
style-inject.We can also unify both files into a single one.
A separate font swap may still occur while the
.woff2files download becausefont-styles.cssusesfont-display: swap(better for displaying content quickly). Applications can reduce that delay by preloading fonts used above the fold.