r3b
7/16/2013 - 5:28 AM

Analyzing CSS Selectors with PhantomJS

Analyzing CSS Selectors with PhantomJS

#!/usr/bin/env phantomjs --web-security=false

var system = require('system')
    , page = require('webpage').create();
var address=system.args[1];
if(address===undefined){
    console.warn("USAGE: phantomjs --web-security=false cssCheck.js <http://your-site.com/index.html>")
    phantom.exit();
}
page.onConsoleMessage = function (msg) {console.log(msg);};
page.open(address, function(status) {
    var data=page.evaluate(function(){
        var sheetCount=0,ruleCount=0, unmatchedRuleCount=0, unmatched=[], matched=[], matches;
        Array.prototype.slice.apply(document.styleSheets).forEach(function(styleSheet){
            if(styleSheet.cssRules){
                Array.prototype.slice.apply(styleSheet.cssRules).forEach(function(rule){
                    matches=document.querySelectorAll(rule.selectorText);
                    if(matches && matches.length){
                        matched.push({rule:rule.selectorText, matches:matches.length||0, stylesheet:styleSheet.href||'embedded'})
                    }else{
                        unmatchedRuleCount++;
                        unmatched.push({rule:rule.selectorText, matches:0, stylesheet:styleSheet.href||'embedded'})
                    }
                    ruleCount++;
                })
            }
            sheetCount++;
        });
        return {sheets:sheetCount,rules:ruleCount, unmatched:unmatched, matched:matched}
    });
    console.log(JSON.stringify(data, null, 4));
    phantom.exit(1);
});