Prettier Plugin Style Order

0.2.2 verified Sat Apr 25 auth: no javascript

A Prettier plugin that sorts CSS property declarations and groups related properties together. Version 0.2.2, released as a stable package. It follows a rational order (positioning, box model, typography, visual, animation, misc) similar to stylelint-config-rational-order. Unlike other CSS sorting tools, it integrates seamlessly with Prettier without requiring additional configuration. The plugin works with Prettier >= 1.13 and supports CSS, SCSS, and Less files. It is lightweight, has no runtime dependencies, and relies on postcss-sorting under the hood.

Common errors

error Cannot find module 'prettier-plugin-style-order' ↓

cause Plugin not installed or Prettier not using correct node_modules path.

fix

Run 'npm install -D prettier-plugin-style-order' in the project root.

error Require stack: ...\prettier\index.js [...] \prettier-plugin-style-order\src\index.js ↓

cause Plugin source is not built; installed from GitHub raw source.

fix

Install from npm registry (prettier-plugin-style-order@0.2.2) instead of GitHub.

error Without configuration, plugin is loaded but sorting order may be incorrect for custom groups. ↓

cause Plugin uses a default order; custom order not supported.

fix

Accept default ordering or switch to a more configurable tool like stylelint-order.

Warnings

gotcha Plugin may not work with Prettier versions < 1.13. ↓

fix Upgrade Prettier to >= 1.13.

gotcha Plugin only sorts properties within rules; it does not sort entire stylesheets or across multiple rules. ↓

fix Ensure each CSS rule is sorted independently; no cross-rule sorting.

gotcha Plugin may conflict with other Prettier plugins that modify CSS, leading to unexpected ordering. ↓

fix Use only one CSS-related Prettier plugin at a time, or configure load order carefully.

Install

npm install prettier-plugin-style-order

yarn add prettier-plugin-style-order

pnpm add prettier-plugin-style-order

Imports

default

wrong

import prettierPluginStyleOrder from 'prettier-plugin-style-order'

correct

const prettierPluginStyleOrder = require('prettier-plugin-style-order')

This plugin is typically not imported directly; Prettier auto-loads it. However, if manually loading, use CommonJS require.

prettier

wrong

import prettier from 'prettier'

correct

import { format } from 'prettier'; const result = await format(code, { parser: 'css', plugins: ['prettier-plugin-style-order'] })

Use named export 'format' for programmatic usage. Plugin is passed as string or object in plugins array.

prettier-plugin-style-order
wrong
```
npm install -g prettier-plugin-style-order
```
correct
```
npm install -D prettier-plugin-style-order (then Prettier auto-loads)
```
Plugin is auto-discovered by Prettier when installed locally. No explicit import needed.

Quickstart

Installs the plugin and runs Prettier to sort CSS properties in a file.

// Install: npm install -D prettier prettier-plugin-style-order

// Create a CSS file (example.css):
// .example {
//   color: red;
//   display: flex;
//   position: absolute;
//   top: 0;
//   background: blue;
// }

// Run: npx prettier --write example.css

// Now example.css is sorted:
// .example {
//   position: absolute;
//   top: 0;
//   display: flex;
//   color: red;
//   background: blue;
// }