Luckily, @sanity_io has been working on an optimized fork that fixed the issue! After a fruitful collaboration with them, we ended with 40% faster initial component render. That was a good day! 🍻

If you’re still using styled-components, I recommend checking it out. GitHub: https://github.com/sanity-io/s... Blog post: https://www.sanity.io/blog/cut...

@kenneth_skovhus @linear Are you guys thinking switching to something like tailwind at some point?

@_anthonyriera @linear Probably not Tailwind, but we are currently planning our moves. A few no-runtime contenders.

@kenneth_skovhus @linear i hope at least my old cssom code wasn't the bottleneck lol 😂 i'll make sure to be one of the first to congratulate you once it's out of your codebase ❤️

@kenneth_skovhus @linear For the last few weeks the "Create issue" dialog has been a bit slow - feels like it's dropping frames. It'd be awesome if the original smoothness to this animation came back. Thank you!

@sidborderwala @linear That’s doesn’t look great. I’ll have have a look.

@kenneth_skovhus @linear You should have abandoned them 5 years ago when they decided that performance is not their concern and ditched babel compiler.

@kenneth_skovhus @linear Nice will check it out, making a similar upgrade right now. We’ve managed to codemod about 35% and predict 75% is achievable to both css-modules and stylex, comparing the outcomes still, but stylex is looking like the performant choice.

@matclayton @linear Nice. Thanks for sharing. We have been looking a bit at vanilla extract stylex. Love the predictability in stylex, but the babel plugin is a no go for build performance. I saw https://github.com/Dwlad90/sty... , can we get that to work with rolldown, @boshen_c ?

@kenneth_skovhus @linear styled-components are horrible for performance

@kenneth_skovhus @linear We saw the very same thing in the flame graphs - especially for budget Android Phones That’s why we built next-yak to compile styled-components into static css Here is a comparison on a slow real device of a client side route change styled-component vs next-yak

@kenneth_skovhus @linear 40% faster initial render is massive gains! Goes to say how important it is to use the right APIs.

@kenneth_skovhus @linear What heuristic do you decide on the bottleneck?

@curiouslychase @linear Almost all interactions in Linear should be instant. So anything that feels slow with CPU throttling should be optimized.

@kenneth_skovhus @linear Kind of a fun ctf

@kenneth_skovhus @linear 40% is a huge improvement nice work digging into the performance issues

@kenneth_skovhus @linear @developerBolu even linear uses http://sanity.io

@kenneth_skovhus @linear Is there an effort to move the style computations to build instead of runtime?

@thedjpetersen @linear https://x.com/kenneth_skovhus/...

@kenneth_skovhus @linear We recently moved to Vanilla Extract from Emotion with atomic css through sprinkles and the DX is really good. It’s like type safe tailwind with props. Works best though with a well defined design system, as you cannot generate atomic classes on the fly. You can always of course

@kenneth_skovhus @linear Gross. We made that mistake using styled components, ew

@kenneth_skovhus @linear that's great!!!

@kenneth_skovhus @linear Are you folks planning to move away from styled-components?

@_elledienne @linear Yes. We are currently planning our moves. A few contenders, but all close to no-runtime overhead.

@kenneth_skovhus @linear Or ya know you could just use tailwind…..

@kenneth_skovhus @linear love linear man its the best kanban board 1 feature request could you add project timeline

@kenneth_skovhus @linear Curious to know how chrome profiler looked before and after. What did it show to let you know that styled-components were causing the bottleneck? Or did you use any other way to identify it?

@ashwinkumar_v @linear You can see an example trace is the blog post. But essentially 7-10 style injection caused style recalculations.