View Code? Open in Web Editor
NEW
VSCode extension that allows to sort css properties in a logical and consistent order
Home Page: https://marketplace.visualstudio.com/items?itemName=EnzoMourany.css-property-sorter
License: MIT License
css-property-sorter's Introduction
I'm a freelance web and mobile developer based in France, on Périgueux
css-property-sorter's People
Contributors
css-property-sorter's Issues
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.
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 👏🏻👏🏻
Just to avoid having a larger status bar when not needed :)
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.
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.
If a comment is on top of a CSS property, it must remain so even if this property is moved afterwards
I'd like to see this workflow if possible
Highlight/select css-in-js object properties such as those used in Emotion and Styled Components.
Type ctrl
+p
and select format selection with CSS Property Sorter.
Screenshot example of selected properties from CSS-in-JS object:
i would love to use this with less