In Loop, we have separate JavaScript bundles for our app code (outer UI frame with sidebar) and page code (reusable components that can be embedded in other Microsoft apps). Both bundles load Griffel.
This results in two copies of Griffel on the page, and they don't collaborate very well. Notably, the second copy's makeResetStyles CSS are inserted after the first copy's makeStyles CSS. This results in overriding a ton of CSS in the app where we customize Fluent UI controls, such as removing the min-width of a Fluent UI button.
Ideally makeResetStyles should always insert at the top of the head, rather than at the bottom. Webpack Extraction might affect this.
In Loop, we have separate JavaScript bundles for our app code (outer UI frame with sidebar) and page code (reusable components that can be embedded in other Microsoft apps). Both bundles load Griffel.
This results in two copies of Griffel on the page, and they don't collaborate very well. Notably, the second copy's
makeResetStyles
CSS are inserted after the first copy'smakeStyles
CSS. This results in overriding a ton of CSS in the app where we customize Fluent UI controls, such as removing themin-width
of a Fluent UI button.Ideally
makeResetStyles
should always insert at the top of the head, rather than at the bottom. Webpack Extraction might affect this.