selector-property-whitelist: a potential CSS algorithms rule for Stylelint

Posted July 24, 2019 in Web Development


The configuration would look like this:

'selector-property-whitelist': {
	'/^.a-space-children.*/': [
		'margin-top',
		'margin-left',
		'display',
		'--a-space-children-spacer',
		'flex-wrap'
	],
	'/^.pmc-a-glue.*/': [
		'top',
		'right',
		'bottom',
		'left',
		'position',
		'z-index',
		'--a-glue-bottom',
		'--a-glue-top',
		'--a-glue-right',
		'--a-glue-left'
	]
}

The regular expressions in the keys essentially say “find all classes beginning with .pmc-a-glue, etc. Regular expressions here are nice because you can test a pattern with multiple selectors, but you could also update it to be a single class, a data attribute, or even a pseudo-element. I think this could also be a nice means of documentation!

If you aren’t using the algorithm naming like I have above, this example might make more sense is:

'selector-property-whitelist': {
	'.l-article': [
		'display',
		'grid-template-columns',
		'grid-gap',
		'grid-column'
	],
	'.c-heading': [
		'font-size',
		'color',
		'line-height
		'font-family',
		'letter-spacing'
	]
}

Why would this be useful? It’s largely a way to protect the rule-set from modification by others (or a future you) in a way you hadn’t intended, and would provide good friction to encourage someone to look into an existing solution to their problem, or to author a new class for the declarations.

To take this further, there would absolutely be a way to group properties of certain intent so that you don’t need to list all of the possible CSS grid properties, for example, or all of the possibly properties related to typography.

My question to you, whoever may be reading this: would you find this useful in your work?

I have this working as a Stylelint plugin for Larva (the PMC design system) and I think this could be a useful in the main Stylelint rules! And more amazingly, I think I understand the Stylelint code-base enough to be able to contribute a PR!!