css-analyzer
css-analyzer copied to clipboard
Calculate usage of layered vs un-layered rules
CSS can be in an @layer atrule, or not. It would be interesting how many rules/selectors/declarations are within layers and how many aren't.
Maybe even report it in a way so it's possible to visualize it like @bramus did in his 2022 CSS Day talk about the cascade.
[
{
name: 'reset',
atrules_count: 0,
rule_count: 10,
selector_count: 12,
declarations_count: 22,
},
{
name: '<anonymous>', // unnamed layer
atrules_count: 2,
rule_count: 36,
selector_count: 83,
declarations_count: 152,
},
{
name: '<unlayered>', // not inside a layer
atrules_count: 0,
rule_count: 1,
selector_count: 2,
declarations_count: 4,
}
]
The same could be done for @media and @supports as well, to give some indication how much code is wrapped in 'conditionals'.