[blog] Introducing Pigment CSS blog post #42198
Conversation
github-actions
bot
added
the
PR: out-of-date
Netlify deploy previewhttps://deploy-preview-42198--material-ui.netlify.app/ Bundle size report |
github-actions
bot
removed
the
PR: out-of-date
Co-authored-by: Brijesh Bittu <brijeshb42@gmail.com> Co-authored-by: Marija Najdova <mnajdova@gmail.com> Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Signed-off-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
|
The Netlify preview doesn't seem to exist. |
|
@brijeshb42 the link works as expected to me now: https://deploy-preview-42198--material-ui.netlify.app/blog/introducing-pigment-css/ |
There was a problem hiding this comment.
A first review pass. Nice to see this blog post! Great start
@brijeshb42 and @siriwatknp could we also get a review? Thanks
|
|
||
| For users of Emotion and styled-components, the benefits of adopting Pigment CSS are clear: your end users get better performance, and you get RSC and App Router compatibility without having to significantly change how you author component styles. | ||
|
|
||
| ### Better performance |
There was a problem hiding this comment.
I'm lost by this section.
These seem to be load time performance, which I believe is not the same as runtime performance. So I would start with:
| ### Better performance | |
| ### Better page load performance |
and then add a new header for render performance specifically.
| ### Other options don't meet our needs | ||
|
|
||
| For those of us who are perfectly happy with the patterns we know and love from CSS-in-JS, it feels frustrating to consider abandoning all that muscle memory just to reinvent the wheel yet again. | ||
| We like the DX of colocated styles, and we'd rather not bloat the DOM with atomic class names—so Tailwind CSS, StyleX, Panda CSS, and other solutions that have cropped up in recent months just don't match up with our preferences. |
There was a problem hiding this comment.
This doesn't feel accurate. I have reworked this part in https://react-conf-2024-pigment-css.netlify.app/?presenterMode=true&slideIndex=29&stepIndex=0. The first point is that Atomic for production, sure, if it helps with performance, great. The issue with atomic classes is only in development mode IMHO. I have doubt that https://twitter.com/astahmer_dev/status/1776919737999425629 can truly help here.
My point is that "Other options don't meet our needs", yes, but a big part of this is that we also see an opportunity with a deeper bundle integration, that we don't see any other library trying. Mostly because it's a lot of work, but hopefully: 1. we have the resources to make it work, and 2. React Compiler is paving the way
Two examples of projects not trying/giving up on this direction:
- https://www.adebayosegun.com/blog/panda-css-the-origin-story "Building bundler plugins can be tedious"
- https://portal.gitnation.org/contents/moving-on-from-runtime-css-in-js-at-scale 13"43 "That really scared me"
brijeshb42
added
the
needs cherry-pick
Signed-off-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Co-authored-by: Lukas <llukas.tyla@gmail.com> Co-authored-by: Brijesh Bittu <brijeshb42@gmail.com> Co-authored-by: Marija Najdova <mnajdova@gmail.com> Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Signed-off-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Co-authored-by: Lukas <llukas.tyla@gmail.com> Co-authored-by: Brijesh Bittu <brijeshb42@gmail.com> Co-authored-by: Marija Najdova <mnajdova@gmail.com> Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Signed-off-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Co-authored-by: Lukas <llukas.tyla@gmail.com> Co-authored-by: Marija Najdova <mnajdova@gmail.com> Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Broad, high-level introduction to the hows and whys of Pigment CSS, to coincide with Olivier's talk at React Conf.
Preview: https://deploy-preview-42198--material-ui.netlify.app/blog/introducing-pigment-css/