stylelint.config.js

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended',
  ],
  plugins: [
    'stylelint-order',
    'stylelint-scss',
  ],
  // add your custom config here
  // https://stylelint.io/user-guide/configuration
  rules: {
    indentation: 2,
    'color-hex-case': 'upper',
    'color-hex-length': 'long',
    'length-zero-no-unit': true,
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          'for',
          'include',
          'mixin',
          'if',
          'else',
          'each',
          'extend',
          'function',
          'return',
          'use',
          'forward',
          'at-root',
          'debug',
        ],
      },
    ],
    'declaration-no-important': true,
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: [
          'deep', 'v-deep',
        ],
      },
    ],
    'at-rule-empty-line-before': [
      'always',
      {
        except: [ 'after-same-name', 'inside-block' ],
        ignore: [
          'after-comment',
        ],
        ignoreAtRules: [
          'font-face',
          'mixin',
          'include',
          'each',
          'forward',
        ],
      },
    ],
    'selector-pseudo-element-colon-notation': 'single',
    'declaration-empty-line-before': [
      'always',
      {
        except: [
          'first-nested',
          'after-comment',
        ],
        ignore: [
          'after-declaration',
        ],
      },
    ],
    'order/order': [
      'dollar-variables',
      'custom-properties',
      'declarations',
      'rules',
    ],
    'order/properties-order': [
      [
        {
          emptyLineBefore: 'always',
          properties: [
            'position',
            'z-index',
            'top',
            'right',
            'bottom',
            'left',
          ],
          noEmptyLineBetween: true,
        },
        {
          emptyLineBefore: 'always',
          properties: [
            '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',
          ],
          noEmptyLineBetween: true,
        },
        {
          emptyLineBefore: 'always',
          properties: [
            'display',
            'visibility',
            'float',
            'clear',
            'overflow',
            'overflow-x',
            'overflow-y',
            'clip',
            'zoom',
            'flex-flow',
            'flex-direction',
            'flex-order',
            'flex-pack',
            'flex-align',
            'flex-wrap',
            'flex',
            'justify-content',
            'align-items',
            'align-content',
          ],
          noEmptyLineBetween: true,
        },
        {
          emptyLineBefore: 'always',
          properties: [
            'box-sizing',
            'margin-top',
            'margin-right',
            'margin-bottom',
            'margin-left',
            'width',
            'min-width',
            'max-width',
            'height',
            'min-height',
            'max-height',
            'margin',
            'padding',
            'padding-top',
            'padding-right',
            'padding-bottom',
            'padding-left',
          ],
          noEmptyLineBetween: true,
        },
        {
          emptyLineBefore: 'always',
          properties: [
            'table-layout',
            'empty-cells',
            'caption-side',
            'border-spacing',
            'border-collapse',
            'list-style',
            'list-style-position',
            'list-style-type',
            'list-style-image',
          ],
          noEmptyLineBetween: true,
        },
        {
          emptyLineBefore: 'always',
          properties: [
            'content',
            'quotes',
            'counter-reset',
            'counter-increment',
            'resize',
            'cursor',
            'user-select',
            'nav-index',
            'nav-up',
            'nav-right',
            'nav-down',
            'nav-left',
            'transition',
            'transition-delay',
            'transition-timing-function',
            'transition-duration',
            'transition-property',
            'transform',
            'transform-origin',
            'animation',
            'animation-name',
            'animation-duration',
            'animation-play-state',
            'animation-timing-function',
            'animation-delay',
            'animation-iteration-count',
            'animation-direction',
            'text-align',
            'text-align-last',
            'vertical-align',
            'white-space',
            'text-decoration',
            'text-emphasis',
            'text-emphasis-color',
            'text-emphasis-style',
            'text-emphasis-position',
            'text-indent',
            'text-justify',
            'letter-spacing',
            'word-spacing',
            'text-outline',
            'text-transform',
            'text-wrap',
            'text-overflow',
            'text-overflow-ellipsis',
            'text-overflow-mode',
            'word-wrap',
            'word-break',
            'tab-size',
            'hyphens',
            'pointer-events',
          ],
          noEmptyLineBetween: true,
        },
        {
          emptyLineBefore: 'always',
          properties: [
            'opacity',
            'color',
            'filter',
            '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',
            'outline',
            'outline-width',
            'outline-style',
            'outline-color',
            'outline-offset',
            'background',
            'background-color',
            'background-image',
            'background-repeat',
            'background-attachment',
            'background-position',
            'background-position-x',
            'background-position-y',
            'background-clip',
            'background-origin',
            'background-size',
            'box-decoration-break',
            'box-shadow',
            'text-shadow',
          ],
          noEmptyLineBetween: true,
        },
        {
          emptyLineBefore: 'always',
          properties: [
            'font',
            'font-family',
            'font-size',
            'font-weight',
            'font-style',
            'font-variant',
            'font-size-adjust',
            'font-stretch',
            'font-effect',
            'font-emphasize',
            'font-emphasize-position',
            'font-emphasize-style',
            'font-smooth',
            'line-height',
          ],
          noEmptyLineBetween: true,
        },
      ],
      {
        unspecified: 'bottom',
      },
    ],
  },
}