Sass lint: Add property-sort-order rule

Add `property-sort-order` Sass lint rule, with the "Specific" sort
order.

See: https://gist.github.com/ncoden/d42f55df7c7970f548a02cd3468f9c86

diff --git a/.sass-lint.yml b/.sass-lint.yml
index b8671c7586377219867a055ec51961903c14296a..4376e0a45963525a8c1dbe1a37fbf0b2671d9182 100644 (file)
--- a/.sass-lint.yml
+++ b/.sass-lint.yml
@@ -131,9 +131,233 @@ rules:
     - convention: '([a-z0-9]+-?)+'
   
   property-sort-order:
-    - 0
-    - ignore-custom-properties: false
-  
+    - 1
+    -
+      order:
+        # Specific - CSS property order
+        # https://gist.github.com/ncoden/d42f55df7c7970f548a02cd3468f9c86
+
+        # Position
+        - 'position'
+        - 'top'
+        - 'right'
+        - 'bottom'
+        - 'left'
+        - 'z-index'
+
+        # Disposition
+        - 'display'
+
+        - 'flex'
+        - 'flex-basis'
+        - 'flex-direction'
+        - 'flex-flow'
+        - 'flex-grow'
+        - 'flex-shrink'
+        - 'flex-wrap'
+        - 'justify-content'
+        - 'order'
+
+        - 'box-align'
+        - 'box-flex'
+        - 'box-orient'
+        - 'box-pack'
+
+        - 'align-content'
+        - 'align-items'
+        - 'align-self'
+
+        - 'columns'
+        - 'column-gap'
+        - 'column-fill'
+        - 'column-rule'
+        - 'column-span'
+        - 'column-count'
+        - 'column-width'
+
+        - 'vertical-align'
+        - 'float'
+        - 'clear'
+
+        # Dimension
+        - 'box-sizing'
+
+        - 'width'
+        - 'min-width'
+        - 'max-width'
+
+        - 'height'
+        - 'min-height'
+        - 'max-height'
+
+        - 'margin'
+        - 'margin-top'
+        - 'margin-right'
+        - 'margin-bottom'
+        - 'margin-left'
+        - 'margin-collapse'
+        - 'margin-top-collapse'
+        - 'margin-right-collapse'
+        - 'margin-bottom-collapse'
+        - 'margin-left-collapse'
+
+        - 'padding'
+        - 'padding-top'
+        - 'padding-right'
+        - 'padding-bottom'
+        - 'padding-left'
+
+
+        # Global appearance
+        - 'appearance'
+        - 'opacity'
+        - 'filter'
+        - 'visibility'
+
+        - 'size'
+        - 'resize'
+        - 'zoom'
+
+        - 'transform'
+        - 'transform-box'
+        - 'transform-origin'
+        - 'transform-style'
+
+        # Border
+        - 'outline'
+        - 'outline-color'
+        - 'outline-offset'
+        - 'outline-style'
+        - 'outline-width'
+
+        - 'border'
+        - 'border-top'
+        - 'border-right'
+        - 'border-bottom'
+        - 'border-left'
+        - 'border-width'
+        - 'border-top-width'
+        - 'border-right-width'
+        - 'border-bottom-width'
+        - 'border-left-width'
+
+        - 'border-style'
+        - 'border-top-style'
+        - 'border-right-style'
+        - 'border-bottom-style'
+        - 'border-left-style'
+
+        - 'border-radius'
+        - 'border-top-left-radius'
+        - 'border-top-right-radius'
+        - 'border-bottom-right-radius'
+        - 'border-bottom-left-radius'
+        - 'border-radius-topleft'
+        - 'border-radius-topright'
+        - 'border-radius-bottomright'
+        - 'border-radius-bottomleft'
+
+        - 'border-color'
+        - 'border-top-color'
+        - 'border-right-color'
+        - 'border-bottom-color'
+        - 'border-left-color'
+
+        - 'border-collapse'
+        - 'border-spacing'
+
+        # Background
+        - 'background'
+        - 'background-attachment'
+        - 'background-clip'
+        - 'background-color'
+        - 'background-image'
+        - 'background-repeat'
+        - 'background-position'
+        - 'background-size'
+
+        # Shadow
+        - 'box-shadow'
+
+        # Animation
+        - 'animation'
+        - 'animation-delay'
+        - 'animation-duration'
+        - 'animation-iteration-count'
+        - 'animation-name'
+        - 'animation-play-state'
+        - 'animation-timing-function'
+        - 'animation-fill-mode'
+
+        - 'transition'
+        - 'transition-delay'
+        - 'transition-duration'
+        - 'transition-property'
+        - 'transition-timing-function'
+
+
+        # Content
+        - 'content'
+
+        - 'list-style'
+        - 'list-style-image'
+        - 'list-style-position'
+        - 'list-style-type'
+
+        - 'overflow'
+        - 'overflow-x'
+        - 'overflow-y'
+        - 'clip'
+
+        # Text
+        - 'font'
+        - 'font-family'
+        - 'font-size'
+        - 'font-smoothing'
+        - 'osx-font-smoothing'
+        - 'font-style'
+        - 'font-variant'
+        - 'font-weight'
+        - 'src'
+
+        - 'word-spacing'
+        - 'letter-spacing'
+        - 'line-height'
+
+        - 'color'
+        - 'direction'
+        - 'text-align'
+        - 'text-decoration'
+        - 'text-indent'
+        - 'text-overflow'
+        - 'text-rendering'
+        - 'text-size-adjust'
+        - 'text-shadow'
+        - 'text-transform'
+
+        - 'white-space'
+        - 'word-break'
+        - 'word-wrap'
+        - 'hyphens'
+        - 'quotes'
+
+        # Divers
+        - 'pointer-events'
+        - 'cursor'
+
+        - 'backface-visibility'
+        - 'caption-side'
+        - 'empty-cells'
+        - 'table-layout'
+        - 'user-select'
+
+        - 'interpolation-mode'
+        - 'marks'
+        - 'page'
+        - 'set-link-source'
+        - 'unicode-bidi'
+        - 'speak'
+
   quotes:
     - 1
     - style: single