How to sort CSS and SCSS properties with Prettier

1. Install the formatter

Run the command in your project directory. If Prettier is already installed, keep the version compatible with your project. The examples below were checked with Prettier 3.9.6 and plugin 0.2.2.

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

2. Enable the plugin

Create .prettierrc.json in the project root, or merge these options into your existing Prettier configuration. Use one configuration file. The explicit group order places ordinary declarations in the decl group, where they are sorted alphabetically; it also makes the intended order of SCSS statements visible.

{
  "plugins": [
    "prettier-grundy-scss-order"
  ],
  "grundyScssSorterGroupsOrder": [
    "@use",
    "@extend",
    "--variable",
    "$variable",
    "@if",
    "decl",
    "@include",
    "@mixin",
    "rule"
  ]
}

3. Format one file first

Save the input below as styles/card.scss. Start with a single file so the diff is easy to review. The first command writes the formatted file; the second checks it without changing it. For a CSS file, use its .css path instead and keep --parser scss: this plugin sorts through the SCSS parser.

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

4. Compare the result

The formatter moves display, gap and padding into alphabetical order. The selector and values stay the same in this example. You do not need to compile Sass to format a .scss file.

Before: styles/card.scss

.card {
  color: #222;
  padding: 16px;
  display: grid;
  gap: 12px;
}

After formatting

.card {
  color: #222;
  display: grid;
  gap: 12px;
  padding: 16px;
}

5. Check the page before applying it everywhere

Changing declaration order can affect the cascade: shorthand and longhand properties, repeated declarations and SCSS includes deserve special attention. For example, margin and margin-top can override each other depending on their order. Review the diff, run your stylesheet build and compare the affected pages before formatting the whole project.

npx prettier "src/**/*.{css,scss}" --parser scss --check

If sorting does not happen

Check that you are running the project’s local Prettier, that plugins contains the package name, and that the file is not excluded by .prettierignore. If the CLI works but your editor does not, check which formatter and configuration the editor uses. Keep the explicit grundyScssSorterGroupsOrder array from this example if your CLI reports an invalid value for that option.