Конвертер об'єктів CSS в JS
Перетворюйте оголошення CSS на вбудований об’єкт React/JS і назад.
Конвертер об'єктів CSS в JS
Вставте блок декларацій CSS і поверніть об’єкт стилю JavaScript, готовий до розміщення в атрибуті стилю компонента React або Preact. Кожна властивість kebab-case стає camelCase — колір фону перетворюється на колір фону, розмір шрифту — на fontSize — і все це друкується як дійсний літерал об’єкта з двома пробілами. Ви можете вставити голі оголошення або повне правило з селектором і дужками; селектор обтікання видалено для вас, тому копіювання правила прямо з DevTools просто працює.
Конвертер працює в обох напрямках. Змініть напрямок на об’єкт JS → CSS, і об’єкт стилю знову перетвориться на звичайний prop: value; рядків, де верблюжий регістр знову поставлено дефісом і видалено лапки. Це дозволяє легко перемістити стиль із компонента в таблицю стилів або перевірити, як насправді відображається набір вбудованих стилів. Користувальницькі властивості, як-от --brand-color, зберігають свої початкові тире та залишаються в лапках, оскільки вони не є дійсними ідентифікаторами, а префікси постачальників обробляються так, як цього очікує React: -webkit-box-shadow стає WebkitBoxShadow, тоді як префікси -ms- використовують форму msFlex у нижньому регістрі.
За замовчуванням кожне значення видається як рядок, що є безпечним вибором — він зберігає недоторканими одиниці, кольори та такі речі, як line-height: 1,5. Увімкніть «Безодиничні значення як числа», і чисті числа, як-от z-індекс або непрозорість, будуть записані як числа відповідно до того, як ви зазвичай вводите їх вручну. Ви також можете вибрати одинарні або подвійні лапки відповідно до засобу форматування вашого проекту.
Все працює у вашому браузері. CSS, який ви вставляєте, ніколи не завантажується, тому вставлені стилі з приватної системи дизайну або внутрішньої бібліотеки компонентів залишаються на вашому комп’ютері. Скопіюйте результат, завантажте його як файл або надішліть в інший інструмент.