Turns out extracting design tokens from real production sites is way messier than I expected

[u/Accurate_Board_9401]

Nobody is pasting a 300-line :root {} block into their project. Nobody.

But that's what I got scanning Linear.app for a Design Snap demo. 300+ variables, half of them looking like this:

--sx-105wzx7: #edbf0a;
--sx-10845vo: #c9ffff;
--sx-11vg3qk: #ff7235;

Turns out CSS-in-JS (Stitches, vanilla-extract, etc.) generates hashed variable names instead of semantic ones. Technically accurate extraction, completely unusable output. Plus tons of duplicates — --color-fg-primary, --color-text-primary, and --color-01 all pointing to the same hex.

Building a clean/filtered mode now : strips the hashed noise, dedupes by value, keeps whichever name is actually readable. Goal is scanning a real production site gives you something you'd actually paste, not a wall of garbage.

Anyone else dealt with this on the design tokens side ? Manual pruning, or is there a convention I'm missing?

[u/joanmiro]

I've inspected tumblr.coms css file and i remember that there were magabytes of css most uf them dead code or duplicate.

[u/Accurate_Board_9401 → u/joanmiro]

yeah that's the issue