.stylelintrc.js

const special = ['composes']

const positioning = ['position', 'top', 'right', 'bottom', 'left', 'z-index']

const boxmodel = [
  'display',
  'flex',
  'flex-direction',
  'flex-grow',
  'flex-shrink',
  'flex-basis',
  'flex-flow',
  'flex-wrap',
  'grid',
  'grid-area',
  'grid-auto-columns',
  'grid-auto-flvow',
  'grid-auto-rows',
  'grid-column',
  'grid-column-end',
  'grid-column-gap',
  'grid-column-start',
  'grid-gap',
  'grid-row',
  'grid-row-end',
  'grid-row-gap',
  'grid-row-start',
  'grid-template',
  'grid-template-areas',
  'grid-template-columns',
  'grid-template-rows',
  'gap',
  'justify-content',
  'align-content',
  'align-items',
  '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',
  'overflow',
  'overflow-x',
  'overflow-y',
]

const typography = [
  'color',
  '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',
  'letter-spacing',
  'direction',
  'text-align',
  'text-align-last',
  'text-decoration',
  'text-transform',
  'text-emphasis',
  'text-emphasis-color',
  'text-emphasis-style',
  'text-emphasis-position',
  'text-indent',
  'text-justify',
  'text-outline',
  'text-wrap',
  'text-overflow',
  'text-overflow-ellipsis',
  'text-overflow-mode',
  'text-orientation',
  'text-shadow',
  'vertical-align',
  'white-space',
  'word-wrap',
  'word-break',
  'word-spacing',
  'overflow-wrap',
  'tab-size',
  'hyphens',
  'unicode-bidi',
  'columns',
  'column-count',
  'column-fill',
  'column-gap',
  'column-rule',
  'column-rule-color',
  'column-rule-style',
  'column-rule-width',
  'column-span',
  'column-width',
  'page-break-after',
  'page-break-before',
  'page-break-inside',
  'src',
]

const visual = [
  'list-style',
  'list-style-position',
  'list-style-type',
  'list-style-image',
  'table-layout',
  'empty-cells',
  'caption-side',
  'background',
  'background-color',
  'background-image',
  'background-repeat',
  'background-position',
  'background-position-x',
  'background-position-y',
  'background-size',
  'background-clip',
  'background-origin',
  'background-attachment',
  'background-blend-mode',
  'box-decoration-break',
  '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-collapse',
  'border-spacing',
  'outline',
  'outline-width',
  'outline-style',
  'outline-color',
  'outline-offset',
  'box-shadow',
  'backface-visibility',
  'perspective',
  'perspective-origin',
  'visibility',
  'cursor',
  'opacity',
  'filter',
  'backdrop-filter',
  'transform',
  'transform-origin',
  'transform-style',
]

const animation = [
  'transition',
  'transition-delay',
  'transition-timing-function',
  'transition-duration',
  'transition-property',
  'animation',
  'animation-name',
  'animation-duration',
  'animation-play-state',
  'animation-timing-function',
  'animation-delay',
  'animation-iteration-count',
  'animation-direction',
  'animation-fill-mode',
]

const misc = [
  'appearance',
  'clip',
  'clip-path',
  'counter-reset',
  'counter-increment',
  'resize',
  'user-select',
  'nav-index',
  'nav-up',
  'nav-right',
  'nav-down',
  'nav-left',
  'pointer-events',
  'quotes',
  'touch-action',
  'will-change',
  'zoom',
  'fill',
  'fill-rule',
  'clip-rule',
  'stroke',
]

const rational = [
  ...special,
  ...positioning,
  ...boxmodel,
  ...typography,
  ...visual,
  ...animation,
  ...misc,
]

module.exports = {
  customSyntax: 'postcss-scss',
  plugins: ['stylelint-scss', 'stylelint-order', 'stylelint-prettier'],
  severity: 'error',
  rules: {
    // Base rules
    // indentation: 2, // Disable it to prevend prettier conflict
    // 'string-quotes': 'double', // Disable it to prevent prettier conflict in .mdx/.tsx files
    'number-leading-zero': 'always',
    'selector-max-id': 0,
    'selector-list-comma-newline-after': 'always',
    'rule-empty-line-before': [
      'always',
      {
        ignore: ['after-comment'],
        except: ['first-nested'],
      },
    ],
    'comment-empty-line-before': ['always', { except: ['first-nested'] }],
    'block-opening-brace-space-before': [
      'always',
      { ignoreAtRules: ['/if/', '/each/'] },
    ],
    'declaration-colon-space-after': 'always',
    'declaration-colon-space-before': 'never',
    'declaration-block-single-line-max-declarations': 1,
    'declaration-property-value-disallowed-list': { border: ['none'] },
    'at-rule-empty-line-before': [
      'always',
      {
        ignore: ['after-comment'],
        except: ['first-nested'],
        ignoreAtRules: ['import', 'else', 'use', 'forward', 'include', 'debug'],
      },
    ],

    // Sass rules and plugins
    'max-nesting-depth': [
      3,
      {
        ignore: ['pseudo-classes'],
        ignoreAtRules: ['include', 'media', 'if', 'else', 'each'],
      },
    ],
    'scss/dollar-variable-pattern': '^_?[a-z]+[\\w-]*$',
    'scss/at-extend-no-missing-placeholder': true,
    'order/order': [
      { type: 'at-rule', name: 'extend' },
      { type: 'at-rule', name: 'include', hasBlock: false },
      // { type: 'at-rule', name: 'if' },
      // { type: 'at-rule', name: 'else' },
      'declarations',
      // { type: 'at-rule' },
      // { type: 'at-rule', hasBlock: true },
      'rules',
      { type: 'at-rule', name: 'return' },
    ],
    'order/properties-order': rational,

    // Custom
    'property-no-unknown': [
      true,
      {
        ignoreProperties: ['composes'],
      },
    ],
    'selector-pseudo-element-colon-notation': 'double',
    'color-hex-case': 'lower',
    'color-hex-length': 'short',
    'color-named': 'never',
    'color-no-invalid-hex': true,
    'alpha-value-notation': 'number',

    // Prettier
    // 'prettier/prettier': true,
  },
}