enzo-mourany/css-property-sorter

VSCode extension that allows to sort css properties in a logical and consistent order

CSS Property Sorter

About The Extension

This extension allows you to sort the CSS properties of each selector in a CSS or SCSS file. It makes the code more readable and facilitates maintenance.

There is an ordering standard for css properties that is not well respected. This extension allows you to automatically order all these properties.

Built With

• 
• 

Compatibility

• 
• 

Installation

1. Open the extensions panel in VSCode
2. Search for CSS Property Sorter
3. Click Install

Usage

1. Open a CSS or SCSS file
2. Click on the CSS Sort button in the status bar

or tap Ctrl+Shift+P and type CSS Sort

1. Click on run in the notification that appears

4. The properties are now sorted !

Configuration

The extension uses the following sorting standard :

• flexbox properties
• grid properties
• positionning properties
• visibility properties
• cliping properties
• box properties
• animation properties
• background properties
• border properties
• typography properties

Roadmap

Done

• Sort the properties of the selectors in the order in which they appear in the file
• Support for SCSS files
• Save indentation of the properties
• Support at-rules (media queries, keyframes, etc.)
• Support @include and @media query
• Display cssSortButton only if the file is a css or scss file

Planned

• Add a configuration panel to allow the user to choose the order of the properties (JSON file)
• Sort selectors in the order (CSS file)
• Save comments before properties
• Support LESS files
• Support SASS files
• Better shortcut for the command
• Alert the user if he writes a property incorrectly or if he puts information (or mesure unity) that does not match inside the property
• Remove malformed CSS comments that interfere with the rest of the code

See the open issues for a full list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Install the dependencies npm i or pnpm i
3. Create your Feature Branch (git checkout -b feature/AmazingFeature)
4. Commit your Changes (git commit -m 'Add some AmazingFeature')
5. Push to the Branch (git push origin feature/AmazingFeature)
6. Open a Pull Request

License

MIT License

Contact

Enzo Mourany

Project Link

Show your support

Give a ⭐️ if this project helped you!