Automatic CSS sorting in VS Code

Background

Recently I started working with Salesforce and one of my tasks was to make some styling adjustments on an Experience Cloud site. Using the CSS overrides, I started out writing my usual CSS rules. But I kept getting warnings to keep the CSS properties in alphabetical order. I tried doing it by hand but soon became exhausting to sort.

PostCSS Sorting extension

I looked up for some extensions for VS Code and found PostCSS Sorting by mrmlnc.
VS Code identifier: mrmlnc.vscode-postcss-sorting

After installing, I set up the config to sort all the properties alphabetically.

1. Press F1
2. Type Open settings JSON
3. Select Preferences: Open Settings (JSON) to open up your settings.json file
4. Add the following to the existing object and save

"postcssSorting.config": {
  "properties-order": "alphabetical",
}

Open up an existing CSS file or create a CSS file and add some rules and properties. Press F1 and type postcss and select PostCSS Sorting: Run. And you should now have all the properties within your CSS rules sorted in alphabetical order!

Sort on save

I was still not quite satisfied. I could set the sorting to a custom keybinding as explained in the extension documentation but that would still require another step. Automatic sorting on save would be a lifesaver! This feature is still not supported by the extension but I found a workaround in one of its Github issues.

I used the VS Code multi-command extension to bind my save action to sort all CSS files automatically.
VS Code identifier: ryuta46.multi-command

Time to set up the key binding.

1. Press F1
2. Type Open Keyboard Shortcuts
3. Select Preferences: Open Keyboard Shortcuts (JSON) to open up your keybindings.json file
4. Add the following object to the existing array and save

{
  "key": "ctrl+s",
  "command": "extension.multiCommand.execute",
  "args": {
    "sequence": ["postcssSorting.execute", "workbench.action.files.save"]
  },
  "when": "editorLangId == css"
}

This basically says when I save any CSS file using Ctrl + S, the multi-command extension will run the PostCSS sorting and then save the file.

But, why?

Because Salesforce recommends having all properties listed alphabetically by convention.
And, because I don’t like warnings! 😛

I came across this interesting article on why it’s better to have CSS properties sorted alphabetically.