alfa-laboratory/arui-presets-lint

Добавить plugin stylelint-order в stylint для единого порядка правил

kdmatrosov opened this issue · 0 comments

Нет проблемы, есть только предложение.

Сейчас написанные правила проверяются на много разных условий, но я предлагаю проверять еще порядок правил.
Есть такой плагин https://github.com/hudochenkov/stylelint-order и ряд существующих вариантов настройки.
Как это вижу я

rules: {
        'order/order': [
            [
                'dollar-variables',
                'custom-properties',
                'at-rules',
                'declarations',
                {
                    type: 'at-rule',
                    name: 'supports',
                },
                {
                    type: 'at-rule',
                    name: 'media',
                },
                'rules',
            ],
            { severity: 'warning' },
        ],
        'order/properties-order': [
            {
                groupName: 'CSSModule',
                properties: ['composes'],
                emptyLineBefore: 'never',
            },
            {
                groupName: 'Positioning',
                properties: ['position', 'z-index', 'top', 'right', 'bottom', 'left'],
                emptyLineBefore: 'never',
            },
            {
                groupName: 'Display',
                properties: [
                    'display',
                    'grid',
                    'flex',
                    'flex-direction',
                    'align-items',
                    'justify-content',
                    'flex-grow',
                    'flex-shrink',
                    'flex-basis',
                    'grid-gap',
                    'grid-template-columns',
                ],
                emptyLineBefore: 'never',
                noEmptyLineBetween: true,
            },
            {
                groupName: 'Box model',
                properties: [
                    'box-sizing',
                    'margin',
                    'margin-top',
                    'margin-right',
                    'margin-bottom',
                    'margin-left',
                    'padding',
                    'padding-top',
                    'padding-right',
                    'padding-bottom',
                    'padding-left',
                    'width',
                    'min-width',
                    'max-width',
                    'height',
                    'min-height',
                    'max-height',
                ],
                emptyLineBefore: 'never',
                noEmptyLineBetween: true,
            },
            {
                groupName: 'Typography',
                properties: [
                    'font',
                    'font-family',
                    'font-style',
                    'font-variant',
                    'font-weight',
                    'line-height',
                    'font-size',
                    'color',
                    'letter-spacing',
                    'text-indent',
                    'text-align',
                    'text-decoration',
                    'text-transform',
                    'text-shadow',
                    'text-overflow',
                    'white-space',
                    'word-spacing',
                    'word-break',
                ],
                emptyLineBefore: 'never',
                noEmptyLineBetween: true,
            },
            {
                groupName: 'Backgrounds',
                properties: [
                    'background',
                    'background-image',
                    'background-position',
                    'background-size',
                    'background-repeat',
                    'background-origin',
                    'background-clip',
                    'background-attachment',
                    'background-color',
                ],
                emptyLineBefore: 'never',
                noEmptyLineBetween: true,
            },
            {
                groupName: 'Borders',
                properties: [
                    '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-color',
                    'border-top-color',
                    'border-right-color',
                    'border-bottom-color',
                    'border-left-color',
                    'border-radius',
                    'border-radius',
                    'border-top-right-radius',
                    'border-top-left-radius',
                    'border-bottom-right-radius',
                    'border-bottom-left-radius',
                    'border-collapse',
                ],
                emptyLineBefore: 'never',
                noEmptyLineBetween: true,
            },
            {
                groupName: 'Others',
                properties: ['opacity', 'cursor'],
                emptyLineBefore: 'never',
                unspecified: 'bottom',
            },
        ],
    },

Мотивация изменений

Еще больше единообразия при написании стилей. Если запускать stylelint с --fix, то он все переставит