Фулстек-разработчик Максим создал библиотеку @cronocode/react-box, которая превращает 144 CSS-свойства в типизированные React-пропы с автокомплитом и проверкой ошибок на этапе компиляции. Причина — усталость от постоянного переключения между TypeScript и CSS-файлами.
«Я постоянно покидал мир TypeScript — где редактор знает всё и ловит ошибки — ради мира строк, где проверок нет», — объясняет автор. Каждый новый компонент требовал создания CSS-файла, настройки styled-components или длинной цепочки Tailwind-классов.
Типизация вместо utility-классов
Главное отличие от Tailwind — использование структурированных объектов вместо строковых классов:
// Tailwind
<div className="flex items-center gap-4 p-6 bg-indigo-500 hover:bg-indigo-600">
// React Box
<Flex ai="center" gap={4} p={6} bgColor="indigo-500" hover={{bgColor: 'indigo-600'}}>Во втором варианте каждый проп получает автокомплит, а опечатка bgColor="indgo-500" становится ошибкой компиляции. Hover-состояния и медиазапросы работают через вложенные объекты, а не строковые префиксы.
Компонент Box и 17 семантических обёрток
Основа библиотеки — компонент Box, который принимает 144 CSS-свойства как типизированные пропы:
<Box p={4} bgColor="blue-500" color="white" borderRadius={8}>
Hello World
</Box>Значение p={4} преобразуется в padding: 1rem через систему деления на 4, создавая консистентную сетку в 4px.
Для удобства добавлены семантические компонеты: H1-H6, P, Span, Nav, Header, Footer, Link, Button и другие. Каждый рендерит соответствующий HTML-элемент с полной поддержкой TypeScript.
Для кого это решение
Библиотека подойдёт командам, которые уже используют TypeScript и хотят распространить строгую типизацию на стили. Hover-состояния, медиазапросы и тёмная тема описываются как вложенные объекты — код становится читаемее и предсказуемее.
Компромисс: меньше гибкости utility-классов взамен на типизацию и автокомплит в каждом CSS-свойстве.