Replacing Svelte class names with emojis for fun and profit

Svelte tags every component with class names that look like svelte-abc123. But doesn't that seem wasteful? It makes your HTML and CSS larger just to scope styles.

You can customize this behavior by setting cssHash. I played around with a few options:

• Just switching from svelte- to svelte gave a 0.24% compressed size reduction. Didn't PR this because it isn't really free - what if someone, for some reason, was targeting the svelte- class name?
• The max compressed size reduction I got was a 4.3% by switching to Base 62. But this is very risky - for example, what if a component's class is m when m indicates the medium size? It also wasn't deterministic, because the identifier I used was the number of times cssHash was called.

But then I tried emojis. The profit: they were instantly recognizable, letting you both use them to identify which elements belonged to which components or tune them out, plus were smaller than the default svelte-abc123. The fun:

They also happened to be poetically accurate. 💅 for the theme settings, 🛗 for the arrow icon, 📺 for the demo section...