Про цей інструмент
Інструмент CSS у JS-об'єкт стилів перетворює блок CSS на JavaScript-об'єкт, придатний для інлайн-стилів React чи бібліотек CSS-in-JS на кшталт styled-components і Emotion. Він розбирає оголошення локально у вашому браузері — нічого не завантажується — тож перенесення таблиці стилів на інлайн-стилі — це справа вставлення й копіювання.
Кожна назва властивості перетворюється на camelCase: background-color стає backgroundColor, z-index стає zIndex. Вендорні префікси слідують правилам React — початковий -ms- переходить у нижній регістр як ms (msFilter), тоді як -webkit-, -moz- і -o- переходять у Webkit, Moz і O з великої літери (WebkitBoxShadow). Кастомні властивості (--brand-color) зберігаються дослівно як ключі в лапках. Значення видаються як рядки за замовчуванням, зберігаючи одиниці та !important; числовий перемикач дозволяє голим цілим і десятковим ставати числами без лапок натомість. Ключі, що є коректними ідентифікаторами JavaScript, лишаються без лапок; решта беруться в лапки автоматично.
Коли ввід — це звичайний блок оголошень (без селекторів), він виробляє один плоский об'єкт, ідеальний для пропа style у React. Коли ввід містить повні правила з селекторами, режим styled/Emotion видає вкладений об'єкт із ключами за кожним рядком селектора — об'єктний синтаксис, який приймають ці бібліотеки. Ви керуєте назвою вихідної константи, і все це записується як const styles = { ... }; готове до вставлення.