A tool for diffing CSS files by parsing them into Abstract Syntax Trees using reworkcss/css, sorting them, and comparing the stringified output. Useful for finding functional changes in CSS built from a preprocessor such as SASS.
Install css-ast-diff
as a cli using npm:
npm i -g css-ast-diff
Compare a file to the latest commit on HEAD of its git repository (i.e. git diff HEAD
):
css-ast-diff build/style.css
Compare a file to the original file in the SVN working copy:
css-ast-diff --svn build/style.css
Compare two files:
css-ast-diff style-new.css style-old.css
Compare two files with absolute paths:
css-ast-diff --absolute-paths ~/Desktop/style-new.css ~/Desktop/style-old.css
Comparing files with rules simply rearranged should yield no differences:
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: red;
font-size: 18px;
}
body {
background: red;
font-size: 18px;
}
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Files with duplicate selectors and media queries show a diff with duplicate rules merged [src] [diff]:
css-ast-diff test/duplicates/diff.css test/duplicates/src.css
Index: file
===================================================================
--- file
+++ file
@@ -2,8 +2,13 @@
body {
background: green;
font-size: 21px;
}
+
+ div {
+ margin: 0 auto;
+ text-decoration: underline;
+ }
}
* {
-moz-box-sizing: border-box;
@@ -11,10 +16,17 @@
}
body {
background: red;
+ background: orange;
+ background: yellow;
+ background: green;
+ background: blue;
+ background: indigo;
+ background: violet;
font-size: 18px;
}
p {
color: purple !important;
+ color: pink;
}
\ No newline at end of file