Преобразование объектов стилей в шаблонные строки — Numio

Переписывает объектные стили в css({...}) и styled.x({...}) в теговые шаблонные литералы для styled-components, Emotion или Linaria. Ключи camelCase становятся kebab-case, числа получают px, кроме свойств без единиц, а JS-выражения становятся интерполяциями ${}.

Миграция объектных стилей Emotion или Glamor на styled-components или Linaria, которые ожидают CSS в шаблонных литералах.

Object Styles

Template Literal

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

Миграция объектных стилей Emotion или Glamor на styled-components или Linaria, которые ожидают CSS в шаблонных литералах.
Преобразование определения styled(Component)({...}) в шаблонный синтаксис, чтобы читать и править его как обычный CSS.

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

Вставьте в редактор Object Styles код JavaScript или TypeScript (допускаются JSX/TSX), который вызывает css({...}), styled.tag({...}) или styled(Component)({...}).
В Settings оставьте включёнными "Transpile css tags" и "Transpile styled tags" или отключите один из параметров, чтобы не изменять эти вызовы; когда один из них выключен, показывается предупреждающий баннер.
Скопируйте панель Template Literal. Код вне преобразованных вызовов сохраняется, но переформатируется Prettier.

Объектные стили (JavaScript или TypeScript)

const Button = styled.button({
  padding: 8,
  fontSize: '14px',
  backgroundColor: theme.primary,
  '&:hover': {
    opacity: 0.8,
  },
})

const card = css({
  display: 'flex',
  marginTop: 16,
})

Теговый шаблонный литерал

const Button = styled.button`
  padding: 8px;
  font-size: 14px;
  background-color: ${theme.primary};

  &:hover {
    opacity: 0.8;
  }
`
const card = css`
  display: flex;
  margin-top: 16px;
`

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

Преобразование выполняется в браузере: Web Worker применяет babel-plugin-object-styles-to-template через Babel standalone (разбирая синтаксис TypeScript, если обычный JavaScript не парсится), а результат форматируется Prettier без точек с запятой.

Преобразуются только вызовы с единственным аргументом-простым объектом. styled("div")(obj, props => ...) с функцией или несколькими аргументами, а также массивы css([...]) остаются без изменений.

Свойства без единиц, такие как zIndex, lineHeight и opacity, сохраняют голые числа; остальные числа получают px. Значения-массивы не раскрываются и становятся интерполяцией вида ${[0, 4]}.

Prettier также нормализует незатронутый код, например одинарные кавычки заменяются двойными.

FAQ

Какие имена вызовов распознаются?

Плагин преобразует css(...) и вызовы styled: styled.button(...), styled("div")(...) и styled(Link)(...). Другие функции с объектными аргументами, например someFn({ color: 'red' }), не изменяются.

Как обрабатываются переменные и значения темы?

Любое нелитеральное значение, например theme.primary или colors.white, остаётся JavaScript-выражением внутри ${...} в шаблоне, поэтому по-прежнему вычисляется во время выполнения.

Поддерживаются ли вложенные селекторы вроде &:hover?

Да. Вложенный объект под ключом вроде '&:hover' становится вложенным блоком в шаблоне, отделённым от объявлений родителя пустой строкой.

Работает ли это с TypeScript?

Да. Если код не парсится как JavaScript, он повторно разбирается с синтаксисом TypeScript в Babel. Типы сохраняются: интерфейсы остаются, а styled.button<Props>({...}) становится styled.button<Props>`...`.

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

babel-plugin-object-styles-to-template on GitHub