MistCSS

MistCSS представляет собой инструмент для генерации кода, который позволяет писать компоненты React, используя только CSS (JS из CSS). Он направлен на улучшение качества кода за счёт автоматической типизации и уменьшения вероятности ошибок, а также предоставляет простой и функционально чистый дизайн компонентов. В отличие от некоторых инструментов CSS-in-JS, MistCSS не требует расширений редактора кода и не накладывает ограничений на API, что обеспечивает полный доступ к возможностям CSS без необходимости изучения дополнительных абстракций​.

Для использования MistCSS достаточно установить его через npm или любой другой менеджер пакетов и написать стили для компонентов в файле с расширением .mist.css, после чего выполнить команду mistcss, которая сгенерирует соответствующие React компоненты. Эти компоненты можно использовать в проекте React как обычные компоненты, при этом MistCSS обеспечивает нулевое время выполнения, не добавляя накладных расходов на проект​.

MistCSS поддерживает такие фреймворки, как Next.js, Remix и TailwindCSS, и планируется поддержка дополнительных фреймворков. Это новый проект, поэтому ожидайте изменений до выпуска версии 1.0.

https://typicode.github.io/mistcss/