Добавить plugin stylelint-order в stylint для единого порядка правил
kdmatrosov opened this issue · 0 comments
kdmatrosov commented
Нет проблемы, есть только предложение.
Сейчас написанные правила проверяются на много разных условий, но я предлагаю проверять еще порядок правил.
Есть такой плагин 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, то он все переставит