Fluent UI React Insights: Griffel

From the creator

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: https://github.com/microsoft/griffel https://github.com/microsoft/fluentui https://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 https://www.youtube.com/watch?v=9JZHodNR184 #2 CodeSandbox that shows LVFHA order importance https://codesandbox.io/s/lvfha-puzzle-ihbict #3 Styletron's website https://styletron.org #4 Webpack loader for Griffel https://github.com/microsoft/griffel/tree/main/packages/webpack-loader #5 RFC: makeStyles() API changes https://github.com/microsoft/fluentui/pull/17076 #6 RFC: Do not allow CSS shorthands in makeStyles() calls https://github.com/microsoft/fluentui/pull/20573 #7 Griffel's website https://griffel.js.org #fluentui #webdev #reactjs #cssinjs

Published 2022-09-19 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.