@mrhenry/stylelint-mrhenry-prop-order

@mrhenry/stylelint-mrhenry-prop-order

Specify a strict order for CSS properties.

/* valid */
.foo {
	width: 100px;
	height: 20px;
}

/* invalid */
.foo {
	height: 20px; /* we prefer width before height */
	width: 100px;
}

/* valid */
.foo {
	margin: 20px;
	margin-top: 10px;
}

/* invalid */
.foo {
	margin-top: 10px; /* longhand before a shorthand */
	margin: 20px;
}

This package doesn't create groups of properties. But it will respect patterns that are often used to group properties:

• empty lines
• comments
• custom properties
• vendor prefixed CSS

.foo {
	a: 0; /* section : 1 */
	b: 0; /* section : 1 */

	c: 0; /* section : 2 */
	d: 0; /* section : 2 */
	/* a comment */
	e: 0; /* section : 3 */
	f: 0; /* section : 3 */
	--a: 0; /* ignored */
	--b: 0; /* ignored */
	-webkit-foo: 0; /* ignored */
}

Usage

npm install --save-dev @mrhenry/stylelint-mrhenry-prop-order

// stylelint.config.js
module.exports = {
	plugins: [
		"@mrhenry/stylelint-mrhenry-prop-order",
	],
	rules: {
		"@mrhenry/stylelint-mrhenry-prop-order": true,
	},
}

List of properties :

The list is sourced from @webref/css.

To update properties :

• npm run update (to get the latest @webref/css)
• npm run test

This will tell you which properties are missing.