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);
});