Конвертер объектов CSS в JS

Конвертер объектов CSS в JS

Вставьте блок объявлений CSS и получите обратно объект стиля JavaScript, готовый для размещения в свойстве стиля компонента React или Preact. Каждое свойство kebab-case становится CamelCase — фоновый цвет превращается в фоновый цвет, а шрифт — в FontSize — и все это печатается как действительный литерал объекта с отступом в два пробела. Вы можете вставить простые объявления или полное правило с селектором и фигурными скобками; селектор упаковки удален, поэтому копирование правила прямо из DevTools вполне работает.

Преобразователь работает в обе стороны. Переключите направление на объект JS → CSS и объект стиля снова превратится в обычный prop: value; строки, снова расставлены дефисы в CamelCase и удалены кавычки. Это позволяет легко переместить стиль из компонента в таблицу стилей или проверить, как на самом деле отображается набор встроенных стилей. Пользовательские свойства, такие как --brand-color, сохраняют ведущие дефисы и остаются в кавычках, поскольку они не являются допустимыми идентификаторами, а префиксы поставщиков обрабатываются так, как этого ожидает React: -webkit-box-shadow становится WebkitBoxShadow, а префиксы -ms- используют строчную форму msFlex.

По умолчанию каждое значение выдается в виде строки, что является безопасным выбором — оно сохраняет единицы измерения, цвета и такие вещи, как line-height: 1.5, без изменений. Включите «Безразмерные значения как числа», и вместо этого чистые числа, такие как z-индекс или непрозрачность, записываются как числа, что соответствует тому, как вы обычно вводите их вручную. Вы также можете выбрать одинарные или двойные кавычки в соответствии с форматером вашего проекта.

Все работает в вашем браузере. Вставляемый вами CSS никогда не загружается, поэтому вставленные стили из частной системы дизайна или внутренней библиотеки компонентов остаются на вашем компьютере. Скопируйте результат, загрузите его в виде файла или отправьте в другой инструмент.

FAQ