Convertir des objets de style en littéraux de gabarit — Numio

Réécrit les styles objet css({...}) et styled.x({...}) en tagged template literals pour styled-components, Emotion ou Linaria. Les clés camelCase passent en kebab-case, les nombres reçoivent px sauf pour les propriétés sans unité, et les expressions JS deviennent des interpolations ${}.

Migrer des styles objet Emotion ou Glamor vers styled-components ou Linaria, qui attendent du CSS en template literal.

Object Styles

Template Literal

Quand l’utiliser

Migrer des styles objet Emotion ou Glamor vers styled-components ou Linaria, qui attendent du CSS en template literal.
Convertir une définition styled(Component)({...}) en syntaxe de template pour la lire et la modifier comme du CSS normal.

Mode d’emploi

Collez du JavaScript ou du TypeScript (JSX/TSX acceptés) qui appelle css({...}), styled.tag({...}) ou styled(Component)({...}) dans l’éditeur Object Styles.
Dans Paramètres, laissez "Transpile css tags" et "Transpile styled tags" activés, ou désactivez-en un pour laisser ces appels inchangés ; un bandeau d’avertissement s’affiche quand l’un d’eux est désactivé.
Copiez le panneau Template Literal. Le code en dehors des appels convertis est conservé, mais reformaté par Prettier.

Styles objet (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;
`

Détails et limites

La conversion s’exécute dans votre navigateur : un Web Worker applique babel-plugin-object-styles-to-template avec Babel standalone (en analysant avec la syntaxe TypeScript si le JavaScript simple échoue), et le résultat est formaté par Prettier sans points-virgules.

Seuls les appels avec un unique argument objet simple sont convertis. styled("div")(obj, props => ...) avec une fonction ou plusieurs arguments, ainsi que les tableaux css([...]), restent tels quels.

Les propriétés sans unité comme zIndex, lineHeight et opacity gardent des nombres nus ; les autres nombres reçoivent px. Les valeurs de tableau ne sont pas développées et deviennent une interpolation comme ${[0, 4]}.

Prettier normalise aussi le code non modifié ; par exemple, les guillemets simples deviennent des guillemets doubles.

FAQ

Quels noms d’appel sont reconnus ?

Le plugin transforme css(...) et les appels styled : styled.button(...), styled("div")(...) et styled(Link)(...). Les autres fonctions avec des arguments objet, comme someFn({ color: 'red' }), ne sont pas modifiées.

Comment les variables et les valeurs du thème sont-elles gérées ?

Toute valeur non littérale, comme theme.primary ou colors.white, reste une expression JavaScript dans ${...} dans le template ; elle est donc toujours résolue à l’exécution.

Les sélecteurs imbriqués comme &:hover sont-ils pris en charge ?

Oui. Un objet imbriqué sous une clé comme '&:hover' devient un bloc imbriqué dans le template, séparé des déclarations parentes par une ligne vide.

Est-ce que cela fonctionne avec TypeScript ?

Oui. Si le code ne s’analyse pas en JavaScript, il est réanalysé avec la syntaxe TypeScript de Babel. Les types sont conservés : les interfaces restent, et styled.button<Props>({...}) devient styled.button<Props>`...`.

Spécifications et références

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