Перейти к содержимому
Numio

Конвертер CSS в объекты JavaScript — Numio

Преобразует обычный CSS в JavaScript-объект (CSS-in-JS) с помощью postcss-js. Имена свойств переводятся в camelCase, селекторы и at-правила становятся ключами, а свойство, повторённое в одном правиле, превращается в массив значений.

Перенос стилей из файла .css в объект для styled-system, JSS, Emotion или Radium без ручного переписывания каждого свойства.

CSS

JavaScript Object

Когда пригодится

  • Перенос стилей из файла .css в объект для styled-system, JSS, Emotion или Radium без ручного переписывания каждого свойства.
  • Превращение фрагмента CSS, скопированного из дизайн-инструмента или DevTools браузера, в объект для inline-стиля или prop style.

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

  1. Вставьте CSS в редактор CSS или перетащите на него файл .css.
  2. Посмотрите результат на панели JavaScript Object: он присваивается `const converted` и форматируется Prettier (без точек с запятой).
  3. Скопируйте объект, переименуйте `converted` и возьмите нужные ключи-селекторы. Настроек на этой странице нет.

CSS

.card {
  display: flex;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.card:hover .title {
  color: tomato;
}

@media (max-width: 600px) {
  .card { flex-direction: column; }
}

JavaScript-объект

const converted = {
  ".card": {
    display: "flex",
    backgroundColor: "#fff",
    WebkitBoxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
    margin: "0 auto",
  },
  ".card:hover .title": { color: "tomato" },
  "@media (max-width: 600px)": { ".card": { flexDirection: "column" } },
}

Подробности и ограничения

Преобразование выполняется в Web Worker в вашем браузере (парсинг PostCSS + objectify из postcss-js); CSS не отправляется на сервер.

Свойства с вендорными префиксами сохраняют префикс в PascalCase (например, -webkit-box-shadow становится WebkitBoxShadow). Пользовательские свойства вроде --main-color сохраняют исходное имя.

Значения остаются строками, кроме числовых свойств без единиц, таких как z-index, — они становятся числами. Комментарии удаляются.

Результат не готов для React Native: селекторы, блоки :hover и @media остаются вложенными ключами, а сокращённые значения не раскрываются.

FAQ

Что будет, если один и тот же селектор встречается дважды?

Правила с одинаковым селектором объединяются в один ключ. Если одно свойство объявлено дважды, например color: red !important; color: blue, ключ содержит массив: ["red !important", "blue"].

Поддерживаются ли @media-запросы и вложенные селекторы?

Да. Блок @media становится ключом вида "@media (max-width: 600px)", значением которого является объект с правилами внутри него. Селекторы потомков и псевдоселекторы остаются цельными строковыми ключами.

Почему появляется ошибка "Unclosed block"?

Входные данные должны быть валидным CSS. PostCSS останавливается на синтаксических ошибках, например на пропущенной закрывающей скобке, и сообщает строку и столбец; синтаксис Sass или Less (переменные, вложенность) здесь не компилируется.

Спецификации и справка