How to sort CSS properties with Prettier in Sublime Text

I’ve been searching for a replacement for CSScomb because it is no longer actively being maintained. It turns out Prettier can also accomplish the same work by combining it with PostCSS.

We’ll be using Prettier as the code formatter. I’m going to assume that you’re not familiar with configuring Sublime Text packages, and I will provide all the details you need to get this setup working.¹

1. Getting Started
   1. Node.js
   2. Required Node Packages
   3. JsPrettier Sublime Package
2. Sublime Text Settings
   1. JsPrettier Settings
   2. Additional Prettier CLI Arguments

Getting Started

Sublime Text is just a text editor. Unlike Visual Studio Code which is built with Electron, it doesn’t support Node.js by default. Therefore, most installed packages will not work out of the box. Sometimes you have to install the dependencies on your local machine before you can run them.

Node.js

The best way to install Node.js is using Node version manager so you can update and switch between versions easily. I’ve written a comprehensive guide to set up your development environment for macOS if you wish to learn more about it.

Required Node Packages

You need these three packages to format and sort the CSS in the file.

• prettier
• postcss
• prettier-plugin-css-order

You want to install them globally on your machine because it’s not dependent on any projects.² Run the following commands to install them all at once.

npm install --global prettier postcss prettier-plugin-css-order

To confirm that they are installed correctly, you can run this command to list the installed global packages.

npm list -g --depth 0

JsPrettier Sublime Package

Install JsPrettier Sublime Package. They provide several methods to install the package, but I recommend using Package Control to manage your Sublime Text packages. It’s a package manager that makes it easy to install, remove, and update your installed Sublime packages.

Sublime Text Settings

JsPrettier Settings

JsPrettier doesn’t work out of the box after you’ve installed it. You still have to configure the prettier_cli_path and node_path to tell Sublime Text to run the command to process your CSS files.

You can access the package setting by pressing Command-Shift-P to call the Command Palette then type jsprettier settings - side-by-side to open the default and user settings side by side.

To customize JsPrettier package, you need to override the default settings by passing the value into the associated key. For example, here is how you want to set up the paths if you have installed Node.js with N as the version manager:

{
  "prettier_cli_path": "~/.n/bin/prettier",
  "node_path": "~/.n/bin/node",
}

Where can I find the package paths? If you’re uncertain about the path of prettier and node, you can type which prettier node in Terminal to print their paths.

Additional Prettier CLI Arguments

You should be able to use JsPrettier package in Sublime Text now, but it still doesn’t sort the CSS properties. The main feature of prettier-plugin-css-order is to add two configurable keys to Prettier:

• order defaults to concentric-css.
• keepOverrides defaults to true, for a new codebase false is recommended.

We want to tell Prettier to always sort the CSS by passing order as the additional argument. It’s based on css-declaration-sorter. You can set the order to either alphabetical, smacss, or concentric-css

Here is what the user settings look like after passing the --order value.

{
  "prettier_cli_path": "~/.n/bin/prettier",
  "node_path": "~/.n/bin/node",
  "additional_cli_args": { "--order": "smacss" }
}

Save the JsPrettier user settings and run Prettier to confirm it’s working. There is an option to format code on save by setting auto_format_on_save to true, but I prefer to sort the CSS manually by searching for JSPrettier: Format Code with the command palette.

If you have any questions about this guide, you can send me a DM on Twitter.