Convertir objetos de estilos a literales de plantilla — Numio

Reescribe estilos de objeto css({...}) y styled.x({...}) como tagged template literals para styled-components, Emotion o Linaria. Las claves en camelCase pasan a kebab-case, los números reciben px salvo en propiedades sin unidad, y las expresiones JS pasan a interpolaciones ${}.

Migrar estilos de objeto de Emotion o Glamor a styled-components o Linaria, que esperan CSS en template literals.

Object Styles

Template Literal

Cuándo usarla

Migrar estilos de objeto de Emotion o Glamor a styled-components o Linaria, que esperan CSS en template literals.
Convertir una definición styled(Component)({...}) a sintaxis de plantilla para poder leerla y editarla como CSS normal.

Cómo usarla

Pega JavaScript o TypeScript (se admiten JSX/TSX) que llame a css({...}), styled.tag({...}) o styled(Component)({...}) en el editor Object Styles.
En Configuración, deja activados "Transpile css tags" y "Transpile styled tags", o desactiva uno para dejar esas llamadas sin cambios; cuando uno está desactivado aparece un aviso.
Copia el panel Template Literal. El código fuera de las llamadas convertidas se conserva, pero Prettier lo reformatea.

Estilos de objeto (JavaScript o 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;
`

Detalles y limitaciones

La conversión se ejecuta en tu navegador: un Web Worker aplica babel-plugin-object-styles-to-template con Babel standalone (parseando con la sintaxis de TypeScript si falla el JavaScript plano), y Prettier formatea el resultado sin punto y coma.

Solo se convierten las llamadas con un único argumento que sea un objeto plano. styled("div")(obj, props => ...) con una función o varios argumentos, y los arrays css([...]), se dejan como están.

Las propiedades sin unidad como zIndex, lineHeight y opacity conservan los números sin unidad; los demás números reciben px. Los valores de array no se expanden y pasan a una interpolación como ${[0, 4]}.

Prettier también normaliza el código no modificado; por ejemplo, las comillas simples pasan a dobles.

FAQ

¿Qué nombres de llamada se reconocen?

El plugin transforma css(...) y las llamadas styled: styled.button(...), styled("div")(...) y styled(Link)(...). Otras funciones con argumentos de objeto, como someFn({ color: 'red' }), no se modifican.

¿Cómo se manejan las variables y los valores del tema?

Cualquier valor que no sea literal, como theme.primary o colors.white, se mantiene como expresión JavaScript dentro de ${...} en la plantilla, así que se sigue resolviendo en tiempo de ejecución.

¿Se admiten selectores anidados como &:hover?

Sí. Un objeto anidado bajo una clave como '&:hover' se convierte en un bloque anidado en la plantilla, separado de las declaraciones del padre por una línea en blanco.

¿Funciona con TypeScript?

Sí. Si el código no se puede parsear como JavaScript, se vuelve a parsear con la sintaxis de TypeScript de Babel. Los tipos se conservan: las interfaces se mantienen y styled.button<Props>({...}) pasa a styled.button<Props>`...`.

Especificaciones y referencias

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