claudiopro / prettier-plugin-css-order

Prettier plugin to sort CSS declarations in a certain order.

CSS Order Prettier Plugin

A Prettier plugin to sort CSS, SCSS or Less declarations based on their property names.
Using css-declaration-sorter under the hood.

Usage

Following the Prettier plugin guidelines, this package depends on Prettier as a peer dependency:
npm install postcss prettier-plugin-css-order --save-dev

To enable the plugin use the Prettier API, CLI or configuration file. For example using the JS configuration:

{
  plugins: ["prettier-plugin-css-order"]
}

Configuration

This plugin adds two configurable keys to Prettier:

• cssDeclarationSorterOrder defaults to concentric-css.
• cssDeclarationSorterKeepOverrides defaults to true, for a new codebase false is recommended.
• cssDeclarationSorterCustomOrder, an array of property names, their order is used to sort with. This overrides the cssDeclarationSorterOrder option!