How to define a custom CSS property order

1. Define the groups

The layout group selects the declarations listed in oneOf. With order: exact, the list also sets their internal order: position, display, width, padding, gap. The typography group selects declaration names beginning with font and sorts them alphabetically. The type: decl criterion keeps these rules limited to CSS declarations.

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

2. Put the groups in the configuration

Merge this into your existing .prettierrc.json after installing Prettier and the plugin. In plugin 0.2.2, grundyScssSorterGroups accepts a JSON string, not a nested object. That is why the inner quotes are escaped below. The examples were checked with 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. Keep specific groups before decl

The formatter uses the first matching group in grundyScssSorterGroupsOrder. display matches both layout and the general decl group. Putting layout first gives it priority. Declarations not selected by either custom group, such as color, reach decl and keep its alphabetical sorting. Leave the SCSS groups in the list so variables, includes and nested rules have an explicit place.

4. Run and compare

Save the input below as styles/card.scss and run these commands. Keep --parser scss when formatting a .css file too: this plugin sorts through that parser. The resulting layout order deliberately differs from alphabetical order, while font-size comes before font-weight.

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

Before: styles/card.scss

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

After formatting

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

5. Extend the convention carefully

Add a property to layout.oneOf to choose its position in the exact order, or define another group and place it before decl. oneOf alone selects properties; it does not set their internal order without order: exact. startsWith: font does not include line-height or color. If those belong in your typography group, use an explicit oneOf list instead. Avoid overlapping custom groups unless their priority is intentional.

6. Verify behavior before adopting it

Review the diff and the affected page. Shorthand and longhand properties, repeated declarations and SCSS includes can depend on source order. A successful --check confirms formatting, not visual equivalence. If the CLI rejects grundyScssSorterGroups, check that its value is a valid JSON string; if a group is ignored, check its name in grundyScssSorterGroupsOrder.