A Prettier plugin to sort MUI sx prop properties alphabetically
npm install prettier-plugin-sort-mui-sx-props



A Prettier plugin that automatically sorts Material-UI (MUI) sx prop properties alphabetically.
Keeping sx prop properties consistently ordered across your codebase provides several benefits:
- Easier Code Reviews - Reviewers can quickly scan properties in a predictable order
- Reduced Merge Conflicts - Consistent ordering minimizes conflicts when multiple developers modify the same component
- Improved Readability - Alphabetical sorting makes it easier to find specific properties at a glance
- Catch Duplicates - Duplicate properties become obvious when they appear next to each other
- Consistency - Automated formatting eliminates debates about property order in style guides
This plugin automatically organizes the properties inside MUI's sx prop in alphabetical order when you format your code with Prettier. It also recursively sorts nested objects like pseudo-selectors and orders breakpoint properties (xs, sm, md, lg, xl) correctly.
Before:
``tsx`
display: "flex",
padding: 2,
backgroundColor: "primary.main",
marginTop: { md: 2, xs: 1 },
}}
>
Content
After:
`tsx`
backgroundColor: "primary.main",
display: "flex",
marginTop: { xs: 1, md: 2 },
padding: 2,
}}
>
Content
`bash`
npm install prettier-plugin-sort-mui-sx-props --save-dev
Add the plugin to your .prettierrc:
`json`
{
"plugins": ["prettier-plugin-sort-mui-sx-props"]
}
The plugin works automatically when you run Prettier:
`bashFormat a specific file
npx prettier --write src/MyComponent.tsx
How it works
The plugin:
1. Parses your JavaScript/TypeScript/JSX files using Babel's parser
2. Identifies JSX attributes named
sx
3. Sorts the object properties alphabetically by their key names (including nested objects)
4. Preserves breakpoint property order and dynamic elements (functions, spread operators)
5. Preserves all other formatting according to your Prettier configurationFeatures
- ✅ Sorts top-level
sx prop properties alphabetically
- ✅ Recursively sorts nested objects (e.g., &:hover, &.active, media queries)
- ✅ Preserves breakpoint property order (xs, sm, md, lg, xl)
- ✅ Preserves dynamic elements (functions, spread operators, computed properties)
- ✅ Full TypeScript support with type definitions
- ✅ Works with JavaScript, JSX, TypeScript, and TSX filesExamples
$3
Before:
`tsx
sx={{
padding: 2,
color: "primary.main",
"&:hover": {
backgroundColor: "primary.light",
transform: "scale(1.05)",
color: "primary.dark",
},
fontSize: "1rem",
}}
>
Click me
`After:
`tsx
sx={{
"&:hover": {
backgroundColor: "primary.light",
color: "primary.dark",
transform: "scale(1.05)",
},
color: "primary.main",
fontSize: "1rem",
padding: 2,
}}
>
Click me
`$3
Before:
`tsx
sx={{
display: "flex",
padding: { xl: 4, xs: 1, md: 3, sm: 2, lg: 3.5 },
margin: { md: 2, xs: 1 },
}}
/>
`After:
`tsx
sx={{
display: "flex",
margin: { xs: 1, md: 2 },
padding: { xs: 1, sm: 2, md: 3, lg: 3.5, xl: 4 },
}}
/>
`$3
Before:
`tsx
sx={{
fontSize: 12,
...baseStyles,
fontFamily: "Roboto, sans-serif",
backgroundColor: "background.paper",
...(!isActive && { border: "4px solid" }),
padding: 2,
color: "text.primary",
...(isActive && { border: "2px solid" }),
}}
/>
`After:
`tsx
sx={{
fontSize: 12,
...baseStyles,
backgroundColor: "background.paper",
fontFamily: "Roboto, sans-serif",
...(!isActive && { border: "4px solid" }),
color: "text.primary",
padding: 2,
...(isActive && { border: "2px solid" }),
}}
/>
`Note: When multiple spread operators are present, the plugin segments the
sx object by spread operators and sorts properties within each segment independently. This prevents property ordering issues that could arise from CSS cascade conflicts and ensures that properties maintain their intended override behavior relative to the spread operators.Supported file types
- JavaScript (
.js)
- JSX (.jsx)
- TypeScript (.ts)
- TSX (.tsx)Development
$3
`bash
npm install
npm run build
`$3
`bash
npm run build
`$3
`bash
npm test
`$3
`bash
npm run lint
npm run lint:fix
`$3
`
prettier-plugin-sort-mui-sx-props/
├── .husky/ # Git hooks
├── src/
│ ├── index.ts # Main plugin entry point
│ ├── ast/
│ │ └── traverser.ts # AST traversal and sx prop detection
│ ├── parser/
│ │ └── wrapper.ts # Babel parser wrapper
│ └── utils/
│ ├── object-sorter.ts # Core sorting logic for sx objects
│ ├── property-key.ts # Property key extraction utilities
│ └── property-sorter.ts # Property comparison and ordering
├── tests/
│ ├── sorting.test.ts # Comprehensive test suite
│ └── utils.ts # Test helper utilities
├── dist/ # Compiled output (generated)
├── eslint.config.js # ESLint configuration
├── tsconfig.json # TypeScript configuration
├── vitest.config.ts # Test configuration
└── package.json # Project metadata
``MIT