microsoft / griffel

CSS-in-JS with ahead-of-time compilation ⚡️
https://griffel.js.org
MIT License
1.2k stars 61 forks source link

makeResetStyles should not override makeStyles #526

Closed NotWoods closed 7 months ago

NotWoods commented 8 months ago

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.

layershifter commented 8 months ago

There is a separate feature to support this properly, #453. We will work on it next quarter.

layershifter commented 7 months ago

Closing in favor of #453.