Skip to content

Instantly share code, notes, and snippets.

@Igloczek
Created March 5, 2017 12:20
Show Gist options
  • Save Igloczek/b4604e62a4e7308b1c49d00dc920662e to your computer and use it in GitHub Desktop.
Save Igloczek/b4604e62a4e7308b1c49d00dc920662e to your computer and use it in GitHub Desktop.
Extremely simple CSS specificity analyzer
const css = require('css'),
fs = require('fs'),
specificity = require('specificity');
function getSelectorsWithHighSpecificity(cssFilePath, maxSpecificity) {
const cssFile = fs.readFileSync(cssFilePath, 'utf8'),
output = [];
css.parse(cssFile).stylesheet.rules.forEach(rule => {
if (rule.type === 'rule') {
rule.selectors.forEach(el => {
output.push(specificity.calculate(el)[0]);
})
}
});
return output
.map(rule => ({
selector: rule.selector,
specificity: rule.specificityArray[1] * 100 + rule.specificityArray[2] * 10 + rule.specificityArray[3] * 1
}))
.sort((a, b) => a.specificity - b.specificity)
.filter(el => el.specificity > maxSpecificity);
}
const output = getSelectorsWithHighSpecificity(
'/Users/igloczek/Sites/magento2/pub/static/frontend/Snowdog/blank/en_US/css/styles.css',
70
);
console.log('Selectors found: ' + output.length);
output.forEach(el => {
console.log(el.specificity + ' - ' + el.selector);
});
{
"dependencies": {
"css": "^2.2.1",
"specificity": "^0.3.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment