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!

css-property-sorter's Issues

[feature-request] Make it available in Vue SFCs

Save comments before properties

If a comment is on top of a CSS property, it must remain so even if this property is moved afterwards

[Feature Request] Hide button when not editing css file

Just to avoid having a larger status bar when not needed :)

[Bug] Media queries and intendation break

Indentation and nesting for rules inside media queries are messed up when sorting properties.

Before	After

Actually, indentation higher than 1 levels breaks anywhere, for that matter.

Don't sort @keyframes properties

Sort.ts don't have to sort @Keyframes properties, like on this example :

Before :

section
{
        min-height: 100vh;
	justify-content: center;
	align-items: center;
	display: flex;
	background: #1c1c25;
}

@keyframes identifier
{
	0%
	{
		transform: translateX(-100%);
	}
	100%
	{
		transform: translateX(0);
	}
}

After

section
{
	display: flex;
	justify-content: center;
	align-items: center;
        min-height: 100vh;
	background: #1c1c25;
}

@keyframes identifier
{
	0%
	{
		transform: translateX(-100%);
	}
	100%
	{
		transform: translateX(0);
	}
}

The keyframes part must remain as it is after sort.

[Feature Request] Support for CSS-in-JS like styled components

I'd like to see this workflow if possible

1. Highlight/select css-in-js object properties such as those used in Emotion and Styled Components.
2. Type ctrl+p and select format selection with CSS Property Sorter.

Screenshot example of selected properties from CSS-in-JS object:

Less support?

i would love to use this with less

Idea to add

Sometimes, we miss to put the semicolon, it can be great if the extension patch the error when we sort the css, cause there's no error if there's no semicolon at the line before the closing bracket. I hade to repair that for 5 lines, so not a big problem, but will be a good feature. Great work 👏🏻👏🏻

Not working on my machine

It's not working on my vs code setup, either run it with command command palette, or via status bar, i'm still trying to figure out why but here some error if it's help.