Converter objetos de estilos em literais de modelo — Numio

Reescreve estilos de objeto css({...}) e styled.x({...}) como tagged template literals para styled-components, Emotion ou Linaria. Chaves em camelCase viram kebab-case, números recebem px exceto em propriedades sem unidade, e expressões JS viram interpolações ${}.

Migrar estilos de objeto do Emotion ou Glamor para styled-components ou Linaria, que esperam CSS em template literal.

Object Styles

Template Literal

Quando usar

Migrar estilos de objeto do Emotion ou Glamor para styled-components ou Linaria, que esperam CSS em template literal.
Converter uma definição styled(Component)({...}) para sintaxe de template, para lê-la e editá-la como CSS normal.

Como usar

Cole JavaScript ou TypeScript (JSX/TSX permitidos) que chame css({...}), styled.tag({...}) ou styled(Component)({...}) no editor Object Styles.
Em Configurações, mantenha "Transpile css tags" e "Transpile styled tags" ativados, ou desative um deles para deixar essas chamadas inalteradas; um banner de aviso aparece quando um deles está desativado.
Copie o painel Template Literal. O código fora das chamadas convertidas é mantido, mas reformatado pelo Prettier.

Estilos de objeto (JavaScript ou TypeScript)

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

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

Tagged template literal

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;
`

Detalhes e limitações

A conversão roda no seu navegador: um Web Worker aplica babel-plugin-object-styles-to-template com o Babel standalone (fazendo o parse com a sintaxe TypeScript quando o JavaScript puro falha), e o resultado é formatado pelo Prettier sem ponto e vírgula.

Só são convertidas chamadas com um único argumento de objeto simples. styled("div")(obj, props => ...) com uma função ou vários argumentos, e arrays css([...]), ficam como estão.

Propriedades sem unidade como zIndex, lineHeight e opacity mantêm números sem unidade; os demais números recebem px. Valores de array não são expandidos e viram uma interpolação como ${[0, 4]}.

O Prettier também normaliza o código não alterado; por exemplo, aspas simples viram aspas duplas.

FAQ

Quais nomes de chamada são reconhecidos?

O plugin transforma css(...) e chamadas styled: styled.button(...), styled("div")(...) e styled(Link)(...). Outras funções com argumentos de objeto, como someFn({ color: 'red' }), não são alteradas.

Como variáveis e valores de tema são tratados?

Qualquer valor não literal, como theme.primary ou colors.white, é mantido como expressão JavaScript dentro de ${...} no template, então continua sendo resolvido em tempo de execução.

Seletores aninhados como &:hover são suportados?

Sim. Um objeto aninhado sob uma chave como '&:hover' vira um bloco aninhado no template, separado das declarações do pai por uma linha em branco.

Funciona com TypeScript?

Sim. Se o código não puder ser parseado como JavaScript, ele é parseado de novo com a sintaxe TypeScript do Babel. Os tipos são mantidos: interfaces permanecem, e styled.button<Props>({...}) vira styled.button<Props>`...`.

Especificações e referências

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