Duplicates server side rendered styles

[Bram-Zijp]

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]

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.