Stylelint property order

Enforce a consistent order for properties in CSS/SCSS files with Stylelint.

To enable this you need to add the following dependencies

// .stylelintrc.js
    
module.exports = {
    plugins: ['stylelint-prettier', 'stylelint-order'],
    // ...Your config
    rules: {
        // ...Your rules
        'order/order': [
            [
                'dollar-variables',
                'custom-properties',
                'at-rules',
                'declarations',
                {
                    type: 'at-rule',
                    name: 'if'
                },
                {
                    type: 'at-rule',
                    name: 'else if'
                },
                {
                    type: 'at-rule',
                    name: 'else'
                },
                {
                    type: 'at-rule',
                    name: 'supports'
                },
                {
                    type: 'at-rule',
                    name: 'include',
                    parameter: 'bp-min',
                    hasBlock: true
                },
                {
                    type: 'at-rule',
                    name: 'include',
                    parameter: 'bp-max',
                    hasBlock: true
                },
                {
                    type: 'at-rule',
                    name: 'include',
                    parameter: 'bp-min-max',
                    hasBlock: true
                },
                {
                    type: 'at-rule',
                    name: 'include',
                    parameter: 'reduced-motion',
                    hasBlock: true
                },
                {
                    type: 'at-rule',
                    name: 'include',
                    parameter: 'high-contrast',
                    hasBlock: true
                },
                {
                    type: 'at-rule',
                    name: 'include',
                    parameter: 'print',
                    hasBlock: true
                },
                {
                    type: 'at-rule',
                    name: 'media'
                },
                'rules'
            ],
            { severity: 'error' }
        ],
        'order/properties-order': [
            [
                // Content
                'content',

                // Visibility
                'visibility',
                'opacity',
                'overflow',
                'overflow-block',
                'overflow-inline',
                'overflow-x',
                'overflow-y',
                'overflow-scrolling',
                'overscroll',
                'overscroll-block',
                'overscroll-inline',
                'overscroll-x',
                'overscroll-y',

                // Scrolling
                'scroll-behavior',
                'scroll-margin',
                'scroll-margin-block',
                'scroll-margin-inline',
                'scroll-margin-top',
                'scroll-margin-right',
                'scroll-margin-bottom',
                'scroll-margin-left',
                'scroll-padding',
                'scroll-padding-block',
                'scroll-padding-inline',
                'scroll-padding-top',
                'scroll-padding-right',
                'scroll-padding-bottom',
                'scroll-padding-left',

                // Positioning
                'z-index',
                'position',
                'inset',
                'inset-block',
                'inset-block-start',
                'inset-block-end',
                'inset-inline',
                'inset-inline-start',
                'inset-inline-end',
                'top',
                'right',
                'bottom',
                'left',
                'float',
                'clear',

                // Display and Box Model
                'display',
                'box-sizing',
                'box-shadow',
                'box-decoration-break',
                'resize',

                // Flexbox and Grid
                'flex',
                'flex-grow',
                'flex-shrink',
                'flex-basis',
                'flex-direction',
                'flex-flow',
                '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',
                'grid-gap',
                'grid-row-gap',
                'grid-column-gap',
                'gap',
                'row-gap',
                'column-gap',
                'align-content',
                'align-items',
                'align-self',
                'justify-content',
                'justify-items',
                'justify-self',
                'vertical-align',
                'order',

                // Columns
                'columns',
                'column-span',
                'column-width',
                'column-count',
                'column-fill',
                'column-gap',
                'column-rule',
                'column-rule-width',
                'column-rule-style',
                'column-rule-color',
                'orphans',
                'widows',

                // Width and height
                'width',
                'min-width',
                'max-width',
                'inline-size',
                'min-inline-size',
                'max-inline-size',
                'height',
                'min-height',
                'max-height',
                'block-size',
                'min-block-size',
                'max-block-size',

                // Margin and padding
                'margin',
                'margin-block',
                'margin-block-start',
                'margin-block-end',
                'margin-inline',
                'margin-inline-start',
                'margin-inline-end',
                'margin-top',
                'margin-right',
                'margin-bottom',
                'margin-left',
                'padding',
                'padding-block',
                'padding-block-start',
                'padding-block-end',
                'padding-inline',
                'padding-inline-start',
                'padding-inline-end',
                'padding-top',
                'padding-right',
                'padding-bottom',
                'padding-left',

                // List
                'list-style',
                'list-style-position',
                'list-style-type',
                'list-style-image',
                'counter-increment',
                'counter-reset',

                // Background and colors
                'background',
                'background-color',
                'background-image',
                'background-attachment',
                'background-position',
                'background-position-x',
                'background-position-y',
                'background-clip',
                'background-origin',
                'background-size',
                'background-repeat',
                'color',
                'fill',
                'stroke',

                // Images
                'object-fit',
                'interpolation-mode',

                // Effects
                'filter',

                // Clipping
                'clip',

                // Cursors and User Interaction
                'cursor',
                'pointer-events',
                'user-select',

                // Typography
                'font',
                'font-family',
                'src',
                'font-weight',
                'font-style',
                'font-variant',
                'font-size-adjust',
                'font-stretch',
                'font-size',
                'line-height',
                'letter-spacing',
                'text-align',
                'text-align-last',
                'text-justify',
                'text-decoration',
                'text-emphasis',
                'text-emphasis-position',
                'text-emphasis-style',
                'text-emphasis-color',
                'text-indent',
                'text-outline',
                'text-transform',
                'text-wrap',
                'text-overflow',
                'text-overflow-ellipsis',
                'text-overflow-mode',
                'text-shadow',
                'white-space',
                'word-spacing',
                'word-wrap',
                'word-break',
                'overflow-wrap',
                'hyphens',
                'quotes',
                '-ms-writing-mode',
                'direction',
                'unicode-bidi',
                'tab-size',

                // Borders
                'border',
                'border-spacing',
                'border-collapse',
                'border-width',
                'border-style',
                'border-color',
                'border-block',
                'border-block-color',
                'border-block-style',
                'border-block-width',
                'border-block-start',
                'border-block-start-color',
                'border-block-start-style',
                'border-block-start-width',
                'border-block-end',
                'border-block-end-color',
                'border-block-end-style',
                'border-block-end-width',
                'border-inline',
                'border-inline-color',
                'border-inline-style',
                'border-inline-width',
                '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-start-start-radius',
                'border-start-end-radius',
                'border-end-start-radius',
                'border-end-end-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-top-image',
                'border-right-image',
                'border-bottom-image',
                'border-left-image',
                'border-corner-image',
                'border-top-left-image',
                'border-top-right-image',
                'border-bottom-right-image',
                'border-bottom-left-image',

                // Outline
                'outline',
                'outline-width',
                'outline-style',
                'outline-color',
                'outline-offset',

                // View transitions
                'view-timeline',
                'view-timeline-axis',
                'view-timeline-inset',
                'view-timeline-name',
                'view-transition-name',

                // Transforms
                'transform',
                'transform-box',
                'transform-origin',
                'transform-style',
                'scale',
                'rotate',

                // Transitions
                'transition',
                'transition-behavior',
                'transition-property',
                'transition-duration',
                'transition-delay',
                'transition-timing-function',

                // Animations
                'animation',
                'animation-name',
                'animation-duration',
                'animation-delay',
                'animation-timing-function',
                'animation-play-state',
                'animation-iteration-count',
                'animation-direction',
                'animation-fill-mode',

                // Tables
                'table-layout',
                'caption-side',
                'empty-cells',

                // Page Breaks
                'break-before',
                'break-inside',
                'break-after',
                'page-break-before',
                'page-break-inside',
                'page-break-after',

                // Zoom
                'zoom',
                'max-zoom',
                'min-zoom',
                'user-zoom',
                'orientation'
            ],
            {
                unspecified: 'bottom',
                severity: 'error'
            }
        ]
    }
};