Compare CSS

README.md

1. Download this gist into a csscompare folder

2. npm install

3. Create before and after folders. Your folder should now look like this:

    - /csscompare
    |- /after
    |- /before
    |- /npm_modules
    |- index.js
    |- package.json
   

4. Copy your before and after CSS into the appropriate destinations

5. node index.js

6. Now look in the new compare folder and diff to your hearts content, either with a tool like FileMerge or diff -bur compare/before compare/after

index.js

var fs = require('fs');
var select = require('css-select');
var makeDom = require('htmlparser2').parseDOM;
var put = require('put-selector');

var audit,
  styles,
  foundSelectors,
  currentSelectors,
  deadSelectors;

audit = fs.readFileSync('./audit.txt', 'utf8');
styles = fs.readFileSync('./styles.css', 'utf8');

styles = styles.replace('@charset "UTF-8";', '');

// get the audited values as an array
foundSelectors = audit
  .trim()
  .split('\n')
  .map(Function.prototype.call, String.prototype.trim);

// get the current file's selectors as an array
currentSelectors = styles.trim().split('}').reduce(function(result, selector) {
  var selectorStr,
    selectors,
    newResult;

  selectorStr = selector.split('{').shift().trim();

  if (selectorStr.indexOf('@') !== -1 || selectorStr.indexOf(':') !== -1 || !selectorStr) {
    return result;
  }

  selectors = selectorStr.split(',').map(Function.prototype.call, String.prototype.trim);

  newResult = result.concat(selectors);
  return newResult;
}, []);

// for each audited value, look for it in the existing css
deadSelectors = currentSelectors.reduce(function(result, selector) {
  var el,
    dom,
    found = false,
    newResult;

  if (foundSelectors.indexOf(selector) !== -1) {
    return result;
  }

  // Sometimes the audit mixes some selectors up. For example, our CSS may have .one.two, but the
  // browser reports it as .two.one. So to TRUELY see if the selector was not found...

  try {
    // First, create an element based on the css selector (put-selector adds a line break that
    // screws up htmlparser2, so we have to remove that)
    el = put(selector.replace('*', 'div')).toString().replace('\n', '');

    // Second, create a traversable DOM object out of that element
    dom = makeDom(el)[0];

    // Finally, see if the any of the selectors in our found selectors match the element
    // Using a for...in loop so we can break out of it
    for (var s in foundSelectors) {
      if (select.selectAll(foundSelectors[s], [dom]).length) {
        found = true;
        break;
      }
    }
  } catch(e) {
    console.log('CHECK OUT THIS SHITTY CSS: ' + selector);
  }

  if (found) {
    return result;
  } else {
    return result.concat([selector]);
  }
}, []);

console.log(deadSelectors.sort().join('\n'));

package.json

{
  "name": "csscompare",
  "version": "1.0.0",
  "description": "Compare some CSS directories by normalizing the source",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cssbeautify": "^0.3.1",
    "glob": "^5.0.5",
    "js-beautify": "^1.5.5",
    "mkdirp": "^0.5.0",
    "rimraf": "^2.3.2",
    "uglifycss": "0.0.14"
  }
}