eslint-plugin-sort-css-properties

ESLint plugin to sort CSS properties in vanilla-extract CSS-in-JS code with a specific order.

Installation

1npm install eslint-plugin-sort-css-properties

Usage

Add sort-css-properties to the plugins section of your ESLint configuration file.

1{
2  "plugins": ["sort-css-properties"],
3  "rules": {
4    "sort-css-properties/sort-css-properties": "error"
5  }
6}

Rules

sort-css-properties

This rule enforces a consistent ordering of CSS properties in vanilla-extract style objects.

Properties are grouped and sorted in the following order:

1. Display & Position properties (e.g., display, position, z-index)
2. Box model properties (e.g., padding, margin, width, height)
3. Visual properties (e.g., color, background, border)

Examples

1// ❌ Incorrect
2const styles = {
3  color: 'red',
4  margin: '10px',
5  display: 'flex',
6  padding: '10px',
7};
8// ✅ Correct
9const styles = {
10  display: 'flex',
11
12  padding: '10px',
13  margin: '10px',
14
15  color: 'red',
16};
17// ✅ Correct (with spread operator)
18const styles = {
19  ...otherStyles,
20
21  display: 'flex',
22
23  padding: '10px',
24  margin: '10px',
25
26  color: 'red',
27};

Options

This rule has no options.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b feature/my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin feature/my-new-feature
5. Submit a pull request

License

MIT License - see the LICENSE file for details.