Skip to content
A Node.js tool for diffing CSS files
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
lib
test
.editorconfig
.eslintrc
.gitignore
.jscsrc
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json

README.md

css-ast-diff

GitHub version npm version
Average time to resolve an issue Percentage of issues still open
Build Status Coverage Status

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.

Installation

Install css-ast-diff as a cli using npm:

npm i -g css-ast-diff

Usage

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

Examples

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
You can’t perform that action at this time.