[Proposal] Migrating from React JSS to Emotion

[dukesx]

Hi,

I am seeing that React JSS is well, let's be honest, not the most ideal library to use in 2021. I have been looking at their maintenance and development for a while now, and all i see is that the team is not much reluctant on fixing their "buggy" yet heavy library.

So here i propose that let's move this library to Emotion ? from my experience, it's the lightest so far, i mean it comes at 200 or under 300b minified, how cool is that ? with less bugs, might i add, and now looking at my project getting bulkier with authentication and other plugins, i think React JSS is the only module that seems to be bogging down my website's performance (since its creating styles on SSR). ( my website is static yet, doesn't fetch anything from api). Lighthouse (Page-Speed insights) seems to see a soaring 1.5 or sometimes 1.75 seconds of calculation (hydration, analysis) at Next.JS's end.

As far as i have read on issues and pull requests here, what i seem to hear is that there are bugs in React JSS that constraint development or cause inconvenience for e.g During Development of The Grid Component ? The Abnormal Console warning of JSS stylesheets, etc and more that i may not have read. So this is just a proposal and i hope to hear everybody's input on this.

References

Figure 1: My Website

Figure 2: Emotion's Website (Gatsby + Emotion)

Note: The website is quite heavy on CSS

Figure 3: React JSS's Website (No Gatsby, but They use Varnish with Webpack, Your Documentation Website Config)

Verdict

I Will let the Pictures speak for themselves. You are free to test and benchmark respective websites. Incase if you want my website's reference, you can look at my code , here:
https://github.com/dukesx/Coding-Bolt

Website: https://codingbolt.com

[rtivital]

I do not like emotion for its magic css prop and cannot see how it can be used the same way as jss. I don't see much issues with react-jss right now that are crucial for further project development.

I've researched this issue many times and unfortunately there is not any other library that will fit our needs, as almost all options either require additional tooling (emotion, vanila-extract, linaria) or have performance issues which make those libraries worse than jss (styled components).

I understand that most likely we would have to drop jss eventually due to its unmaintained status and I've already started to implement some basic features to encapsulate styles creation and ssr (see https://github.com/mantinedev/mantine/blob/next-minor/docs/src/docs/changelog/2-5-0.mdx) within @mantine/core package. When day comes and we will be ready to move away from jss this will provide a good base for implementing our own jss like styling solution.

[dukesx]

@rtivital looks promising but i do really hope that we can get rid of React JSS as fast as possible. I mean Google was once a pretty forgiving search engine but now as Google tightens its grip on us, with lighthouse scores affecting SEO, i think this is the moment we decide which direction we wanna go.

[rtivital]

That's not actually true, Google does not use neither Lighthouse nor Page Speed results, it would make no sense (more details – https://simonhearne.com/2021/core-web-vitals-seo/#field-is-more-important-than-lab)

I did not experience any issues with loading times or any real metrics on any of my production websites built with Mantine (I have 7 apps built with Gatsby, Next and cra like setup). And Lighthouse scores are not so bad even on mantine.dev landing which includes like a gazilion components used in examples section.

So yeah, I would blame jss for bugs but not for real world performance.