Извлечение во время сборки

Этап 3: Применение классов

Этап 2: Разрешение CVA

Этап 1: Определения вариантов

safelist для

whitelist для

src/core/variants/
Определения CVA на TypeScript

12 категорий вариантов
spacing, colors, layout,
typography, effects

class-variance-authority
вызовы функции cva()

Пропсы компонента
p='lg', rounded='xl'

Сгенерированные классы
p-8 rounded-xl

Примитивы
Block, Box, Grid, Flex, Stack

Композитные
Card, Button, Badge

Макеты
DashLayout, LayoutBlock

scripts/cva-extractor.ts
Извлечение на основе AST

src/lib/core-classes.json
618 классов

Очистка Tailwind CSS

утилита tw-merge

Шкала значений

Варианты Margin

Варианты Padding

p (все стороны)

px (горизонтально)

py (вертикально)

pt (сверху)

pr (справа)

pb (снизу)

pl (слева)

m (все стороны)

mx (горизонтально)

my (вертикально)

mt (сверху)

mr (справа)

mb (снизу)

ml (слева)

none → 0

xs → 1 (0.25rem)

sm → 2 (0.5rem)

md → 4 (1rem)

lg → 8 (2rem)

xl → 12 (3rem)

2xl → 16+ (4rem+)

auto → auto

// Padding со всех сторон
<Box p="lg">              // → p-8
<Box p="xl">              // → p-12

// Направленный padding
<Box px="md" py="lg">     // → px-4 py-8
<Box pt="sm" pb="xl">     // → pt-2 pb-12

// Автоматические margin для центрирования
<Box mx="auto">           // → mx-auto
<Box ml="auto">           // → ml-auto

// Комбинированные отступы
<Card p="xl" mb="lg">     // → p-12 mb-8

["p-0", "p-1", "p-2", "p-4", "p-6", "p-8", "p-12",
 "px-0", "px-1", "px-2", "px-4", "px-6", "px-8", "px-12",
 "py-0", "py-1", "py-2", "py-4", "py-8", "py-16", "py-32", "py-48",
 "m-0", "m-1", "m-2", "m-4", "m-6", "m-8", "m-12", "m-auto",
 "mx-auto", "my-auto", "mt-auto", "mb-auto", "ml-auto", "mr-auto"]

Сгенерированные классы

Семантические токены

Пропсы цветов

bg
(фон)

c
(цвет текста)

borderColor
(граница)

primary /
primary-foreground

secondary /
secondary-foreground

accent /
accent-foreground

destructive /
destructive-foreground

muted /
muted-foreground

card /
card-foreground

background /
foreground

border / input / ring

bg-primary
bg-secondary
bg-accent
bg-destructive
bg-muted
bg-card
bg-background

text-primary
text-secondary
text-foreground
text-muted-foreground

border-primary
border-border
border-input

// Цвета фона
<Card bg="card">                    // → bg-card
<Button bg="primary">               // → bg-primary
<Badge bg="destructive">            // → bg-destructive

// Цвета текста
<Text c="foreground">               // → text-foreground
<Text c="muted-foreground">         // → text-muted-foreground
<Title c="primary">                 // → text-primary

// Цвета границ
<Box borderColor="border">          // → border-border
<Box borderColor="input">           // → border-input

// Комбинация с состояниями hover
<Button 
  bg="primary" 
  className="hover:bg-primary/90"
>                                   // → bg-primary hover:bg-primary/90

["bg-primary", "bg-primary-foreground", "bg-secondary", "bg-secondary-foreground",
 "bg-accent", "bg-accent-foreground", "bg-destructive", "bg-destructive-foreground",
 "bg-muted", "bg-muted-foreground", "bg-card", "bg-background", "bg-foreground",
 "bg-border", "bg-input", "bg-ring", "bg-transparent",
 "text-primary", "text-secondary", "text-foreground", "text-muted-foreground",
 "border-primary", "border-secondary", "border-border", "border-input"]

// Полная ширина/высота
<Box w="full" h="screen">              // → w-full h-screen

// Внутреннее изменение размера
<Box w="fit" h="auto">                 // → w-fit h-auto

// Минимальная высота
<Box minH="screen">                    // → min-h-screen
<Box minH="400px">                     // → min-h-[400px]

// Максимальная ширина с центрированием
<Container maxW="4xl" mx="auto">       // → max-w-4xl mx-auto

// Позиционирование
<Box position="relative">              // → relative
<Box position="absolute">              // → absolute

["w-auto", "w-full", "w-screen", "w-fit", "w-min", "w-max", "w-px", "w-3", "w-4", "w-5", "w-6", "w-8", "w-10", "w-12",
 "h-auto", "h-full", "h-screen", "h-fit", "h-min", "h-max", "h-px", "h-3", "h-4", "h-5", "h-6", "h-8", "h-9", "h-10", "h-11", "h-12",
 "min-h-full", "min-h-screen", "min-h-[200px]", "min-h-[300px]", "min-h-[400px]", "min-h-[500px]",
 "max-w-sm", "max-w-md", "max-w-lg", "max-w-xl", "max-w-2xl", "max-w-4xl", "max-w-6xl", "max-w-full", "max-w-screen-sm", "max-w-screen-md",
 "static", "relative", "absolute", "fixed", "sticky"]

Вариант межстрочного интервала

tight → leading-tight

normal → leading-normal

relaxed → leading-relaxed

Вариант выравнивания

left → text-left

center → text-center

right → text-right

justify → text-justify

Вариант веса

normal → font-normal

medium → font-medium

semibold → font-semibold

bold → font-bold

Вариант размера

xs → text-xs

sm → text-sm

base → text-base

lg → text-lg

xl → text-xl

2xl → text-2xl

3xl → text-3xl

4xl → text-4xl

5xl → text-5xl

// Варианты размера
<Text size="sm">                    // → text-sm
<Title size="3xl">                  // → text-3xl

// Варианты веса
<Text weight="medium">              // → font-medium
<Title fw="bold">                   // → font-bold (fw - это алиас)

// Варианты выравнивания
<Text align="center">               // → text-center
<Text ta="right">                   // → text-right (ta - это алиас)

// Варианты межстрочного интервала
<Text leading="tight">              // → leading-tight

// Комбинированная типографика
<Title 
  size="2xl" 
  weight="bold" 
  align="center"
  leading="tight"
>                                   // → text-2xl font-bold text-center leading-tight

["text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "text-3xl", "text-4xl", "text-5xl",
 "font-normal", "font-medium", "font-semibold", "font-bold",
 "text-left", "text-center", "text-right", "text-justify",
 "leading-tight", "leading-normal", "leading-relaxed"]

// Скругленные углы
<Card rounded="xl">                 // → rounded-xl
<Button rounded="full">             // → rounded-full
<Badge rounded="md">                // → rounded-md

// Тени
<Card shadow="lg">                  // → shadow-lg
<Box shadow="md">                   // → shadow-md

// Границы
<Box border="default">              // → border
<Box border="2">                    // → border-2
<Box border="t">                    // → border-t (только сверху)

// Комбинированные эффекты
<Card 
  rounded="2xl" 
  shadow="xl" 
  border="default"
  borderColor="border"
>                                   // → rounded-2xl shadow-xl border border-border

// Верхняя граница
<Box border="t" border="2">         // → border-t-2

// Нижняя граница
<Box border="b" border="4">         // → border-b-4

// Левая и правая
<Box border="l" border="r">         // → border-l border-r

["rounded-none", "rounded-sm", "rounded-md", "rounded-lg", "rounded-xl", "rounded-2xl", "rounded-3xl", "rounded-full",
 "rounded-t-none", "rounded-t-sm", "rounded-t-md", "rounded-t-lg", "rounded-t-xl", "rounded-t-full",
 "rounded-b-none", "rounded-b-sm", "rounded-b-md", "rounded-b-lg", "rounded-b-xl", "rounded-b-full",
 "rounded-l-none", "rounded-l-sm", "rounded-l-md", "rounded-l-lg", "rounded-l-xl", "rounded-l-full",
 "rounded-r-none", "rounded-r-sm", "rounded-r-md", "rounded-r-lg", "rounded-r-xl", "rounded-r-full",
 "shadow-none", "shadow-sm", "shadow-md", "shadow-lg", "shadow-xl", "shadow-2xl", "shadow-inner",
 "border", "border-0", "border-2", "border-4", "border-t", "border-r", "border-b", "border-l",
 "border-t-0", "border-t-2", "border-t-4", "border-b-0", "border-b-2", "border-b-4"]

Выходные данные: Классы Tailwind

Движок CVA

Определение CVA

Входные данные: Пропсы компонента

JSX компонента

p='lg'
rounded='xl'
shadow='md'
bg='card'

функция cva()

base: 'transition-all'

variants: {
  p: { lg: 'p-8' },
  rounded: { xl: 'rounded-xl' },
  shadow: { md: 'shadow-md' },
  bg: { card: 'bg-card' }
}

Разрешение вариантов

Объединение классов

Сгенерированный className

'transition-all p-8 rounded-xl shadow-md bg-card'

Применено к DOM-элементу

import { cva } from 'class-variance-authority';

export const spacingVariants = cva('', {
  variants: {
    p: {
      none: 'p-0',
      xs: 'p-1',
      sm: 'p-2',
      md: 'p-4',
      lg: 'p-8',
      xl: 'p-12',
      '2xl': 'p-16'
    },
    px: {
      none: 'px-0',
      xs: 'px-1',
      sm: 'px-2',
      md: 'px-4',
      lg: 'px-8',
      xl: 'px-12'
    }
    // ... больше вариантов отступов
  }
});

import { spacingVariants } from '@/core/variants';

// Пропсы передаются в функцию CVA
const className = spacingVariants({ p: 'lg', px: 'xl' });
// Результат: 'p-8 px-12'

Потребители

Выходные данные

Процесс извлечения

Исходные файлы

src/core/variants/
Все файлы .ts/.tsx

Определения CVA
cva('base', { variants: {...} })

scripts/cva-extractor.ts

@babel/parser
Разбор в AST

@babel/traverse
Поиск вызовов cva()

Извлечение классов из:
• Базовых строк
• Объектов вариантов
• Вложенных объектов
• Массивов

618 уникальных классов

src/lib/core-classes.json

timestamp: 2025-10-29T12:17:54.882Z

tailwind.config.js
конфигурация safelist

утилита tw-merge
белый список классов

{
  "classes": [
    "absolute",
    "bg-primary",
    "border",
    "flex",
    "gap-4",
    "p-8",
    "rounded-xl",
    "shadow-md",
    // ... всего 618 классов
  ],
  "count": 618,
  "timestamp": "2025-10-29T12:17:54.882Z"
}

// tailwind.config.js
const coreClasses = require('./src/lib/core-classes.json');

module.exports = {
  safelist: coreClasses.classes,
  // ... остальная конфигурация
};

Композиция типографики

  size='2xl'
  weight='bold'
  align='center'
  leading='tight'
  c='primary'
/>

text-2xl font-bold text-center leading-tight text-primary

Направленная композиция

  px='lg'
  py='md'
  mt='xl'
  mb='sm'
/>

px-8 py-4 mt-12 mb-2

Композиция нескольких вариантов

  p='xl'
  rounded='2xl'
  shadow='lg'
  bg='card'
/>

p-12 rounded-2xl shadow-lg bg-card

Применение одного варианта

p-8

// py переопределяет вертикальную часть p
<Box p="lg" py="xl">
// Результат: p-8 py-12
// Tailwind применяет: padding: 2rem (из p-8), затем padding-top/bottom: 3rem (из py-12)

// className для пользовательских стилей, не покрываемых вариантами
<Card 
  p="lg" 
  rounded="xl" 
  className="hover:scale-105 transition-transform"
>
// Результат: p-8 rounded-xl hover:scale-105 transition-transform

Финальный тип компонента

Интерфейс пропсов компонента

Определение варианта

cva('', { variants: {...} })

VariantProps

ComponentPropsWithoutRef<'div'>

SpacingVariantProps
ColorVariantProps
LayoutVariantProps
EffectsVariantProps

Пользовательские пропсы компонента

type CardProps = 
  BaseProps &
  VariantProps &
  CustomProps

IntelliSense показывает:
• Все варианты
• Допустимые значения
• Описания

// Определение варианта с извлечением типа
import { cva, type VariantProps } from 'class-variance-authority';

const spacingVariants = cva('', {
  variants: {
    p: {
      none: 'p-0',
      xs: 'p-1',
      sm: 'p-2',
      md: 'p-4',
      lg: 'p-8',
      xl: 'p-12'
    }
  }
});

// Извлечение типов пропсов вариантов
export type SpacingVariantProps = VariantProps<typeof spacingVariants>;
// Результат: { p?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' }

// Интерфейс пропсов компонента
interface CardProps extends ComponentPropsWithoutRef<'div'>, SpacingVariantProps {
  variant?: 'default' | 'outlined';
}

src/core/variants/
├── spacing.ts          # Варианты padding и margin
├── colors.ts           # Варианты цвета фона, текста и границ
├── layout.ts           # Варианты ширины, высоты, позиции
├── typography.ts       # Варианты размера, веса, выравнивания, межстрочного интервала
├── effects.ts          # Варианты скругления, теней, границ
├── flex.ts             # Варианты выравнивания flexbox и gap
├── grid.ts             # Варианты макета grid
└── index.ts            # Экспорт всех вариантов

// Экспорт вариантов и утилит из core
export * from './core/variants';

import { 
  spacingVariants, 
  colorVariants, 
  roundedVariants 
} from '@ui8kit/core';

import { Block, Box, Stack } from '@ui8kit/core';

<Block 
  component="section" 
  p="xl" 
  bg="background" 
  rounded="lg"
>
  <Stack gap="md" align="center">
    <Box w="full" h="auto" border="default" rounded="md">
      Контент
    </Box>
  </Stack>
</Block>

import { Card, Button, Text } from '@ui8kit/core';

<Card 
  p="lg" 
  rounded="xl" 
  shadow="md" 
  bg="card"
>
  <Card.Header>
    <Text size="xl" weight="bold" c="foreground">
      Заголовок
    </Text>
  </Card.Header>
  <Card.Content>
    <Text size="base" c="muted-foreground">
      Описание
    </Text>
  </Card.Content>
  <Card.Footer>
    <Button 
      bg="primary" 
      rounded="md" 
      px="lg" 
      py="md"
    >
      Действие
    </Button>
  </Card.Footer>
</Card>

import { DashLayout, Container, LayoutBlock } from '@ui8kit/core';

<DashLayout>
  <Container maxW="6xl" px="lg" py="xl">
    <LayoutBlock 
      layout="grid" 
      gap="lg" 
      p="xl"
      bg="background"
      rounded="lg"
    >
      {/* Контент grid */}
    </LayoutBlock>
  </Container>
</DashLayout>