Prettier-grundy-scss-order

Плагин prettier для сортировки CSS или SCSS свойств. Для разбора исходников использует postcss-scss.

Использование

Для установки можно использовать команду:

npm install prettier-grundy-scss-order --save-dev

Для подключения плагина можно воспользоваться Prettier API, CLI или конфигурационного файла. Например:

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

Настройка

Данный плагин добавляет следующие ключи для настройки:

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

Пресеты

Список пресетов для миграции с других плагинов

Предопределенные группы

• @use - scss use statements
• @mixin - scss @mixin statements
• --variable - css custom properties:
• $variable - scss variables
• decl - любые css свойства: color: ..., backgroud: ..., и т.д.
• @include - scss @include statements
• rule - css селекторы: .class {...}, tag{...}, #id{...}, etc.
• @if - scss @if with optionally @else/@else if statements
• @media - css @media statements
• @supports - css @supports statements

Пользовательские группы

Настройка grundyScssSorterGroups позволяет добавить пользовательские группы по дополнительным критериям.

Например, добавление группы @font - в эту группу помещаются все свойства начинающиеся с font: font, font-size, и т.д.

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

Затем можно использовать данную группу в grundyScssSorterGroupsOrder:

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

Пользовательские критерии для групп

Для определения пользовательских групп доступны следующие критерии

• startsWith - название начинается с указанного параметра

• oneOf - название является одним из перечисленных в списке

• type - тип узла соответствует одному из перечисленных

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

Примеры

{
    "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;