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

<Meta title='@dxtmisha/vi/scripts/Classes/DesignStructureStyles - Trình biên dịch kiểu dáng thành phần'/>

# Lớp DesignStructureStyles

Lớp `DesignStructureStyles` chịu trách nhiệm chuyển đổi các token thiết kế cấu trúc của thành phần thành một mảng chuẩn hóa các chuỗi thuộc tính CSS. Bằng cách tận dụng động cơ `StylesProperties`, nó đảm bảo rằng mọi thành phần đều kế thừa bản sắc hình ảnh cơ bản của mình trực tiếp từ cấu hình chủ đề trung tâm của hệ thống thiết kế.

## Các tính năng chính

- **Chuyển đổi Token sang CSS** — Tự động ánh xạ các token thiết kế trừu tượng sang các thuộc tính CSS cụ thể.
- **Phạm vi bộ chọn BEM** — Gói các kiểu dáng được tạo trong một bộ chọn cấp thành phần (`& { ... }`) để đảm bảo cách ly kiểu dáng.
- **Kế thừa phân cấp** — Sử dụng siêu dữ liệu cấu trúc của cha để phân giải chính xác các biến thuộc tính lồng nhau.
- **Định dạng chuẩn hóa** — Áp dụng thụt lề và ngắt dòng nhất quán, đảm bảo các tệp kiểu dáng được tạo ra vẫn dễ đọc.

## Khởi tạo

Để khởi tạo trình biên dịch kiểu dáng, hãy cung cấp mã định danh của thành phần cần tạo kiểu dáng. Lớp sẽ tự động tải siêu dữ liệu cấu trúc liên quan.

**Tham số:**
- `component: string` — Mã định danh của thành phần (ví dụ: `'button'`).

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

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

## Các phương thức

### Điều khiển

- `make(): string[]` — Kích hoạt quá trình chuyển đổi và trả về mảng các chuỗi thuộc tính CSS.

## Các thao tác (Operations)

### Quy trình biên dịch kiểu dáng

Khi trình biên dịch được khởi tạo, nó tuân theo một quy trình có cấu trúc:
1. **Tải siêu dữ liệu**: Nó sử dụng logic của lớp cha `DesignStructureItemAbstract` để lấy `PropertyItemsItem` cụ thể liên quan đến thành phần.
2. **Lựa chọn ngữ cảnh**: Động cơ gói tất cả các thuộc tính đầu ra bên trong một bộ chọn CSS tự tham chiếu (`& { ... }`) để duy trì tính tương thích với CSS-in-JS và các trình tiền xử lý.
3. **Phân giải thuộc tính**: Nó khởi tạo `StylesProperties`, chuyển siêu dữ liệu đã thu thập. Động cơ phụ này sau đó duyệt qua mọi token, phân giải các biến chủ đề, đơn vị và các phương án dự phòng (fallbacks).
4. **Đệm đầu ra**: Danh sách các thuộc tính cuối cùng được kết hợp thành một mảng phẳng các chuỗi, sẵn sàng để tiêm vào tệp CSS hoặc thẻ style.

### Tích hợp với Động cơ Chủ đề (Theme Engine)

Lớp này đóng vai trò là cầu nối giữa dữ liệu thiết kế thô và biểu diễn hình ảnh cuối cùng. Bằng cách tập trung logic biên dịch kiểu dáng, hệ thống đảm bảo rằng các thay đổi đối với kiến trúc cốt lõi của chủ đề (chẳng hạn như quy ước đặt tên biến hoặc logic đơn vị) sẽ tự động được truyền bá đến tất cả các thành phần trong chu kỳ xây dựng tiếp theo.
