eslint-plugin-sort-css-properties

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

Installation

npm install eslint-plugin-sort-css-properties

Usage

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

{
  "plugins": ["sort-css-properties"],
  "rules": {
    "sort-css-properties/sort-css-properties": "error"
  }
}

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

// ❌ Incorrect
const styles = {
  color: 'red',
  margin: '10px',
  display: 'flex',
  padding: '10px',
};
// ✅ Correct
const styles = {
  display: 'flex',

  padding: '10px',
  margin: '10px',

  color: 'red',
};
// ✅ Correct (with spread operator)
const styles = {
  ...otherStyles,

  display: 'flex',

  padding: '10px',
  margin: '10px',

  color: 'red',
};

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.