Конвертер CSS в объект стиля JavaScript

Конвертер CSS в объект стиля JavaScript

Конвертер CSS в объекты стилей JavaScript преобразует объявления CSS в объекты стилей JavaScript и обратно. Независимо от того, работаете ли вы с встраиваемыми стилями React, StyleSheets React Native или библиотеками CSS-in-JS, такими как styled-components и Emotion, этот инструмент мгновенно выполняет преобразование — больше никакой ручной перезаписи camelCase.

Как использовать

Вставьте ваши объявления CSS в панель ввода. Выберите желаемый формат вывода — встраиваемый стиль React, StyleSheet React Native или шаблонный литерал styled-components. Конвертер обрабатывает каждое свойство в реальном времени: имена через дефис становятся camelCase, значения правильно заключаются в кавычки или остаются числами, а вендорные префиксы обрабатываются корректно. Вы также можете преобразовать в обратном направлении, переключившись в режим JS → CSS. Нажмите кнопку «Копировать», чтобы получить вывод.

Возможности

• Двустороннее преобразование – Преобразование CSS в объекты стилей JS или объектов JS обратно в CSS одним переключением
• Различные форматы вывода – Поддержка встраиваемых стилей React, StyleSheet React Native и шаблонных литералов styled-components/Emotion
• Умный camelCase – Корректно преобразует свойства CSS через дефис (background-color → backgroundColor)
• Обработка вендорных префиксов – Корректно преобразует свойства с префиксами -webkit-, -moz-, -ms- (например, -webkit-transform → WebkitTransform)
• Определение числовых значений – Оставляет чистые числа как числа (margin: 0 остается 0, а не «0»), заключая строковые значения в кавычки
• Оптимизировано для React Native – Удаляет единицы px и преобразует в числа при таргетинге на React Native
• Обработка в реальном времени – Преобразование происходит мгновенно по мере ввода
• Копирование в один клик – Скопируйте преобразованный вывод в буфер обмена