Prettier plugin not sorting CSS: troubleshooting guide

1. CSS formats but properties stay in place

In plugin 0.2.2, sorting is attached to the SCSS parser. A .css file uses Prettier’s CSS parser by default, so ordinary formatting works while sorting does not. Reproduced: padding, display, color kept that order with the CSS parser and became color, display, padding with SCSS. Keep the .css extension and select the parser explicitly.

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

2. SCSS does not sort either

Installing the package does not enable it in the configuration. Without plugins, Prettier formats the example but leaves property order intact. Add the package to the plugins array in the configuration actually used by this file. First locate that configuration and confirm that both packages are installed in this project. Run from the project directory; if they are missing, install them before using npx.

npx prettier --find-config-path styles/card.scss
npm ls prettier prettier-grundy-scss-order

3. Run an explicit diagnostic command

With both packages installed, this command loads the plugin explicitly and uses .prettierrc.json from the setup guide. Create that configuration first, including the explicit group order. Try it on the small sample, then transfer the options to your project configuration using the setup guide. If this sorts correctly but your usual command does not, compare their configuration, parser and working directory.

npx prettier styles/card.scss --config .prettierrc.json --parser scss --plugin prettier-grundy-scss-order --write

4. The file is excluded

The file-info command reports whether Prettier considers the file ignored. In the reproduced case, adding styles/card.scss to .prettierignore made ignored true and --write left its contents unchanged. Inspect the matching ignore rule and change it only if this file should be formatted. Generated files are often excluded deliberately. A successful --check alone does not prove that an ignored file was processed.

npx prettier --file-info styles/card.scss
npx prettier styles/card.scss --parser scss --check

5. Invalid grundyScssSorterGroups value

Passing a nested object produces an error saying a string was expected. Passing a string that is not valid JSON fails during JSON parsing. For .prettierrc.json, encode the group definitions as a JSON string, including escaped inner quotes, as below. Keep typography before decl so the custom group wins over the general declaration group.

{
  "plugins": [
    "prettier-grundy-scss-order"
  ],
  "grundyScssSorterGroups": "{\"typography\":{\"type\":\"decl\",\"startsWith\":\"font\",\"order\":\"alphabetical\"}}",
  "grundyScssSorterGroupsOrder": [
    "@use",
    "@extend",
    "--variable",
    "$variable",
    "@if",
    "typography",
    "decl",
    "@include",
    "@mixin",
    "rule"
  ]
}

6. CLI works, editor does not

Use the working CLI invocation as the reference. Check the editor’s selected formatter, whether it uses the project’s local Prettier, and which configuration it loads. These checks depend on the editor; they are not another reproduced plugin bug. For .css files, use an explicit SCSS parser override if you want this plugin’s sorting. After fixing the setup, review the diff and the rendered page: formatting success does not guarantee that changing declaration order preserves the cascade.