stylelint-config-pretty-order

StyleLint config that prettifies CSS property order with stylelint-order.

Features

Grouping

This config sorts properties based on the following group:

1. Position - e.g., top, right, inset, z-index, float
2. Layout - e.g., display, width, height, margin, padding, border, grid, flex,
3. Render - e.g., content-visibility, contain
4. Overflow & Scroll - e.g., overflow, scroll-behavior
5. Typography - e.g., font, text-align, white-space
6. Appearance - e.g., opacity, color, background, outline, filter
7. Transform & Animation - e.g., translate, animation, transition
8. Misc - e.g., cursor, content

To check the complete property order, see test.css.

Supports new properties

This config supports newly added CSS properties, such as:

• Logical properties
• Individual transform properties
• Container queries
• Scroll driven animation
• Initial letter

and so on.

Installation

Install stylelint and this package according to the package manager:

npm i -D stylelint stylelint-config-pretty-order

yarn add --dev stylelint stylelint-config-pretty-order

pnpm add -D stylelint stylelint-config-pretty-order

bun add -D stylelint stylelint-config-pretty-order

Usage

Add the following setting to your config:

{
  "extends": "stylelint-config-pretty-order"
}

Development

• Clone this repository
• Install dependencies using bun install

License

MIT