symdiff: prevent dead css

Some time ago I wrote a gulp plugin to enforce clean CSS in your frontend build. The idea, which I have from Github, is to break said build when the sets of classes in CSS and templates are not equal. This way you make sure you’re always actually using the styles you define and keep the amount of classes in your templates to a minimum.

I find it very useful and as of time of writing some 230 people on Github agree with me. The plugin has a few limitations though:

1. Gulp only
2. vanilla CSS only, which is not too much of an issue, but still
3. HTML only, possibly with Angular

This lead to the situation where I wasn’t sure if I could use my own software because in the next project I used Handlebars templates. Oops. And what if I chose React/JSX?

To make the plugin future-proof I split the functionality in several small modules and gave it a new name: “symdiff”.¹ The core component which compares the sets is symdiff and just about 60 lines with comments. Then there are several symdiff plugins to extract classes from files. And finally there are plugins for build tools that use symdiff under the hood, currently only gulp-symdiff.

Because the logic of “how do I extract classes” is now decoupled from “how do I read files” and “how do I compare classes”, symdiff is very extensible. And it is easy to write a plugin for it.

If you didn’t know about gulp-check-unused-css (GCUC), give symdiff a try—it’s really useful. If you’re using GCUC, consider switching to symdiff. The Angular support isn’t available yet, but aside from that it’s the same. I won’t develop GCUC any further. If you’re missing something in GCUC please open an issue on Github or, better, submit a PR.