# postcss-sorting

> PostCSS plugin to keep rules and at-rules content in order.

Latest version **10.0.0** (published 2026-03-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-sorting
pnpm add postcss-sorting
yarn add postcss-sorting
bun add postcss-sorting
```

## Health

**Score 53/100 (C)** — status: stable.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 10.0.0 |
| Published | 2026-03-09 |
| First published | 2015-12-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/postcss-sorting) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 55.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 532 |
| Author | Aleks Hudochenkov |
| Maintainers | hudochenkov |
| Keywords | postcss, css, postcss-plugin, sorting, order |

## Links

- npm: https://www.npmjs.com/package/postcss-sorting
- Repository: https://github.com/hudochenkov/postcss-sorting
- Issues: https://github.com/hudochenkov/postcss-sorting/issues
- npm.io page: https://npm.io/package/postcss-sorting

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 10.0.0 (latest) — 2026-03-09
- 9.1.0 — 2024-10-20
- 9.0.0 — 2024-10-20
- 8.0.2 — 2023-03-07
- 8.0.1 — 2023-01-06
- 8.0.0 — 2023-01-05
- 7.0.1 — 2021-10-16
- 7.0.0 — 2021-10-12
- 6.0.0 — 2020-09-17
- 5.0.1 — 2019-07-11
- 5.0.0 — 2019-04-18
- 4.1.0 — 2019-03-03
- 4.0.1 — 2018-11-11
- 4.0.0 — 2018-07-17
- 3.1.0 — 2017-10-30
- … 21 more at https://npm.io/package/postcss-sorting/versions

## README

# PostCSS Sorting

[![npm version][npm-version-img]][npm] [![npm downloads last month][npm-downloads-img]][npm]

[PostCSS] plugin to keep rules and at-rules content in order.

Lint and autofix stylesheet order with [stylelint-order].

## Features

* Sorts rules and at-rules content.
* Sorts properties.
* Sorts at-rules by different options.
* Groups properties, custom properties, dollar variables, nested rules, nested at-rules.
* Supports CSS, SCSS (using [postcss-scss]), CSS-in-JS (with [postcss-styled-syntax]), HTML (with [postcss-html]), and most likely any other syntax added by other PostCSS plugins.

## Installation

```bash
npm install --save-dev postcss postcss-sorting
```

## Options

The plugin has no default options. Everything is disabled by default.

- [`order`](./lib/order/README.md): Specify the order of content within declaration blocks.
- [`properties-order`](./lib/properties-order/README.md): Specify the order of properties within declaration blocks.
- [`unspecified-properties-position`](./lib/properties-order/unspecified-properties-position.md): Specify position for properties not specified in `properties-order`.
- `throw-validate-errors`: Throw config validation errors instead of showing and ignoring them. Defaults to `false`.

## Caveats

### Handling comments

Comments that are before node and on a separate line linked to that node. Shared-line comments are also linked to that node. Shared-line comments are comments which are located after a node and on the same line as a node.

```css
a {
	top: 5px; /* shared-line comment belongs to `top` */
	/* comment belongs to `bottom` */
	/* comment belongs to `bottom` */
	bottom: 15px; /* shared-line comment belongs to `bottom` */
}
```

### Ignored at-rules

Some at-rules, like [control](https://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives__expressions) and [function](https://sass-lang.com/documentation/file.SASS_REFERENCE.html#function_directives) directives in Sass, are ignored. It means rules won't touch content inside these at-rules, as doing so could change or break functionality.

### CSS-in-JS

To avoid breaking the logic if the rule has a template literal interpolation, properties will be sorted only among neighbouring properties before or after the interpolation:

```js
const Component = styled.div`
	/* 'z-index' and 'top' will be sorted as a single group. 'position' and 'display' will be sorted as a second group. Interpolation separates properties into groups. */
	z-index: 1;
	top: 1px;
	${props => props.great && 'color: red'};
	position: absolute;
	display: block;

	div {
		/* The following properties WILL be sorted together, because interpolation is for property value only */
		z-index: 2;
		position: static;
		top: ${2 + 10}px;
		display: inline-block;
	}
`;
```

## Usage

See [PostCSS] docs for more examples.

### Command Line

Add [postcss-cli](https://github.com/postcss/postcss-cli) and PostCSS Sorting to your project:

```bash
npm install postcss postcss-cli postcss-sorting --save-dev
```

Create a `postcss.config.js` with PostCSS Sorting configuration:

```js
module.exports = {
	plugins: {
		'postcss-sorting': {
			order: [
				'custom-properties',
				'dollar-variables',
				'declarations',
				'at-rules',
				'rules',
			],

			'properties-order': 'alphabetical',

			'unspecified-properties-position': 'bottom',
		},
	},
};
```

Or, add the `'postcss-sorting'` section to your existing `postcss-cli` configuration file.

Next execute:

```bash
npx postcss --no-map --replace your-css-file.css
```

For more information and options, please consult the [postcss-cli docs](https://github.com/postcss/postcss-cli).

### Gulp

Add [gulp-postcss] and PostCSS Sorting to your build tool:

```bash
npm install postcss gulp-postcss postcss-sorting --save-dev
```

Enable PostCSS Sorting within your Gulpfile:

```js
let gulp = require('gulp');
let postcss = require('gulp-postcss');
let sorting = require('postcss-sorting');

exports['sort-css'] = () => {
	return gulp
		.src('./css/src/*.css')
		.pipe(
			postcss([
				sorting({
					/* options */
				}),
			])
		)
		.pipe(gulp.dest('./css/src'));
};
```

### Text editor

This plugin available as [Sublime Text], [Atom], [VS Code], and [Emacs] plugin. Though, seems all these plugins are not maintained.

## Related tools

[stylelint] and [stylelint-order] help lint stylesheets and let you know if stylesheet order is correct. Also, they could autofix stylesheets.

I recommend [Prettier] for formatting stylesheets.

[npm-version-img]: https://img.shields.io/npm/v/postcss-sorting.svg
[npm-downloads-img]: https://img.shields.io/npm/dm/postcss-sorting.svg
[npm]: https://www.npmjs.com/package/postcss-sorting

[PostCSS]: https://github.com/postcss/postcss
[Sublime Text]: https://github.com/hudochenkov/sublime-postcss-sorting
[Atom]: https://github.com/lysyi3m/atom-postcss-sorting
[VS Code]: https://github.com/mrmlnc/vscode-postcss-sorting
[Emacs]: https://github.com/P233/postcss-sorting.el

[gulp-postcss]: https://github.com/postcss/gulp-postcss
[postcss-scss]: https://github.com/postcss/postcss-scss
[postcss-html]: https://github.com/gucong3000/postcss-html
[postcss-styled-syntax]: https://github.com/hudochenkov/postcss-styled-syntax
[Prettier]: https://prettier.io/
[stylelint]: https://stylelint.io/
[stylelint-order]: https://github.com/hudochenkov/stylelint-order

---
_Source: https://npm.io/package/postcss-sorting · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._