Token-based theming doubled our CSS size, still worth it?

We moved our design tokens to a fully token-driven theme system for a client app in Austin, and the CSS bundle jumped from 120KB to 240KB. The upside is that swapping dark mode or brand variants takes minutes now, not days. My teammate thinks the bloat is fine on modern connections, but I'm seeing slower first paint on older phones. Has anyone else seen bundle size explode after going token-heavy, and did you find a way to trim it without losing the flexibility?

2 comments

2 Comments

riley5174d ago

we hit the exact same wall on a react native project last year. css went from like 90kb to 190kb and i was ready to scrap it. what finally worked was purging unused tokens at build time, we had like 40% of our tokens never actually used in components. also stopped generating separate css for every single variant and switched to css custom properties for the stuff that changes, dark mode being the big one. that cut it back down to around 130kb and we kept the quick swap feature. modern connections dont care but your older phone test is real, i felt it too on a moto g we kept around.

joseph_lewis924d ago

Honestly, purging tokens feels like giving up the whole point of the system for a few kilobytes.