@e_fellow/stylelint-base-config NPM

stylelint-base-config

Данный пакет объединяет популярные пресеты Stylelint с набором кастомных правил, ориентированных на крупные SCSS-кодовые базы: контроль сложности, запрет неявных зависимостей и принудительное использование дизайн-токенов.

Установка

NPM:

npm install --save-dev stylelint @e_fellow/stylelint-base-config

YARN:

yarn add -D stylelint @e_fellow/stylelint-base-config

После установки в .stylelintrc.js:

module.exports = { extends: ['@e_fellow/stylelint-base-config'], };

Категория	Элемент	Назначение
Presets (extends)	stylelint-config-standard	Базовые форматные и лучшие практики от команды Stylelint.
	stylelint-config-idiomatic-order	Жёсткий порядок свойств по методологии Idiomatic CSS (`stylelint-order`).
Plugins (plugins)	stylelint-scss	SCSS-специфичный синтаксис и правила (`scss/at-rule-no-unknown`).
	stylelint-high-performance-animation	Предупреждает о затратных свойствах в @keyframes / transition.
	custom plugins	Собственные правила — см. таблицу ниже.

Кастомные правила

Имя правила	Значение по-умолчанию	Что проверяет
`basic-rules/max-nesting-depth`	`3`	Глубина вложенности селекторов.
`basic-rules/no-hardcoded-colors`	`true`	Запрещает прямые HEX / RGB / hsl-значения и цвет-keywords, если они не внутри `var(--token)` или `$variable`.
`basic-rules/no-literal-z-index`	`true`	Запрещает числовые `z-index`; допускает токены, `auto`, `calc()`.
`basic-rules/no-extend`	`true`	Запрет `@extend`; используем миксины / утилити-классы.
`basic-rules/max-control-nesting`	`1`	Контроль `@if` / `@for` / `@each` / `@while` – не глубже 1 уровня.

Дополнительные настройки правил

Правило	Настройка	Причина
`color-hex-length`	`"long"`	6-значный HEX для читаемости (`#ffffff`).
`at-rule-no-unknown`	`null`	Отключено в пользу `scss/at-rule-no-unknown`.
`scss/at-rule-no-unknown`	`true`	Ловит опечатки в SCSS-директивах.
`selector-pseudo-class-no-unknown`	`true` + `ignorePseudoClasses: ['global']`	Разрешаем `:global` из CSS-Modules.
`unit-no-unknown`	`null`	Допускаем проектные единицы (`rpx` и т. д.).
`plugin/no-low-performance-animation-properties`	`true` + ignore paint-props	Запрет анимации свойств, вызывающих layout.
`selector-type-no-unknown`	`true` + `ignore: ['custom-elements', 'default-namespace']`	Разрешаем Web-Components и namespaced SVG.
`selector-type-case`	`'lower'` + ignore regex	Тип-селекторы в нижнем регистре.
`property-no-unknown`	`null`	Разрешаем экспериментальные свойства.

basic-rules/max-nesting-depth

Пример использования:

/* ✅ depth 2 — OK */
.nav {
  .item { color: red; }
}

/* ❌ depth 4 — ошибка */
.a { .b { .c { .d { } } } }

basic-rules/no-hardcoded-colors

Пример использования:

/* ✅ допускается токен */
.card {
  border-color: var(--border-color);
}

$text-color: #222;

/* ✅ допускается токен */
.title {
  color: $text-color;
}

/* ❌ жёсткий HEX */
.title2 {
  color: red;
}

basic-rules/no-literal-z-index

Пример использования:

/* ✅ переменная */
.modal { z-index: $z-modal; }

/* ❌ число */
.dropdown { z-index: 9999; }

basic-rules/no-extend

Пример использования:

/* ✅ миксин */
@include button-base;

/* ❌ @extend */
.btn-danger { @extend .btn; }

basic-rules/max-control-nesting

Пример использования:

/* ✅ depth 1 */
@each $c in red {
  @if $c == red { color: red; }
}

/* ❌ depth 2 */
@for $i from 1 through 3 {
  @if $i > 1 {
    @each $c in red { }
  }
}

Лицензия MIT

stylelint stylelint-config scss typescript

stylelint-config-idiomatic-order stylelint-config-standard stylelint-high-performance-animation stylelint-scss

1.0.0

5 months ago