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

<Meta title='@dxtmisha/en/scripts/Classes/StylesToSelector - CSS Selector Generator'/>

# StylesToSelector Class

The `StylesToSelector` class is responsible for generating CSS selectors for sub-properties, such as pseudo-classes (`:hover`, `:active`) or targeted component states. It intelligently determines whether to use a direct pseudo-class or a mixin.

## Key Features

- **Dynamic Selector Generation** — Automatically converts property names into appropriate CSS selectors.
- **Mixin Integration** — Recognizes specific states like `hover`, `active`, `focus`, `disabled`, and `readonly`, and uses corresponding SCSS mixins.
- **Context-Aware Class Resolution** — Detects if the sub-property belongs to the main component class to optimize the mixin parameters.
- **Indentation Management** — Ensures correct block structure and vertical spacing.

## Initialization

Initialize the `StylesToSelector` converter with the required property and content callable.

**Parameters:**
- `property: PropertyItemsItem` — the current branch of the property tree being processed.
- `space: string` — the indentation string.
- `content?: () => string[]` — a callable function that returns an array of strings representing the internal style rules.
- `first?: boolean` — indicates if this is the first element (optional).

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

const converter = new StylesToSelector(property, '  ', contentCallable)
const result = converter.make()
```

## Methods

### Control

- `make(): string[]` — The main entry point. Orchestrates selector resolution and block wrapping. Only generates output if internal content exists.
