emotion-js / emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition
https://emotion.sh/
MIT License
17.49k stars 1.11k forks source link

Duplicates server side rendered styles #2357

Open Bram-Zijp opened 3 years ago

Bram-Zijp commented 3 years ago

I was thinking about duplicates in styles on my server side rendered app using emotion e.g.:

.css-hashHere {
  display: block;
  display: none;
}

After searching the issues in this repo, I landed here.

In above issue, performance is mentioned as argument against tree shaking properties. This might be valid but it might also depend on your setup. What are the computational differences in an SSR only "tree-shaking" approach? Apps that serve high loads, are commonly full of statically generated/cached pages. Even for those cases only, it might be worth to have a server side opt in.

srmagura commented 3 years ago

Hey @Bram-Zijp, if I understand you correctly:

  1. When you say "tree shaking", you are talking about automatically removing duplicate CSS rules, like the display: block in your example.
  2. You would like Emotion to remove duplicate CSS rules during SSR to reduce the size of the HTML that is produced. This would reduce the number of bytes you have to to store in your cache and send over the wire.

This is a reasonable feature request but the payoff seems very small.

Have you tried manually removing duplicate CSS rules from one of your SSR-produced HTML files? Then you could compare the size before and after. I would guess that the size will go down by 0.1% or less, but please correct me if I'm wrong.