Как задать собственный порядок CSS-свойств

1. Определите группы

Группа layout выбирает объявления из списка oneOf. При order: exact этот список задает и порядок внутри группы: position, display, width, padding, gap. Группа typography выбирает имена объявлений, начинающиеся с font, и сортирует их по алфавиту. Условие type: decl ограничивает обе группы объявлениями CSS.

{
  "layout": {
    "type": "decl",
    "oneOf": [
      "position",
      "display",
      "width",
      "padding",
      "gap"
    ],
    "order": "exact"
  },
  "typography": {
    "type": "decl",
    "startsWith": "font",
    "order": "alphabetical"
  }
}

2. Запишите группы в конфигурацию

Добавьте параметры в существующий .prettierrc.json после установки Prettier и плагина. В плагине 0.2.2 grundyScssSorterGroups принимает строку с JSON, а не вложенный объект. Поэтому внутренние кавычки в примере экранированы. Примеры проверены с Prettier 3.9.6.

{
  "plugins": [
    "prettier-grundy-scss-order"
  ],
  "grundyScssSorterGroups": "{\"layout\":{\"type\":\"decl\",\"oneOf\":[\"position\",\"display\",\"width\",\"padding\",\"gap\"],\"order\":\"exact\"},\"typography\":{\"type\":\"decl\",\"startsWith\":\"font\",\"order\":\"alphabetical\"}}",
  "grundyScssSorterGroupsOrder": [
    "@use",
    "@extend",
    "--variable",
    "$variable",
    "@if",
    "layout",
    "typography",
    "decl",
    "@include",
    "@mixin",
    "rule"
  ]
}

3. Поставьте специальные группы перед decl

Форматтер использует первую подходящую группу из grundyScssSorterGroupsOrder. Свойство display подходит и под layout, и под общую группу decl. Если layout стоит раньше, она получает приоритет. Свойства, которые не попали в пользовательские группы, например color, доходят до decl и сортируются по алфавиту. Сохраните группы SCSS в списке, чтобы у переменных, подключений миксинов и вложенных правил было явное место.

4. Запустите и сравните

Сохраните исходный пример ниже в styles/card.scss и выполните команды. Для файла .css тоже оставьте --parser scss: плагин выполняет сортировку через этот парсер. Порядок раскладки в результате намеренно отличается от алфавитного, а font-size располагается перед font-weight.

npx prettier styles/card.scss --parser scss --write
npx prettier styles/card.scss --parser scss --check

До: styles/card.scss

.card {
  color: #222;
  font-weight: 600;
  gap: 12px;
  padding: 16px;
  width: 320px;
  font-size: 16px;
  display: grid;
  position: relative;
}

После форматирования

.card {
  position: relative;
  display: grid;
  width: 320px;
  padding: 16px;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #222;
}

5. Расширяйте соглашение постепенно

Добавьте свойство в layout.oneOf, чтобы выбрать его позицию, или создайте еще одну группу и поставьте ее перед decl. Сам по себе oneOf выбирает свойства, но без order: exact не задает их внутренний порядок. Условие startsWith: font не включает line-height и color. Если они нужны в группе типографики, используйте явный список oneOf. Избегайте пересечения пользовательских групп, если их приоритет не выбран осознанно.

6. Проверьте поведение перед внедрением

Просмотрите diff и затронутую страницу. Сокращенные и отдельные свойства, повторные объявления и подключения SCSS-миксинов могут зависеть от исходного порядка. Успешный --check подтверждает форматирование, а не сохранение внешнего вида. Если CLI отклоняет grundyScssSorterGroups, проверьте, что значение — строка с корректным JSON. Если группа игнорируется, проверьте ее имя в grundyScssSorterGroupsOrder.