Concentric CSS config for VS Code extensions PostCSS Sorting & Sass Lint

..README.md

What's this?

This is concentric configuration for PostCSS Sorting an Sass Lint Visual Studio code extensions.

The Sass Lint extension will check if the SCSS file is formated corectly, while PostCSS Sorting will help you automatically fix the property order.

How to install

Step1: First install both VS Code plugins.

Step 2: create .vscode folder inside project root and place the settings.json in it

In case you already have settings.json file, then just copy paste postcssSorting.config in it.

Step 4: download and save .sass-lint.yml file inside your project root

How to use

Sass Lint will do it's work automatically - just have a look at PROBLEMS output window (Ctrl+Shift+M).

If you detect that Sass lint complains about the property sort order, just open the problematic SCSS file and run run the PostCSS Sorting (Ctrl+P > PostCSS Sorting: Run)

**

.sass-lint.yml

# Concentric CSS
# http://rhodesmill.org/brandon/2011/concentric-css/

# Copied from https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/concentric.yml

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

  # transform
  - 'backface-visibility'
  - 'perspective'
  - 'perspective-origin'
  - 'transform'
  - 'transform-origin'
  - 'transform-style'

  # 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'
  - 'border-bottom'
  - 'border-left'
  - 'border-width'
  - 'border-top-width'
  - 'border-right-width'
  - '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'
  - 'background-color'
  - 'background-image'
  - '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'

settings.json

// Concentric CSS config for PostCSS sorting plugin for VS Code
// based on https://github.com/brigade/scss-lint/blob/master/data/property-sort-orders/concentric.txt

{
    "postcssSorting.config": {
        "order": [
          "custom-properties",
          "dollar-variables",
          "declarations",
          "at-rules",
          "rules"
        ],
        "properties-order": ["box-sizing","display","position","top","right","bottom","left","float","clear","align-content","align-items","align-self","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","justify-content","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","columns","column-gap","column-fill","column-rule","column-rule-width","column-rule-style","column-rule-color","column-span","column-count","column-width","backface-visibility","perspective","perspective-origin","transform","transform-origin","transform-style","transition","transition-delay","transition-duration","transition-property","transition-timing-function","visibility","opacity","z-index","margin","margin-top","margin-right","margin-bottom","margin-left","outline","outline-offset","outline-width","outline-style","outline-color","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-left-radius","border-bottom-right-radius","border-color","border-top-color","border-right-color","border-bottom-color","border-left-color","border-image","border-image-source","border-image-width","border-image-outset","border-image-repeat","border-image-slice","box-shadow","background","background-attachment","background-clip","background-color","background-image","background-repeat","background-position","background-size","cursor","padding","padding-top","padding-right","padding-bottom","padding-left","width","min-width","max-width","height","min-height","max-height","overflow","overflow-x","overflow-y","resize","list-style","list-style-type","list-style-position","list-style-image","caption-side","table-layout","border-collapse","border-spacing","empty-cells","animation","animation-name","animation-duration","animation-timing-function","animation-delay","animation-iteration-count","animation-direction","animation-fill-mode","animation-play-state","vertical-align","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","line-height","word-spacing","letter-spacing","white-space","word-break","word-wrap","color","font","font-family","font-size","font-size-adjust","font-stretch","font-weight","font-smoothing","osx-font-smoothing","font-variant","font-style","content","quotes","counter-reset","counter-increment","page-break-before","page-break-after","page-break-inside"]
      }
}

Thank you, my friend, you saved me a lot of time.