# stylelint-config-clean-order

> Order your styles with stylelint-order.

Latest version **10.0.0** (published 2026-05-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install stylelint-config-clean-order
pnpm add stylelint-config-clean-order
yarn add stylelint-config-clean-order
bun add stylelint-config-clean-order
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 10.0.0 |
| Published | 2026-05-28 |
| First published | 2022-06-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 26.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 190 |
| Author | Kutsan Kaplan <me@kutsan.dev> (https://kutsan.dev) |
| Maintainers | kutsan |
| Keywords | stylelint, stylelint-config, stylelint-order, property order, css order |

## Links

- npm: https://www.npmjs.com/package/stylelint-config-clean-order
- Repository: https://github.com/kutsan/stylelint-config-clean-order
- npm.io page: https://npm.io/package/stylelint-config-clean-order

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@pandacss/eslint-plugin](https://npm.io/package/@pandacss/eslint-plugin.md) — 18.7K weekly downloads

## Recent versions

- 10.0.0 (latest) — 2026-05-28
- 9.0.0 — 2026-05-27
- 8.0.2 — 2026-05-19
- 8.0.1 — 2026-02-10
- 8.0.0 — 2025-11-23
- 7.2.2 — 2025-11-23
- 7.2.1 — 2025-11-23
- 7.2.0 — 2025-11-23
- 7.1.0 — 2025-11-22
- 7.0.0 — 2025-01-07
- 6.1.0 — 2024-07-03
- 6.0.0 — 2024-06-03
- 5.4.2 — 2024-04-02
- 5.4.1 — 2024-01-28
- 5.4.0 — 2024-01-11
- … 26 more at https://npm.io/package/stylelint-config-clean-order/versions

## README

# stylelint-config-clean-order

[![npm](https://img.shields.io/npm/v/stylelint-config-clean-order)](https://www.npmjs.com/package/stylelint-config-clean-order)
[![ci](https://github.com/kutsan/stylelint-config-clean-order/actions/workflows/ci.yaml/badge.svg)](https://github.com/kutsan/stylelint-config-clean-order/actions/workflows/ci.yaml)

Sort CSS properties into logical groups with [stylelint-order](https://github.com/hudochenkov/stylelint-order).

```css
.card {
  /* Interaction */
  cursor: pointer;

  /* Positioning */
  position: relative;
  z-index: 1;

  /* Layout */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);

  /* Box Model */
  width: 100%;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);

  /* Typography */
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);

  /* Appearance */
  opacity: 1;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-md);

  /* Transition */
  transition: transform var(--duration-fast);
}
```

## Usage

Install [`stylelint`](https://github.com/stylelint/stylelint), this config package and its `stylelint-order` peer dependency to your project:

```sh
npm add --save-dev stylelint stylelint-order stylelint-config-clean-order
```

Configure your `stylelint` configuration file (`stylelint.config.js`) to extend this package:

```js
/** @type {import('stylelint').Config} */
export default {
  extends: ['stylelint-config-clean-order'],
}
```

Run `stylelint --fix` to automatically sort properties.

## Severity Options

Default severity level is `warning` but you can use error variant to change severity level to `error`.

```js
/** @type {import('stylelint').Config} */
export default {
  extends: ['stylelint-config-clean-order/error'],
}
```

## Property Order

Properties are organized into logical groups:

1. **Interaction**: `cursor`, `pointer-events`, `user-select`, etc.
2. **Positioning**: `position`, `z-index`, `top`, `right`, `bottom`, `left`, `transform`, etc.
3. **Layout**: `display`, `flex`, `grid`, `gap`, `align-items`, `justify-content`, etc.
4. **Box Model**: `width`, `height`, `margin`, `padding`, `border`, etc.
5. **Typography**: `font-size`, `line-height`, `color`, `text-align`, etc.
6. **Appearance**: `background`, `opacity`, `box-shadow`, `filter`, etc.
7. **Transition**: `transition`, `animation`, etc.

Within each group, properties are ordered logically (e.g., `font-size` before `line-height`, `display` before `align-items`). If you think a property order doesn't make sense, please open an issue.

## Customization

You can import raw property groups to add or override rule options. Please refer to [stylelint-order](https://github.com/hudochenkov/stylelint-order) plugin documentation.

For example, you can override `'properties-order'` rule to not have empty lines between groups:

```javascript
import { propertyGroups } from 'stylelint-config-clean-order'

const propertiesOrder = propertyGroups.map((properties) => ({
  noEmptyLineBetween: true,
  emptyLineBefore: 'never', // Don't add empty lines between order groups.
  properties,
}))

/** @type {import('stylelint').Config} */
export default {
  extends: ['stylelint-config-clean-order'],
  rules: {
    'order/properties-order': [
      propertiesOrder,
      {
        severity: 'warning',
        unspecified: 'bottomAlphabetical',
      },
    ],
  },
}
```

## Extra Empty Lines for Formatting

In addition to `stylelint-order` plugin, this package also overrides two rules (`declaration-empty-line-before` and `at-rule-empty-line-before`) to improve the final formatted result by adding extra empty lines between declarations. `stylelint-config-clean-order` does not override a rule other than these two.

If you want these rules to put into effect, make sure config packages after `stylelint-config-clean-order` do not override them.

## License

MIT

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