Stylelint-logical-order NPM

stylelint-logical-order

Stylelint config that sorts related property declarations by grouping together following the order:

1) Special 2) Position 3) Box Model 4) Border 5) Box 6) Spacing 7) Typography 8) Content Layout 9) Visual 10) Background 11) Transform 12) Animation 13) Svg 14) Misc.

.element {
	/* Position */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;

	/* Box Model */
	display: block;
	float: right;
	width: 100px;
	height: 100px;

	/* Spacing */
	margin: 10px;
	padding: 10px;

	/* Border */
	border: 2px solid red;
	border-bottom-width: 1px;
	border-left: none;

	/* Typography */
	color: #888;
	font: normal 16px Helvetica, sans-serif;
	line-height: 1.3;
	text-align: center;

	/* Content Layout */
	columns-count: 3;

	/* Background */
	background-color: #eee;

	/* Transform */
	transform-origin: 0 0;
	transform: translateX(-50%);

	/* Visibilty */
	opacity: 1;

	/* Animation */
	transition: all 1s;

	/* Svg */
	fill: red;
	stroke: 2;

	/* Misc */
	user-select: none;
}

Usage

Add stylelint and this package to your project:

npm install --save-dev stylelint stylelint-logical-order
# or, if you prefer yarn over npm:
yarn add --dev stylelint stylelint-logical-order

Add this package to the end of your extends array inside Stylelint configuration (.stylelintrc for example):

{
  "extends": [
    "stylelint-logical-order"
  ]
}

Extended version with more settings

"stylelint": {
		"rules": {
			"at-rule-no-unknown": [
				true,
				{
					"ignoreAtRules": [
						"if",
						"for",
						"import",
						"else",
						"each",
						"mixin",
						"include",
						"content",
						"extend",
						"at-root"
					]
				}
			],
			"order/order": [
				"custom-properties",
				"dollar-variables",
				"declarations",
				"rules"
			],
			"indentation": "tab"
		},
		"extends": [
			"stylelint-logical-order"
		]
	}