PostCSS plugin that rates each CSS rule according to specificity. This is my first foray into PostCSS plugin development, so it's more like a pet project than something with real-world use (probably).
Special thanks to https://github.com/keeganstreet/specificity for providing a calculation service for specificity.
.foo {
background: white;
}
.foo > p.bar {
background: black;
}
.foo {
/* Specificity: 0,0,1,0 */
background: white;
}
.foo > p.bar {
/* Specificity: 0,0,2,1 */
background: black;
}
postcss([ require('postcss-specificity-ratings') ])
See PostCSS docs for examples for your environment.