Prettier-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:

grundyScssSorterGroupsOrder

["@use", "--variable", "$variable", "@if", "decl", "@include", "@mixin", "rule"]

grundyScssSorterWithRoot

true

grundyScssSorterSplitGroup

false

grundyScssSorterGroups

define custom groups to sort, extend default groups

grundyScssSorterPreset

predefined properties, for example: csscomb

Presets

Available presets for migrate from other plugins

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

{
    "type": "use"
}

@use "colors";
@use "colors" as c;

{
    "startsWith": "font"
}

font: "Courier New";
font-size: 10px;
@include fonts;

{
    "oneOf": ["position", "left"]
}

position: relative;
left: 10px;

Try it

Open playground