LLMs tend top produce a lot of CSS, and rarely clean it up. This is a mix task and a script to analyze your css and remove some of it.

Caveat

This is AI-slop. I looked at a total of may be 10 lines of code of this. This is also why I don’t release it as an installable library: there’s already too much AI-generated code as it is.

However, I use this myself, and at works on my machine. YMMV

The README at the link (and this post) is purely human-generated by me. It’s a tool that I am using now, and others may find useful. YMMV, hic sunt dracones etc. apply.

What it does

mix task analyzes all ~H macros and .heex templates recursively to extract all possible class combinations:

• it resolves and recursively follows components, function calls, function components etc.
• it resolves function calls (looking at strings returned)
• it resolves conditionals &&,||, if, cond etc.

On each level of hierarchy it generates combinations of possible class names (because class1 class2 class3 can be matched by class1.class3) and outputs a detailed JSON of what was found.

Unresolved classes are marked as dynamic with a reason why they couldn’t be resolved, and where in the hierarchy they are (e.g. class name comes from an @assign)

As separate node script parses your app.css, extracts classes, and tries to match them against the classes produced by the mix task. And outputs the result, including all the matched classes and their locations, and all the unmatched classes, and why they were unmatched.

Optionally, you can run the script to remove all the unmatched classes from your app.css (or mark them invalid). The script cleans up empty declarations and empty @-rules resulting from removal, and also cleans up unused keyframe animations.

Does it work?

Works on my machine.

Seriously though, my side project is 5800 loc of .ex and .heex in my web directory, and 2000 loc of CSS. it removed 10% of CSS … and nothing broke.