Skip to content

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

Open
kdmatrosov opened this issue Jul 17, 2020 · 0 comments
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@kdmatrosov
Copy link

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

Сейчас написанные правила проверяются на много разных условий, но я предлагаю проверять еще порядок правил.
Есть такой плагин 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, то он все переставит

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

9 participants