Saving an idea for diffing two CSS files, creating a patch and outputting a new file with only the changes

css-diff-patch-theme.js

#! /usr/bin/env node

var fs = require('fs');
var jsdiff = require('diff');
var args = process.argv;
var fileTypeRgxp = /\.css$/;
var files = [];
var diff;
var patch;

// 3 files are passed to the script, the last
// being the output file which we pop out of
// the array and store

var output = args.pop();

// Clear output file

fs.writeFileSync(output, '');

// Push only expected file types from arguments

args.forEach(function(arg) {
  if (fileTypeRgxp.test(arg)) {
    files.push(fs.readFileSync(arg, 'utf-8'));
  }
});

// Diff stored files from args

diff = jsdiff.diffLines(files[0], files[1]);

// Create a patch file to see the diff, then write

patch = jsdiff.createPatch(output + '.patch', files[0], files[1]);
fs.writeFileSync(output + '.patch', patch);

diff.forEach(function(part) {
  if (part.added === undefined && part.removed === undefined) {
    if (part.value.match(/^\..*\n$/) !== null) {
      fs.appendFileSync(output, part.value.match(/^\..*\n$/));
    }

    if (part.value.match(/\n\}/) !== null) {
      fs.appendFileSync(output, part.value.match(/\n\}/));
    }

    if (part.value.match(/\n\n.*\{\n/) !== null) {
      fs.appendFileSync(output, part.value.match(/\n\n.*\{\n/));
    }
  }

  if (part.added) {
    fs.appendFileSync(output, part.value);
  }
});

diff-left.css

.test1 {
  background-color: #fff;
  color: #fff;
  display: block;
  height: 100px;
  left: 0;
  overflow: hidden;
  position: absolute;
  text-shadow: 1px 1px 1px #000;
  top: 0;
  width: 100px;
}

.test2 {
  background-color: #121212;
  color: #181818;
  overflow: hidden;
  position: absolute;
  text-shadow: 1px 1px 1px #fff;
  top: 10px;
  width: 150px;
}

.test3 {
  background-color: orange;
  border: 1px solid purple;
  color: green;
  height: 500px;
}

.test4 {
  display: block;
  height: 150px;
  left: 500px;
  outline: 1px solid red;
  text-shadow: 5px 5px 1px pink;
  top: 25px;
  width: 50px;
  z-index: 1;
}

diff-right.css

.test1 {
  background-color: fuschia;
  color: #666;
  display: block;
  height: 100px;
  left: 0;
  overflow: hidden;
  position: absolute;
  text-shadow: 1px 1px 1px #555;
  top: 0;
  width: 100px;
}

.test2 {
  background-color: #141414;
  color: #161616;
  overflow: hidden;
  position: absolute;
  text-shadow: 1px 1px 1px #ccc;
  top: 10px;
  width: 150px;
}

.test3 {
  background-color: #000;
  border: 1px solid #777;
  color: #000;
  height: 500px;
}

.test4 {
  display: block;
  height: 150px;
  left: 500px;
  outline: 1px solid #f0f0f0;
  text-shadow: 5px 5px 1px #999;
  top: 25px;
  width: 50px;
  z-index: 1;
}