# @cloud-ru/ft-config-stylelint

> stylelint config

Latest version **3.1.3** (published 2026-08-18) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @cloud-ru/ft-config-stylelint
pnpm add @cloud-ru/ft-config-stylelint
yarn add @cloud-ru/ft-config-stylelint
bun add @cloud-ru/ft-config-stylelint
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 3.1.3 |
| Published | 2026-08-18 |
| First published | 2023-11-20 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 21.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Konstantin Yakovlev |
| Maintainers | cloud-ru-tech |
| Keywords | stylelint, scss |

## Links

- npm: https://www.npmjs.com/package/@cloud-ru/ft-config-stylelint
- Repository: https://github.com/cloud-ru-tech/frontend-tools
- Homepage: https://github.com/cloud-ru-tech/frontend-tools/tree/master/packages/config-stylelint
- Issues: https://github.com/cloud-ru-tech/frontend-tools/issues
- npm.io page: https://npm.io/package/@cloud-ru/ft-config-stylelint

## Dependencies (2)

- [stylelint](https://npm.io/package/stylelint.md) ^16.26.1
- [stylelint-config-recommended-scss](https://npm.io/package/stylelint-config-recommended-scss.md) ^14.1.0

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 3.1.3 (latest) — 2026-08-18
- 3.1.3-preview-ae96ee4.0 (preview) — 2026-08-18
- 3.1.3-preview-b329dde.0 — 2026-08-11
- 3.1.2 — 2026-03-20
- 3.1.1 — 2026-03-20
- 3.1.0 — 2026-03-18
- 3.0.1-preview-808434a.0 — 2026-03-18
- 3.0.1-preview-5963787.0 — 2026-03-18
- 3.0.1-preview-86a7e09.0 — 2026-03-17
- 3.0.1-preview-ea09f9d.0 — 2026-03-17
- 3.0.1-preview-0e394a8.0 — 2026-03-17
- 3.0.1-preview-6e056fb.0 — 2026-03-17
- 3.0.1-preview-757bed3.0 — 2026-03-16
- 3.0.1-preview-f70a6ed.0 — 2026-03-16
- 3.0.1-preview-103e5a0.0 — 2026-03-16
- … 8 more at https://npm.io/package/@cloud-ru/ft-config-stylelint/versions

## README

# @cloud-ru/ft-config-stylelint

## Installation
`npm i @cloud-ru/ft-config-stylelint`
>
> Вместе с пакетом приезжают все необходимые зависимости для работы `stylelint` в вашем приложении.

## Usage
```ts
// projectRoot/stylelint.config.js
module.exports = {
  extends: '@cloud-ru/ft-config-stylelint',
  //some additional rules if needed
}
```

## Важно

### z-index
Предполагается, что вам **не придётся** столкнуться со свойством z-index при следующих условиях:
1. У вас грамотная вёрстка с корректным порядком элементов
2. Вы используете компоненты из UI Kit. 

Однако, **если же вам всё же пришлось** использовать свойство z-index для настройки корректного порядка элементов по оси z, то:
1. Обратите внимание на вёрстку и перепроверьте, что иная реализация невозможна.
2. У вас сложный компонент, требующий особого решения. Некоторые случаи (например проблемы с порядком **выпадающих** элементов) можно реализовать через `React.Portal` (подробнее чуть ниже). 
3. Скорее всего только в крайнем случае z-index будет единственным (=> валидным) решением (что достаточно редко).  
  
#### Способы определения порядка DOM элементов по оси z
Определить порядок элемента по оси z можно двумя способами:
1. С помощью z-index.  
Мы **не рекомендуем использовать z-index** в стилях элементов, поскольку считаем, что этот подход в большинстве случаев является вредным костылём и приводит к ещё большему количеству костылей (в виде использования z-index) впоследствии. Особо рискованно использовать это свойство при микросервисной архитектуре – фикс/фича в одном микрофронте может негативно повлиять на корректную работу другого, и навести в этом всём порядок может быть непростой задачей (потребуется одновременная выкатка многих микросервисов с исправлениями).  
2. С помощью нативного приоритета элементов в DOM дереве.  
 
Допустим у нас есть элемент-родитель А и у него два ребёнка – B и C. Если ребёнок C находится в DOM дереве ниже соседа (С), то он будет отображаться поверх него.
```
<A>
  <B/>
  <C/>
</A>  
```

И наоборот, если ребёнок B находится в DOM дереве ниже B, то элемент B будет приоритетнее/ближе к пользователю по оси z.  
```
<A>
  <C/>
  <B/>
</A>  
```
Всё крайне просто – очерёдность элементов влияет на их порядок отображения.

##### React.Portal
Для реализации подобного подхода в React в большинстве случаев достаточно просто соблюдать корректный порядок элементов при вёрстке.  
В более сложных (но достаточно редких) ситуациях на помощь могут прийти порталы `React.Portal`. В наших UI Kit'ах все всплывающие элементы (модкалки, тултипы, дроверы, выпадающие списки и пр.) рендерятся в порталах, которые append’ятся в единый элемент – `<body>`. Благодаря этому приоритет всплывающих элементов по оси z определяется очередностью попадания этих порталов в DOM дерево. 

Советуем посмотреть видео ["Как мы решили проблемы с z-index" от АйТи Синяк](https://youtu.be/w4CPbE_efWw), иллюстрирующее данный подход.

#### Summary
1. Располагайте компоненты в верстке в правильном порядке
2. По возможности всегда используйте компоненты из UI Kit'а - они рисуются в порталах.
3. Используйте порталы напрямую, если у вас сложный кастомный компонент.
4. Используйте z-index только в самом крайнем случае, когда рекомендации выше не помогли и добиться желаемого результата не удалось.

---
_Source: https://npm.io/package/@cloud-ru/ft-config-stylelint · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._