css-analyzer icon indicating copy to clipboard operation
css-analyzer copied to clipboard

Calculate usage of layered vs un-layered rules

Open bartveneman opened this issue 3 years ago • 1 comments

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,
	}
]

bartveneman avatar Jun 09 '22 20:06 bartveneman

The same could be done for @media and @supports as well, to give some indication how much code is wrapped in 'conditionals'.

bartveneman avatar Jul 01 '22 15:07 bartveneman