CSS-in-JS Performance Concerns - (sx)

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I recently found an article that breaks down in detail why CSS-in-JS is bad for performance. One of the core features I’m using with MUI is the sx / emotion / css-in-js feature and I’m wondering what the MUI dev community thinks about this and whether there’s any potential solutions to tackle the performance concerns.

https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b

Are there any plugins or libraries that can basically extract all the CSS-in-JS, split it into CSS modules when building the app for production, and serve the styles that way instead?

Examples 🌈

No response

Motivation 🔦

To help overcome these issues with MUI’s CSS-in-JS:

1. Frequently inserting CSS rules forces the browser to do a lot of extra work
2. CSS-in-JS adds runtime overhead
3. CSS-in-JS increases your bundle size

[oliviertassinari]

It would be awesome if it was possible to move to a static extraction option. The biggest challenges would likely be:

1. How to deliver the same great DX?
2. How to make the amount of breaking changes acceptable?

---

Other ideas:

• We could look deeper into Goober https://github.com/cristianbote/goober. It might save us > 5kB gzipped of bundle size. The runtime benchmark in https://github.com/cristianbote/goober#ssr-1 suggests that on the server, we could handle dynamic requests x2 faster. The performance on the client side might be better too: https://twind.dev/handbook/introduction.html#benchmarks. I started to look at it a year ago: #27776.
• We could also rewrite the MUI System implementation, it’s slower than it needs to be.

The end goal is to get points c. and d. as close as possible to a.

https://mui.com/system/getting-started/usage/#performance-tradeoffs.

To be fair, d. seems good enough in most cases. It’s usually not good enough when you have a large DOM, at which points, you need to rewrite a bit how the styles are applies, which costs you time. If you open https://pagespeed.web.dev/report?url=https%3A%2F%2Fmui.com%2F&form_factor=mobile, it’s not “insanely great” as would say Steve. I doubt that the bottleneck is styling, (e.g. https://nextjs.org/ uses CSS modules and performs worse than https://mui.com/) but more the amount of hydration that happens. Server-side React component could help a lot, for which, we need MUI System to be compatible with.

[altechzilla]

Some ideas:

• https://vanilla-extract.style/
• https://linaria.dev/
• https://compiledcssinjs.com/

Any way to get something like this in MUI natively?