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 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

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