Fluent UI React Insights: Griffel

Fluent UI Insights is a series that describes the design and decisions behind the Fluent UI design system. In the third episode, Oleksandr from the Fluent UI team explain implementation details and complexities behind Griffel. Griffel is a CSS-in-JS used in Fluent UI React v9 and features ahead-of-time compilation.
🔗 Links:
github.com/microsoft/griffel
github.com/microsoft/fluentui
react.fluentui.dev/
📚 Chapters:
00:00 Intro
00:34 Requirements for styling solution
04:53 Important concepts of Atomic CSS-in-JS
11:00 Creating Griffel CSS-in-JS
13:21 Did everything go smoothly?
💡 References:
#1 Building the New Facebook with React and Relay • Building the New Faceb...
#2 CodeSandbox that shows LVFHA order importance codesandbox.io/s/lvfha-puzzle...
#3 Styletron's website styletron.org
#4 Webpack loader for Griffel github.com/microsoft/griffel/...
#5 RFC: makeStyles() API changes github.com/microsoft/fluentui...
#6 RFC: Do not allow CSS shorthands in makeStyles() calls github.com/microsoft/fluentui...
#7 Griffel's website griffel.js.org
#fluentui #webdev #reactjs #cssinjs

[@shaileshpandey6214]

I'm having trouble with Fluent UI DataGrid in my Maui Blazor Hybrid app (Fluent UI latest version, Maui Blazor Hybrid).
After adding the script
` to my index.html,
the app gets stuck on "Loading..." and won't load fully.
showing this line of index.html file of body tag
Loading...
Any ideas or suggestions !

[@hyoyoungpark2700]

Nice video

[@marcelo.augusto55]

🙋🏻‍♂️🇧🇷