PostCSS Beautifier

 License: https://raw.githubusercontent.com/jakelauer/PostCSS-Beautifier/master/LICENSE

Format CSS and SCSS on save, using PostCSS with stylefmt and postcss-sorting.

You can create custom settings JSON files for each and apply them in Tools > Options > PostCSS Beautifier. Simply point the settings to the JSON file path.

Example postcss-sorting JSON settings:

{ 	"order": [ 		"custom-properties", 		"dollar-variables", 		"declarations", 		"at-rules", 		{ 			"type": "at-rule", 			"name": "include" 		}, 		{ 			"type": "at-rule", 			"name": "include", 			"parameter": "icon" 		}, 		"rules" 	], 	"properties-order": [ 		{ 			"emptyLineBefore": true, 			"properties": [ 				"position", 				"display", 				"z-index", 				"float", 				"overflow", 				"overflow-x", 				"overflow-y", 				"clear", 				"overflow-scrolling", 				"clip", 				"zoom", 				"flex-direction", 				"flex-order", 				"flex-pack", 				"flex-align", 				"align-items", 				"justify-content" 			] 		}, 		{ 			"emptyLineBefore": true, 			"properties": [ 				"box-sizing", 				"top", 				"right", 				"bottom", 				"left", 				"width", 				"min-width", 				"max-width", 				"height", 				"min-height", 				"max-height", 				"margin", 				"margin-top", 				"margin-right", 				"margin-bottom", 				"margin-left", 				"padding", 				"padding-top", 				"padding-right", 				"padding-bottom", 				"padding-left" 			] 		}, 		{ 			"emptyLineBefore": true, 			"properties": [ 				"table-layout", 				"empty-cells", 				"caption-side", 				"border-spacing", 				"border-collapse", 				"list-style", 				"list-style-position", 				"list-style-type", 				"list-style-image" 			] 		}, 		{ 			"emptyLineBefore": true, 			"properties": [ 				"content", 				"quotes", 				"counter-reset", 				"counter-increment", 				"resize", 				"cursor", 				"user-select", 				"nav-index", 				"nav-up", 				"nav-right", 				"nav-down", 				"nav-left", 				"transition", 				"transition-delay", 				"transition-timing-function", 				"transition-duration", 				"transition-property", 				"transform", 				"transform-origin", 				"animation", 				"animation-name", 				"animation-duration", 				"animation-play-state", 				"animation-timing-function", 				"animation-delay", 				"animation-iteration-count", 				"animation-iteration-count", 				"animation-direction", 				"text-align", 				"text-align-last", 				"vertical-align", 				"white-space", 				"text-decoration", 				"text-emphasis", 				"text-emphasis-color", 				"text-emphasis-style", 				"text-emphasis-position", 				"text-indent", 				"text-justify", 				"text-transform", 				"letter-spacing", 				"word-spacing", 				"writing-mode", 				"text-outline", 				"text-transform", 				"text-wrap", 				"text-overflow", 				"text-overflow-ellipsis", 				"text-overflow-mode", 				"word-wrap", 				"word-break", 				"tab-size", 				"hyphens", 				"pointer-events" 			] 		}, 		{ 			"emptyLineBefore": true, 			"properties": [ 				"opacity", 				"visibility", 				"interpolation-mode", 				"color", 				"border", 				"border-collapse", 				"border-width", 				"border-style", 				"border-color", 				"border-top", 				"border-top-width", 				"border-top-style", 				"border-top-color", 				"border-right", 				"border-right-width", 				"border-right-style", 				"border-right-color", 				"border-bottom", 				"border-bottom-width", 				"border-bottom-style", 				"border-bottom-color", 				"border-left", 				"border-left-width", 				"border-left-style", 				"border-left-color", 				"border-radius", 				"border-top-left-radius", 				"border-top-right-radius", 				"border-bottom-right-radius", 				"border-bottom-left-radius", 				"border-image", 				"border-image-source", 				"border-image-slice", 				"border-image-width", 				"border-image-outset", 				"border-image-repeat", 				"outline", 				"outline-width", 				"outline-style", 				"outline-color", 				"outline-offset", 				"background", 				"background-color", 				"background-image", 				"background-repeat", 				"background-attachment", 				"background-position", 				"background-position-x", 				"background-position-y", 				"background-clip", 				"background-origin", 				"background-size", 				"box-decoration-break", 				"box-shadow", 				"text-shadow" 			] 		}, 		{ 			"emptyLineBefore": true, 			"properties": [ 				"font", 				"font-family", 				"font-size", 				"font-weight", 				"font-style", 				"font-variant", 				"font-size-adjust", 				"font-stretch", 				"font-effect", 				"font-emphasize", 				"font-emphasize-position", 				"font-emphasize-style", 				"font-smooth", 				"line-height" 			] 		} 	], 	"unspecified-properties-position": "bottom" }

Example stylefmt JSON settings:

{ 	"extends": "stylelint-config-standard", 	"rules": { 		"at-rule-empty-line-before": "always", 		"block-closing-brace-newline-after": "always", 		"block-closing-brace-newline-before": "always", 		"block-opening-brace-newline-after": "always", 		"block-opening-brace-newline-before": "always", 		"declaration-colon-space-after": "always", 		"declaration-colon-space-before": "never", 		"indentation": "tabs", 		"length-zero-no-unit": true, 		"selector-combinator-space-after": "always", 		"selector-combinator-space-before": "always", 		"selector-list-comma-newline-after": "always", 		"selector-list-comma-newline-before": "never" 	} }