CSS diffing tool
For convenient testing of CSS code transforms
The tool accepts an HTML file and two CSS files: the original before your code transformation and the result of the transformation.
The HTML is stripped of tags such as
script that can potentially skew the visual comparison
by injecting dynamic content.
The results of rendering the two HTML files are saved to two PNGs which are then compared pixel by pixel.
If they are different, a GIF animation is also created to help debug.
Finally, the "before" and "after" CSS files are copied, prettified, comment-stripped and sent to your favorite diffing app so you can easily see what changed in the CSS. The prettification is done with the Mensch CSS parser/stringifier
$ npm install cssdiff
Also up to you to install ImageMagick (to create the animated GIF)
There is a
config.json where you can fiddle with (or delete) the paths to the three tools, if necessary.
var cssdiff = ;;
$ cssdiff index.html before.css after.css diff
All good with test/zen.html and test/before.css and test/before.css
ERROR! The before/after results are different You provided test/zen.html and test/before.css and test/after.css See these files to start debugging: * Generated HTML before: /path/to/tmp/ec2af394-984d-4bac-b9fb-92b4461fda1b-before.html * Generated HTML after: /path/to/tmp/ec2af394-984d-4bac-b9fb-92b4461fda1b-after.html * Screenshot before: /path/to/tmp/ec2af394-984d-4bac-b9fb-92b4461fda1b-before-webkit.png * Screenshot after: /path/to/tmp/ec2af394-984d-4bac-b9fb-92b4461fda1b-after-webkit.png * Gif animation: /path/to/tmp/ec2af394-984d-4bac-b9fb-92b4461fda1bwebkit.gif * CSS diff: "/Applications/DiffMerge" "path/to/tmp/3ef804f6-9496-4020-8193-b13f3d0a3255-before.css" "/path/to/tmp/3ef804f6-9496-4020-8193-b13f3d0a3255-after.css"