Sort MUI sx

What it is

prettier-plugin-sort-mui-sx-props sorts the properties inside Material UI’s sx prop every time Prettier runs. Install it, add one line to .prettierrc, and style objects stay in one predictable order across a codebase. It’s MIT-licensed on npm, with about 3,000 downloads in its first year.

Why I built it

On MUI-heavy React codebases, sx objects grow one property at a time, in whatever order each developer typed them. Reviews slow down, the same component conflicts in every merge, and duplicate keys hide twenty lines apart. A formatter settles it once, so nobody has to argue about it again.

What I built

• AST transform: parses JS, JSX, TS and TSX with Babel, finds JSX attributes named sx and reorders their object keys before Prettier prints.
• Nested sorting: pseudo-selectors such as &:hover, class selectors and media queries are sorted recursively.
• Breakpoint order: breakpoint keys keep their responsive order (xs, sm, md, lg, xl) rather than the alphabet’s.
• Safe with dynamic code: spreads, functions and computed keys stay where they are, so sorting never changes behaviour.
• Shipping: typed with TypeScript, tested with Vitest, CI on GitHub Actions and published to npm with a changelog.