Our CSS Diff tool beta is now public!

In one of our recent contracts, we encountered a problem. The design team was using a content management system to maintain the non-transactional portions of their website, while the engineering team was building a tomcat/spring web application to handle shopping cart and search functionality. The content management system (OpenCMS) was its own versioning system and was largely incompatible with the CVS instance that the engineers were using for the web application. The result of this was that there were two sets of stylesheets for both sides of the application. As marketing and content personnel made changes in OpenCMS, the CSS stored there began to diverge from the copy the engineers were using and altering.

As we approached production, it became necessary to merge the CSS into a single file, but by that point both branches were upwards of 4000 lines each and had diverged wildly. Throwing both files into a traditional line based file differ was useless as one of the files had been passed through a sanitizer at some point earlier in its lifespan and its format was far too different. What was needed was a diff utility that understood CSS.

For this purpose, I wrote CSS Diff. Using the wc3 css parser libraries, the tool loads and parses each of the diverging css diff files into an internal representation, and comparing these representations, thus showing the substantive differences while ignoring the ordering, formating, and syntax ambiguity. It worked wonderfully, showing us which selectors are unique in each file, which selectors conflicted, as well as the attributes of the selectors that were in conflict.