📶 CSS-Sort

👉 What is this ????

Vscode extension to sort your CSS properties and make them easy to read. For example :

Before :

selector {
   white-space: pre-line;
   display: block;
   resize: none;
   font-family: monospace;
   width: 100%;
   padding: 15px;
   border: 1px solid #38444d;
   font-size: 18px;
   outline: none;
   transition: background-color 0.2s;
   box-sizing: border-box;
   background-color: #253341;
   margin-top: 17px;
   color: #f5f5f5;
}
   

Smaller to Bigger :

selector {
   width: 100%;
   resize: none;
   padding: 15px;
   outline: none;
   display: block;
   color: #f5f5f5;
   font-size: 18px;
   margin-top: 17px;
   white-space: pre-line;
   font-family: monospace;
   box-sizing: border-box;
   border: 1px solid #38444d;
   background-color: #253341;
   transition: background-color 0.2s;
}
      

Smaller to Bigger :

selector {
   transition: background-color 0.2s;
   border: 1px solid #38444d;
   background-color: #253341;
   font-family: monospace;
   box-sizing: border-box;
   white-space: pre-line;
   margin-top: 17px;
   font-size: 18px;
   display: block;
   color: #f5f5f5;
   padding: 15px;
   outline: none;
   resize: none;
   width: 100%;
}
      

🤔 Why ????

I have explained why I created this extension in my blog. Read this.

🔧 How it's work ????

Simple, it will take your CSS properties that you already selected and final step is it will sorting your CSS properties.

This extension has two functionality, single sort and multiple sort. Single sort, you select your CSS properties (just css proerties) and sorting the properties. Multiple sort, you select more than one CSS selector with the CSS properties itself and sorting the properties.

💻 Languages support

Currently, this extension support some languages (you can see at the header menu).

🏃 Live demo

You can try live demo at this link or this link. Or you can download this extension or type in search input at Vscode marketplace with keyword CSS-Sort.

* Use Prettier extension (recomended) for formating your code, and check Editor: Format On Save in Vscode settings.

* If you use Styled-Component library, I recomended you to install vscode-styled-components.