Different between @fluentui/merge-styles and @griffel

[tienlx97]

Excuse me, I have a question about @fluentui/merge-styles and @griffel. Both of them are Css-in-JS.

• So what is the diffrent ?
• Can I use both in project ?

[miroslavstastny]

merge-styles is used in FUI v8, it will be replaced by griffel in the upcoming FUI v9.

Griffel uses atomic CSS, intentionally does not allow any props or state to be used in style computations (you only use props and state to conditionally merge and apply the resulting classes). For theming, instead of generating different styles/classes for different themes, Griffel uses CSS variables (therefore no IE11 support) for theme tokens and always produces the same styles regardless the theme.

With this approach:

• all the styles are computed only once on the first render and never recomputed,
• this one-time computation can be done during application build time to improve the performance,
• the build time output can be extracted to static CSS to reduce the cost of injecting the CSS to DOM.

You can use both in your project, you can run them side by side, but you should not mix both to generate classes for a single DOM element.

[heho]

I am honestly not sure how I feel about this. I have worked with Griffel, and it does not feel like it is on par with the current system. Granted it provides a better performance, but it does seem rather tedious to see what is happening especially when working with @rules and pseudoselectors since everything starts to get cluttered with classes. Also, the interface for mixing styles does not seem ready, I had to write several utility functions for composing styles. Sometimes you seem to need to leave the whole system entirely, for example when creating styles that include defacto dynamic coloring. Last time I checked, there were shorthand functions not yet implemented.
All in all it's an interesting project that feels like it needs some more months and documented solutions to what I mentioned before, I would consider using it again.

[tienlx97]

Microsoft use griffel in FluentUI v9. Best way to learn is view sourecode. This is example

[tienlx97]

Atomic css mean css that is static, can not change at compile. About dynamic variable, I think we should use inline style. Facebook have another atomic css call Stylex. My friend decompiled it , you can use that here