First thought: WTF! I had to take a look.

It's a case of combinatorial explosion, e.g. there is a style for every integer up to some max I didn't care to find out, for the height:

    .pxh-558 { height: 558px; }

So it's 500kb of unrolled syntax sugar.

Use purgecss - https://purgecss.com/, its the same strategy employed by tailwindcss. It will filter out all the classes you don't actually use. Tailwind is over 2MB before its purged, and only a few KB afterward.

Yes. I assume he generated the stylesheet programmatically. I guess the intelligent way to use this would be to write some code that detects which classes are actually being used and only include those in a smaller stylesheet.

Thanks. I assumed someone somewhere had solved this problem.

This all feels weird to me. Sort of like anti-compiling! But I guess it works.

I do like to avoid JS toolchains if I can though. Even though I am a webpack aficionado. But if you are going to have a css class for every possible style you might want to use, there is probably no other way.

I was thinking that this should go in reverse: since the class names follow a pattern, you should just be able to make up classes to do what you want, and code should generate the CSS file based on his pattern. That would be offline, and could be in any language