Package Exports

css-ast-diff

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (css-ast-diff) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

css-ast-diff

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