Pigment CSS
CSS-in-JS in the server components age
Olivier Tassinari
Co-creator of Material UI and CEO @MUI
Quick poll
Who here is currently depending on
styled-components or Emotion?
styled-components or Emotion?
State of CSS
styled-components
Emotion
CSS Modules
🌶️ Spicy 🌶️
Who feels left behind by them and
is considering migrating away?
is considering migrating away?
State of CSS
Would use again
Would not use
Interested
Not interested
Never heard
The challenges
Olivier Tassinari
Co-creator of Material UI and CEO @MUI
The MUI ecosystem
The open-source projects we fund
Base UI
Material UI
MUI X
Toolpad
Performance
16kB of gzipped bundle size
Performance
Runtime impact
Performance
Data Grid
Performance
Data Grid
Performance
Customization
Emotion & styled-components
RSC support
The options
Inline styles
CSS Modules
StyleX
Tailwind CSS
Linaria
Panda CSS
Tokanami
etc...
Style colocation
Style colocation
CSS Modules 🤔
Plain vs. Atomic classes
Plain vs. Atomic classes
Atomic class names
Plain vs. Atomic classes
Plain class names
Plain vs. Atomic classes
Growing applications
- Atomic classes keep the CSS file small
- But nested selectors have good use cases
Plain vs. Atomic classes
Granular style loading
- Only loading the CSS you need for the page
- Do you still need atomic classes?
Plain vs. Atomic classes
Granular style loading
reactwg/react-18#108
Plain vs. Atomic classes
So, which should we pick?
Granular style loading 👍
Emotion / styled-components
CSS Modules / Linaria
Atomic classes 🤔
Tailwind CSS
Panda CSS
StyleX
Considerations
Familiarity
- Am I good to go with what I already know about CSS?
Considerations
Backwards compatible
- What if the solution was only about replacing imports? 😍
Pigment CSS
Why?
Why?
Pigment CSS
Key design decisions
- No runtime (but with fallback)
- RSC support
- Granular style loading
- As few breaking changes as possible
- Being able to add atomic CSS later down the road for production
Pigment CSS
Performance
Pigment CSS
Performance
Pigment CSS
How does it work?
- Started as a fork of Linaria
- Shares logic with WyW-in-js
- It transpiles the code to generate CSS Module files
Pigment CSS
When does this land?
Material UI v6
Learn more about Pigment CSS
👉 mui.com/r/pigment
Hello