stylelint-config-pretty-order

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

Features

This config sorts properties based on the following group:

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

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

This config supports newly added CSS properties, such as:

and so on.

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

Add the following setting to your config:

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

MIT