Add updated CSS properties

Added missing CSS properties including box-sizing, grid, counters and page-breaks Updated order to reflect most recent version of concentric ordering at: https://github.com/brandon-rhodes/Concentric-CSS/blob/master/style3.css
sasstools · Sep 22, 2017 · 4c29846 · 4c29846
1 parent deabaf6
commit 4c29846
Showing 1 changed file with 122 additions and 17 deletions.
diff --git a/lib/config/property-sort-orders/concentric.yml b/lib/config/property-sort-orders/concentric.yml
@@ -2,68 +2,108 @@
 # http://rhodesmill.org/brandon/2011/concentric-css/
 
 # Based on: https://github.com/brigade/scss-lint/blob/master/data/property-sort-orders/concentric.txt
+# Updated list at: https://github.com/brandon-rhodes/Concentric-CSS/blob/master/style3.css
 
 order:
+  # box-sizing
+  - 'box-sizing'
+
+  # position
   - 'display'
   - 'position'
   - 'top'
   - 'right'
   - 'bottom'
   - 'left'
 
+  - 'float'
+  - 'clear'
+
+  # align-content
+  - 'align-content'
+  - 'align-items'
+  - 'align-self'
+
+  # flex
   - 'flex'
   - 'flex-basis'
   - 'flex-direction'
   - 'flex-flow'
   - 'flex-grow'
   - 'flex-shrink'
   - 'flex-wrap'
-  - 'align-content'
-  - 'align-items'
-  - 'align-self'
   - 'justify-content'
+
+  # grid
+  - 'grid'
+  - 'grid-area'
+  - 'grid-template'
+  - 'grid-template-areas'
+  - 'grid-template-rows'
+  - 'grid-template-columns'
+  - 'grid-column'
+  - 'grid-column-start'
+  - 'grid-column-end'
+  - 'grid-row'
+  - 'grid-row-start'
+  - 'grid-row-end'
+  - 'grid-auto-rows'
+  - 'grid-auto-columns'
+  - 'grid-auto-flow'
+  - 'grid-gap'
+  - 'grid-row-gap'
+  - 'grid-column-gap'
+
+  # order
   - 'order'
 
+  # columns
   - 'columns'
   - 'column-gap'
   - 'column-fill'
   - 'column-rule'
+  - 'column-rule-width'
+  - 'column-rule-style'
+  - 'column-rule-color'
   - 'column-span'
   - 'column-count'
   - 'column-width'
 
-  - 'float'
-  - 'clear'
-
+  # transform
+  - 'backface-visibility'
+  - 'perspective'
+  - 'perspective-origin'
   - 'transform'
-  - 'transition'
+  - 'transform-origin'
+  - 'transform-style'
 
-  - 'animation'
-  - 'animation-name'
-  - 'animation-duration'
-  - 'animation-timing-function'
-  - 'animation-delay'
-  - 'animation-iteration-count'
-  - 'animation-direction'
-  - 'animation-fill-mode'
-  - 'animation-play-state'
+  # transition
+  - 'transition'
+  - 'transition-delay'
+  - 'transition-duration'
+  - 'transition-property'
+  - 'transition-timing-function'
 
+  # visibility
   - 'visibility'
   - 'opacity'
   - 'z-index'
 
+  # margin
   - 'margin'
   - 'margin-top'
   - 'margin-right'
   - 'margin-bottom'
   - 'margin-left'
 
+  # outline
   - 'outline'
   - 'outline-offset'
   - 'outline-width'
   - 'outline-style'
   - 'outline-color'
-
+
+  # border
   - 'border'
   - 'border-top'
   - 'border-right'
@@ -75,26 +115,39 @@ order:
   - 'border-bottom-width'
   - 'border-left-width'
 
+  # border-style
   - 'border-style'
   - 'border-top-style'
   - 'border-right-style'
   - 'border-bottom-style'
   - 'border-left-style'
 
+  # border-radius
   - 'border-radius'
   - 'border-top-left-radius'
   - 'border-top-right-radius'
   - 'border-bottom-left-radius'
   - 'border-bottom-right-radius'
 
+  # border-color
   - 'border-color'
   - 'border-top-color'
   - 'border-right-color'
   - 'border-bottom-color'
   - 'border-left-color'
 
+  # border-image
+  - 'border-image'
+  - 'border-image-source'
+  - 'border-image-width'
+  - 'border-image-outset'
+  - 'border-image-repeat'
+  - 'border-image-slice'
+
+  # box-shadow
   - 'box-shadow'
 
+  # background
   - 'background'
   - 'background-attachment'
   - 'background-clip'
@@ -103,54 +156,106 @@ order:
   - 'background-repeat'
   - 'background-position'
   - 'background-size'
+
+  # cursor
   - 'cursor'
 
+  # padding
   - 'padding'
   - 'padding-top'
   - 'padding-right'
   - 'padding-bottom'
   - 'padding-left'
 
+  # width
   - 'width'
   - 'min-width'
   - 'max-width'
 
+  # height
   - 'height'
   - 'min-height'
   - 'max-height'
 
+  # overflow
   - 'overflow'
+  - 'overflow-x'
+  - 'overflow-y'
+  - 'resize'
 
+  # list-style
   - 'list-style'
+  - 'list-style-type'
+  - 'list-style-position'
+  - 'list-style-image'
   - 'caption-side'
 
+  # tables
   - 'table-layout'
   - 'border-collapse'
   - 'border-spacing'
   - 'empty-cells'
 
+  # animation
+  - 'animation'
+  - 'animation-name'
+  - 'animation-duration'
+  - 'animation-timing-function'
+  - 'animation-delay'
+  - 'animation-iteration-count'
+  - 'animation-direction'
+  - 'animation-fill-mode'
+  - 'animation-play-state'
+
+  # vertical-alignment
   - 'vertical-align'
 
+  # text-alignment and decoration
+  - 'direction'
+  - 'tab-size'
   - 'text-align'
+  - 'text-align-last'
+  - 'text-justify'
   - 'text-indent'
   - 'text-transform'
   - 'text-decoration'
+  - 'text-decoration-color'
+  - 'text-decoration-line'
+  - 'text-decoration-style'
   - 'text-rendering'
   - 'text-shadow'
   - 'text-overflow'
 
+  # text-spacing
   - 'line-height'
   - 'word-spacing'
   - 'letter-spacing'
   - 'white-space'
+  - 'word-break'
+  - 'word-wrap'
   - 'color'
 
+  # font
   - 'font'
   - 'font-family'
   - 'font-size'
+  - 'font-size-adjust'
+  - 'font-stretch'
   - 'font-weight'
   - 'font-smoothing'
+  - 'osx-font-smoothing'
+  - 'font-variant'
   - 'font-style'
 
+  # content
   - 'content'
   - 'quotes'
+
+  # counters
+  - 'counter-reset'
+  - 'counter-increment'
+
+  # breaks
+  - 'page-break-before'
+  - 'page-break-after'
+  - 'page-break-inside'