Sort CSS Declarations

This extension is used to sort CSS declarations according to the property names (order is defined below and it is not alphabetical but logical).

How to use:

How to sort selected CSS declarations

Select lines with CSS declarations (one declaration per each line)
Press Ctrl + Shift + P
Enter Sort CSS Declarations: Sort Selected CSS declarations
Press Enter

CSS declarations under selection should be sorted according to the order below.

How to configure custom sorting order

Open settings and enter the order of CSS properties that you want to have:

{
    "sort-css-declarations.order": [
        [
            "z-index",
            "visibility"
        ],
    ]
}

This configuration means that you want "z-index" to appear earlier than "visibility".

Note: Sorting algorithm is case-sensitive.

Note: Your rule will only be applied if during sorting these two properties are compared by comparator.

How to sort all CSS declarations in the file:

Press Ctrl + Shift + P
Enter Sort CSS Declarations: Sort All CSS declarations in the File
Press Enter

Hotkeys

I'd recommend assigning hotkeys to the commands above. For example, I use Alt + A(Option + A) for sorting all declarations.

Property names order

< all custom properties >
display
opacity
visibility
z-index
orientation
max-zoom
min-zoom
user-zoom
zoom
position
top
right
bottom
left
flex
flex-grow
flex-shrink
flex-basis
flex-flow
flex-direction
flex-wrap
justify-content
align-items
align-content
align-self
order
float
clear
box-sizing
width
min-width
max-width
height
min-height
max-height
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
border
border-width
border-style
border-color
border-top
border-top-width
border-top-style
border-top-color
border-right
border-right-width
border-right-style
border-right-color
border-bottom
border-bottom-width
border-bottom-style
border-bottom-color
border-left
border-left-width
border-left-style
border-left-color
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-image
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image
border-top-left-image
border-top-right-image
border-bottom-right-image
border-bottom-left-image
outline
outline-width
outline-style
outline-color
outline-offset
clip
overflow
overflow-x
overflow-y
list-style
list-style-position
list-style-type
list-style-image
table-layout
border-spacing
border-collapse
caption-side
empty-cells
columns
column-width
column-count
column-fill
column-gap
column-rule
column-rule-width
column-rule-style
column-rule-color
column-span
direction
color
font
font-style
font-variant
font-weight
font-size
line-height
font-family
font-size-adjust
font-stretch
text-align
text-align-last
text-decoration
text-emphasis
text-emphasis-position
text-emphasis-style
text-emphasis-color
text-indent
text-justify
text-outline
text-overflow
text-overflow-ellipsis
text-overflow-mode
text-size-adjust
text-transform
text-wrap
text-shadow
vertical-align
writing-mode
hyphens
letter-spacing
tab-size
white-space
word-break
word-spacing
word-wrap
cursor
user-select
nav-index
nav-up
nav-right
nav-down
nav-left
pointer-events
resize
content
counter-increment
counter-reset
quotes
background
background-color
background-image
background-repeat
background-attachment
background-position
background-clip
background-origin
background-size
box-shadow
transition
transition-property
transition-duration
transition-timing-function
transition-delay
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
filter
transform
transform-origin
will-change

sort-css-declarations

Andrew Beletskiy