stylelint-config-concentric-order/src/index.js

This Stylelint configuration validates the ordering of CSS properties according to Concentric CSS

// Groups of CSS properties in Concentric order
const groups = [
  ['all', 'appearance', 'color-scheme', 'forced-color-adjust'],
  ['box-sizing'],
  [
    'display',
    'position',
    'inset',
    'inset-block',
    'inset-block-start',
    'inset-block-end',
    'inset-inline',
    'inset-inline-start',
    'inset-inline-end',
    'top',
    'right',
    'bottom',
    'left',
  ],
  ['float', 'clear'],
  ['container', 'container-name', 'container-type'],
  [
    'flex',
    'flex-basis',
    'flex-direction',
    'flex-flow',
    'flex-grow',
    'flex-shrink',
    'flex-wrap',
  ],
  [
    'grid',
    'grid-area',
    'grid-template',
    'grid-template-areas',
    'grid-template-rows',
    'grid-template-columns',
    'grid-row',
    'grid-row-start',
    'grid-row-end',
    'grid-column',
    'grid-column-start',
    'grid-column-end',
    'grid-auto-rows',
    'grid-auto-columns',
    'grid-auto-flow',
  ],
  [
    'gap',
    'grid-gap',
    'row-gap',
    'grid-row-gap',
    'column-gap',
    'grid-column-gap',
  ],
  ['place-content', 'place-items', 'place-self'],
  ['align-content', 'align-items', 'align-self'],
  ['justify-content', 'justify-items', 'justify-self'],
  ['order'],
  [
    'columns',
    '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',
  ],
  [
    'animation',
    'animation-name',
    'animation-duration',
    'animation-timing-function',
    'animation-delay',
    'animation-iteration-count',
    'animation-direction',
    'animation-fill-mode',
    'animation-play-state',
    'animation-composition',
    'animation-timeline',
    'animation-range',
    'animation-range-start',
    'animation-range-end',
  ],
  ['visibility', 'content-visibility', 'opacity', 'z-index'],
  [
    'margin',
    'margin-top',
    'margin-right',
    'margin-bottom',
    'margin-left',
    'margin-block',
    'margin-block-start',
    'margin-block-end',
    'margin-inline',
    'margin-inline-start',
    'margin-inline-end',
  ],
  [
    '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-block',
    'border-block-width',
    'border-block-style',
    'border-block-color',
    'border-block-start',
    'border-block-start-width',
    'border-block-start-style',
    'border-block-start-color',
    'border-block-end',
    'border-block-end-width',
    'border-block-end-style',
    'border-block-end-color',
  ],
  [
    'border-inline',
    'border-inline-width',
    'border-inline-style',
    'border-inline-color',
    'border-inline-start',
    'border-inline-start-width',
    'border-inline-start-style',
    'border-inline-start-color',
    'border-inline-end',
    'border-inline-end-width',
    'border-inline-end-style',
    'border-inline-end-color',
  ],
  [
    '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-start-start-radius',
    'border-start-end-radius',
    'border-end-start-radius',
    'border-end-end-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'],
  ['filter', 'backdrop-filter'],
  ['isolation', 'mix-blend-mode'],
  [
    'mask',
    'mask-image',
    'mask-size',
    'mask-position',
    'mask-repeat',
    'mask-origin',
    'mask-clip',
    'mask-composite',
    'mask-mode',
    'clip-path',
  ],
  [
    'background',
    'background-attachment',
    'background-clip',
    'background-color',
    'background-image',
    'background-blend-mode',
    'background-origin',
    'background-position',
    'background-repeat',
    'background-size',
  ],
  [
    'padding',
    'padding-top',
    'padding-right',
    'padding-bottom',
    'padding-left',
    'padding-block',
    'padding-block-start',
    'padding-block-end',
    'padding-inline',
    'padding-inline-start',
    'padding-inline-end',
  ],
  ['aspect-ratio'],
  [
    'width',
    'block-size',
    'min-width',
    'min-block-size',
    'max-width',
    'max-block-size',
  ],
  [
    'height',
    'inline-size',
    'min-height',
    'min-inline-size',
    'max-height',
    'max-inline-size',
  ],
  ['overflow', 'overflow-x', 'overflow-y', 'resize'],
  ['overscroll-behavior', 'overscroll-behavior-x', 'overscroll-behavior-y'],
  [
    'scroll-behavior',
    'scroll-snap-type',
    'scroll-snap-align',
    'scroll-snap-stop',
  ],
  [
    'scroll-margin',
    'scroll-margin-top',
    'scroll-margin-right',
    'scroll-margin-bottom',
    'scroll-margin-left',
    'scroll-margin-block',
    'scroll-margin-block-start',
    'scroll-margin-block-end',
    'scroll-margin-inline',
    'scroll-margin-inline-start',
    'scroll-margin-inline-end',
  ],
  [
    'scroll-padding',
    'scroll-padding-top',
    'scroll-padding-right',
    'scroll-padding-bottom',
    'scroll-padding-left',
    'scroll-padding-block',
    'scroll-padding-block-start',
    'scroll-padding-block-end',
    'scroll-padding-inline',
    'scroll-padding-inline-start',
    'scroll-padding-inline-end',
  ],
  [
    'list-style',
    'list-style-type',
    'list-style-position',
    'list-style-image',
    'caption-side',
  ],
  ['table-layout', 'border-collapse', 'border-spacing', 'empty-cells'],
  ['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-decoration-thickness',
    'text-underline-offset',
    'text-underline-position',
    'text-rendering',
    'text-shadow',
    'text-overflow',
    'text-wrap',
    'text-wrap-style',
  ],
  [
    'line-height',
    'word-spacing',
    'letter-spacing',
    'white-space',
    'white-space-collapse',
    'word-break',
    'word-wrap',
    'overflow-wrap',
    'hyphens',
    'hyphenate-character',
    'hanging-punctuation',
    'color',
  ],
  [
    'font',
    'font-family',
    'font-kerning',
    'font-size',
    'font-size-adjust',
    'font-stretch',
    'font-weight',
    'font-smoothing',
    'osx-font-smoothing',
    'font-variant',
    'font-style',
    'font-optical-sizing',
    'font-palette',
    'font-synthesis',
    'font-display',
  ],
  ['content', 'quotes'],
  ['counter-reset', 'counter-increment', 'counter-set'],
  [
    'page-break-before',
    'page-break-after',
    'page-break-inside',
    'break-before',
    'break-after',
    'break-inside',
  ],
  ['cursor', 'accent-color', 'caret-color'],
  ['pointer-events', 'touch-action', 'user-select', 'will-change'],
]

// Export the Stylelint configuration
module.exports = {
  plugins: ['stylelint-order'],
  rules: {
    'order/order': [
      // Imports
      { type: 'at-rule', name: 'import' },

      // Variables
      'dollar-variables',
      'custom-properties',

      // Inheritance
      { type: 'at-rule', name: 'extend' },

      // Mixins
      { type: 'at-rule', name: 'include' },
      { type: 'at-rule', name: 'mixin' },
      { type: 'at-rule', name: 'add-mixin' },
      { type: 'at-rule', name: 'apply' },

      // Declarations
      'declarations',

      // Pseudo-elements
      {
        type: 'rule',
        selector: /^&::[\w-]+/,
        hasBlock: true,
      },

      // Pseudo-classes
      {
        type: 'rule',
        selector: /^&:[\w-]+/,
        hasBlock: true,
      },

      // Nested Rules
      'rules',

      // Breakpoint Mixins
      {
        type: 'at-rule',
        name: 'include',
        parameter: /breakpoints?/i,
        hasBlock: true,
      },
      {
        type: 'at-rule',
        name: 'mixin',
        parameter: /breakpoints?/i,
        hasBlock: true,
      },
      {
        type: 'at-rule',
        name: 'add-mixin',
        parameter: /breakpoints?/i,
        hasBlock: true,
      },

      // Media Queries
      { type: 'at-rule', name: 'media', hasBlock: true },
    ],
    'order/properties-order': [
      groups.map((group) => ({
        properties: group,
      })),
    ],
  },
}