prettier-grundy-scss-order

grundy-scss-order

A Prettier plugin to sort CSS or SCSS properties. Using postcss-scss for parse source.

Usage

Following the Prettier plugin guidelines, this package depends on Prettier as a peer dependency: npm install prettier-grundy-scss-order --save-dev

To enable the plugin use the Prettier API, CLI or configuration file. For example using the JS configuration:

{
    "plugins": ["prettier-grundy-scss-order"]
}

Configuration

This plugin adds next configurable keys to Prettier:

Option Name	Description	Default value
grundyScssSorterGroupsOrder	array of groups in needed order	["@use", "--variable", "$variable", "@if", "decl", "@include", "@mixin", "rule"]
grundyScssSorterWithRoot	flag if need sort on root level	false
grundyScssSorterSplitGroup	flag if need split groups in result with empty line	false
grundyScssSorterGroups	define custom groups to sort, extend default groups
grundyScssSorterPreset	predefined properties, for example: csscomb

Presets

Available presets for migrate from other plugins

Preset	Description
csscomb	preset for migrate from csscomb sorter with default preset
csscomb-yandex	preset for migrate from csscomb sorter with yandex preset
csscomb-zen	preset for migrate from csscomb sorter with zen preset

Predefined groups

• @use - scss use statements
• @mixin - scss @mixin statements
• --variable - css custom properties:
• $variable - scss variables
• decl - any css properties: color: ..., backgroud: ..., etc.
• @include - scss @include statements
• rule - css selector rule: .class {...}, tag{...}, #id{...}, etc.
• @if - scss @if with optionally @else/@else if statements
• @media - css @media statements
• @supports - css @supports statements

Custom groups

With option grundyScssSorterGroups possibly add custom groups satisfying the criterias

example, add group @font - in this group select all properties started with font: font, font-size, etc.

"{\"@font\": { \"startsWith\": \"font\" }}";

Then possibly use this group in grundyScssSorterGroupsOrder:

["--variable", "$variable", "@font", "decl"];

Custom groups criterias

To define custom group available next criterias

• startsWith - check name starts with parameter

• oneOf - check name one of array string

• type - check node type one of predefined type

  • "use"
  • "mixin"
  • "include"
  • "if"
  • "extend"
  • "atrule"
  • "rule"
  • "decl"
  • "$variable"
  • "variable"
  • "media"
  • "supports"

Samples

Criteria	Sample	Description	Applied to
type	{ "type": "use" }	select "@use" statements	@use "colors"; @use "colors" as c;
startsWith	{ "startsWith": "font" }	select statements starts with "font"	font: "Courier New"; font-size: 10px; @include fonts;
oneOf	{ "oneOf": ["position", "left"] }	select statements with name that exactly matches one of the array elements	position: relative; left: 10px;