import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/scripts/Classes/DesignStructureStyles - Компилятор стилей компонента'/>

# Класс DesignStructureStyles

Класс `DesignStructureStyles` отвечает за преобразование структурных дизайн-токенов компонента в стандартизированный массив строк свойств CSS. Используя движок `StylesProperties`, он гарантирует, что каждый компонент наследует свою базовую визуальную идентичность напрямую из центральной конфигурации темы дизайн-системы.

## Ключевые особенности

- **Трансформация токенов в CSS** — автоматически сопоставляет абстрактные токены дизайна с конкретными свойствами CSS.
- **Изоляция селекторов (BEM)** — оборачивает сгенерированные стили в селектор уровня компонента (`& { ... }`) для обеспечения изоляции стилей.
- **Иерархическое наследование** — использует родительские структурные метаданные для точного разрешения вложенных переменных свойств.
- **Стандартизированное форматирование** — применяет согласованные отступы и переносы строк, гарантируя читаемость сгенерированных файлов стилей.

## Инициализация

Для инициализации компилятора стилей укажите идентификатор компонента, стили которого необходимо сгенерировать. Класс автоматически загрузит релевантные структурные метаданные.

**Параметры:**
- `component: string` — идентификатор компонента (например, `'button'`).

```typescript
import { DesignStructureStyles } from '@dxtmisha/scripts'

const compiler = new DesignStructureStyles('button')
const stylesArray = compiler.get()
```

## Методы

### Управление

- `make(): string[]` — запускает процесс трансформации и возвращает массив строк свойств CSS.

## Операции

### Рабочий процесс компиляции стилей

При инициализации компилятор следует структурированному конвейеру:
1. **Загрузка метаданных**: использует логику родительского `DesignStructureItemAbstract` для получения специфического `PropertyItemsItem`, связанного с компонентом.
2. **Контекстный селектор**: движок оборачивает все выходные свойства в самоссылающийся CSS-селектор (`& { ... }`) для поддержания совместимости с CSS-in-JS и препроцессорами.
3. **Разрешение свойств**: создается экземпляр `StylesProperties`, которому передаются собранные метаданные. Этот суб-движок обходит каждый токен, разрешая переменные темы, юниты и фолбэки.
4. **Буферизация вывода**: финальный список свойств объединяется в плоский массив строк, готовый к внедрению в CSS-файл или тег стиля.

### Интеграция с движком тем

Этот класс выступает в качестве моста между необработанными данными дизайна и финальным визуальным представлением. Централизуя логику компиляции стилей, система гарантирует, что изменения в основной архитектуре темы (такие как соглашения об именовании переменных или логика единиц измерения) автоматически распространяются на все компоненты во время следующего цикла сборки.
