Add --similar-colors flag to remove diffs that show colors changed are within 1 r g and b of each other.

Author: uberska

bin/css-compare

@@ -32,6 +32,8 @@ var argv = yargs.usage('Normalizes and compares CSS output.')
 
 .describe('context', 'Provide diff context.')
 
+.describe('similar-colors', 'Excludes diffs for similar colors (rgb each within 1).')
+
 .argv;
 
 var diff = csscomp(argv.test, argv.control, argv).diff;

css-compare.js

@@ -5,6 +5,7 @@ var fs = require('fs');
 var color = require('color-parser');
 var diff = require('diff');
 var _ = require('lodash');
+var util = require('util');
 
 function parseColors(value) {
   // Throw everything at colorString, and see what sticks.
@@ -141,15 +142,173 @@ var extensions = {
   removeprefixes: require('./lib/extensions/removeprefixes')
 };
 
-function createDiff(fileName, oldStr, newStr, options) {
-  return diff.createPatch(fileName, oldStr, newStr).split("\n").filter(function(line) {
-    if (options.context) {
-      return true;
+function filterContext(lines) {
+  return lines.filter(function(line) {
+    const trimmed = line.trimRight();
+    return trimmed !== "+" &&
+      trimmed !== "-" &&
+      (trimmed.indexOf('-') === 0 || trimmed.indexOf('+') === 0);
+  });
+}
+
+function filterSimilarColors(patchLines) {
+  function hasPlusLinesDirectlyAhead(index) {
+    for(var i = index; i < patchLines.length; i++) {
+      if (patchLines[i].startsWith("-")) {
+        continue;
+      }
+
+      return patchLines[i].startsWith("+") && !patchLines[i].startsWith("+++");
     }
 
-    const trimmed = line.trimRight();
-    return trimmed !== "+" && trimmed !== "-" && (trimmed.indexOf('-') === 0 || trimmed.indexOf('+') === 0)
-  }).join("\n");
+    return false;
+  }
+
+  // Batch diffs into chunks while maintaining line numbers.
+  //  [
+  //    {
+  //      'old': [
+  //        {line: 34, text: '- opacity: 1.0'}
+  //        {line: 35, text: '- color: rgba(0, 0, 0, 0)'}
+  //      ],
+  //      'new': [
+  //        {line: 36, text: '+ opacity: 0.9'}
+  //        {line: 37, text: '+ color: rgba(1, 1, 1, 0)'}
+  //      ],
+  //    },
+  //    ...
+  //  ]
+  let oldLines = [];
+  let newLines = [];
+  let chunks = [];
+  patchLines.forEach((line, index) => {
+    // Only accumulate old lines if we peek ahead and see new lines coming.
+    // We don't want to accumulate single removals.
+    if (line.startsWith("-") && !line.startsWith("---") && hasPlusLinesDirectlyAhead(index)) {
+      oldLines.push({line: index, text: line});
+      return;
+    }
+
+    // Only accumulate new lines if we found old lines. We don't want to
+    // accumulate single additions.
+    if (line.startsWith("+") && !line.startsWith("+++") && oldLines.length > 0) {
+      newLines.push({line: index, text: line});
+    }
+
+    // Check if we've completed a chunk
+    if (oldLines.length > 0 && newLines.length > 0 && 
+        (index === patchLines.length - 1 || !patchLines[index + 1].startsWith("+"))) {
+      // We completed a chunk. Accumulate it.
+      chunks.push(
+        {
+          'old': oldLines,
+          'new': newLines
+        }
+      );
+      // Reset our state
+      oldLines = [];
+      newLines = [];
+    }
+  });
+
+  // Filter our lines that don't include rgba. Whitelist what property values
+  // can be.
+  //  [
+  //    {
+  //      'old': [
+  //        {line: 35, text: '- color: rgba(0, 0, 0, 0)'}
+  //      ],
+  //      'new': [
+  //        {line: 37, text: '+ color: rgba(1, 1, 1, 0)'}
+  //      ],
+  //    },
+  //    ...
+  //  ]
+  const ALLOWED_PROPERTIES = [
+    "color",
+    "background-color",
+  ];
+  const lineFilter = (line) => {
+    const rgbaCount = (line.text.match(/rgba\(/g) || []).length;
+    const match = line.text.match(/[+-][ ]+([^:]+):/);
+
+    if (rgbaCount > 1) {
+      throw new Error("More than one rgba per line. Investigate!");
+    }
+
+    return rgbaCount === 1 &&
+      (match && ALLOWED_PROPERTIES.includes(match[1]));
+  }
+
+  chunks.forEach((chunk) => {
+    chunk.old = chunk.old.filter(lineFilter);
+    chunk.new = chunk.new.filter(lineFilter);
+  });
+
+  chunks = chunks.filter((chunk) => {
+    return chunk.old.length > 0 && chunk.new.length > 0;
+  });
+
+  // Compare old and new by index. If the colors are the same within a tolerance
+  // keep track of what lines to remove
+  // [35, 37]
+  const linesToRemove = [];
+
+  chunks.forEach((chunk) => {
+    for (var i = 0; i < chunk.old.length && i < chunk.new.length; i++) {
+      const oldLine = chunk.old[i].text;
+      const newLine = chunk.new[i].text;
+
+      const oldRgbRegex = /rgba\(([\d]+), ([\d]+), ([\d]+),/g;
+      const oldMatch = oldRgbRegex.exec(oldLine);
+      const newRgbRegex = /rgba\(([\d]+), ([\d]+), ([\d]+),/g;
+      const newMatch = newRgbRegex.exec(newLine);
+
+      if (!oldMatch || !newMatch) {
+        throw new Error("Expected rgba to exist on these lines!");
+      }
+
+      const oldR = parseInt(oldMatch[1], 10);
+      const oldG = parseInt(oldMatch[2], 10);
+      const oldB = parseInt(oldMatch[3], 10);
+
+      const newR = parseInt(newMatch[1], 10);
+      const newG = parseInt(newMatch[2], 10);
+      const newB = parseInt(newMatch[3], 10);
+
+      if (Math.abs(oldR - newR) <= 1 &&
+        Math.abs(oldG - newG) <= 1 &&
+        Math.abs(oldB - newB) <= 1) {
+        linesToRemove.push(chunk.old[i].line);
+        linesToRemove.push(chunk.new[i].line);
+      }
+    }
+  });
+
+  // Sort the line numbers and remove in reverse
+  linesToRemove.sort((a,b) => a - b);
+
+  for (var i = linesToRemove.length - 1; i >= 0; i--) {
+    patchLines.splice(linesToRemove[i], 1);
+  }
+
+  return patchLines;
+}
+
+function createDiff(fileName, oldStr, newStr, options) {
+  let patchLines = diff.createPatch(fileName, oldStr, newStr).split("\n");
+
+  // This should be done before context removal because it helps us
+  // differentiate between chunks of differences
+  if (options["similar-colors"]) {
+    patchLines = filterSimilarColors(patchLines);
+  }
+
+  if (!options.context) {
+    patchLines = filterContext(patchLines);
+  }
+
+  return patchLines.join("\n");
 }
 
 module.exports = function(test, control, options){

spec/csscompSpec.js

@@ -13,6 +13,13 @@ function fixture(filename) {
   return fs.realpathSync('./spec/fixtures/'+filename);
 }
 
+function diffFixtures(dir, options) {
+  var options = options || {};
+  var diff = csscomp(fixture(dir+files.test), fixture(dir+files.control), Object.assign(options, {label: files.test})).diff;
+  var expected = fs.readFileSync(fixture(dir+files.expected)).toString();
+  expect(diff).toBe(expected);
+}
+
 describe("Comparisons", function() {
   it("should compare", function() {
     var diff = csscomp(fixture('general/'+files.test), fixture('general/'+files.control), {label: files.test}).diff;
@@ -43,3 +50,21 @@ describe("Extensions", function(){
 
   });
 });
+
+describe("Colors", function(){
+  it("should be filtered from the diff if the rgba values are the same", function(){
+    diffFixtures('similar-colors/same/', {"similar-colors": true});
+  });
+
+  it("should not be filtered from the diff if the rgba values are outside a specified tolerance", function(){
+    diffFixtures('similar-colors/different/', {"similar-colors": true});
+  });
+
+  it("should be filtered from the diff if the rgba values are within a specified tolerance", function(){
+    diffFixtures('similar-colors/within-tolerance/', {"similar-colors": true});
+  });
+
+  it("should be filtered from any property name", function(){
+    diffFixtures('similar-colors/names/', {"similar-colors": true});
+  });
+});

spec/fixtures/similar-colors/different/control.css

@@ -0,0 +1,4 @@
+h1 {
+  opacity: 1.0;
+  color: rgba(127, 127, 127, 0);
+}

spec/fixtures/similar-colors/different/expected.diff

@@ -0,0 +1,6 @@
+--- test.css
++++ test.css
+-  opacity: 1;
+-  color: rgba(127, 127, 127, 0);
++  opacity: 0.9;
++  color: rgba(127, 127, 129, 0);

spec/fixtures/similar-colors/different/test.css

@@ -0,0 +1,4 @@
+h1 {
+  opacity: 0.9;
+  color: rgba(127, 127, 129, 0);
+}

spec/fixtures/similar-colors/names/control.css

@@ -0,0 +1,6 @@
+h1 {
+  opacity: 1.0;
+  color: rgba(127, 127, 127, 0);
+  background-color: rgba(127, 127, 127, 0);
+  foo: rgba(127, 127, 127, 0);
+}

spec/fixtures/similar-colors/names/expected.diff

@@ -0,0 +1,6 @@
+--- test.css
++++ test.css
+-  opacity: 1;
+-  foo: rgba(127, 127, 127, 0);
++  opacity: 0.9;
++  foo: rgba(128, 128, 128, 0);

spec/fixtures/similar-colors/names/test.css

@@ -0,0 +1,6 @@
+h1 {
+  opacity: 0.9;
+  color: rgba(128, 128, 128, 0);
+  background-color: rgba(128, 128, 128, 0);
+  foo: rgba(128, 128, 128, 0);
+}

spec/fixtures/similar-colors/same/control.css

@@ -0,0 +1,4 @@
+h1 {
+  opacity: 1.0;
+  color: rgba(127, 127, 127, 0);
+}

spec/fixtures/similar-colors/same/expected.diff

@@ -0,0 +1,4 @@
+--- test.css
++++ test.css
+-  opacity: 1;
++  opacity: 0.9;

spec/fixtures/similar-colors/same/test.css

@@ -0,0 +1,4 @@
+h1 {
+  opacity: 0.9;
+  color: rgba(127, 127, 127, 0);
+}

spec/fixtures/similar-colors/within-tolerance/control.css

@@ -0,0 +1,4 @@
+h1 {
+  opacity: 1.0;
+  color: rgba(127, 127, 127, 0);
+}

spec/fixtures/similar-colors/within-tolerance/expected.diff

@@ -0,0 +1,4 @@
+--- test.css
++++ test.css
+-  opacity: 1;
++  opacity: 0.9;

spec/fixtures/similar-colors/within-tolerance/test.css

@@ -0,0 +1,4 @@
+h1 {
+  opacity: 0.9;
+  color: rgba(128, 128, 128, 0);
+}