Convertisseur CSS vers JavaScript, gratuit

Comment utiliser

Cet outil analyse les propriétés CSS et les convertit en syntaxe d'objet JavaScript. Les noms de propriétés en kebab-case (comme background-color) sont automatiquement convertis en camelCase (backgroundColor). Les valeurs CSS sont préservées telles quelles. Vous pouvez saisir des propriétés individuelles ou une règle CSS complète avec sélecteurs.

Le mouvement CSS-in-JS, en bref

Pourquoi ce problème de conversion existe-t-il ? Parce qu’en 2014 une génération de développeurs frontend a décidé que CSS dans des feuilles de style séparées avait échoué à grande échelle. Le moment fondateur fut la conférence de Christopher « Vjeux » Chedeau « CSS in JS » à NationJS le 15 novembre 2014: un ingénieur Facebook arguant que la cascade globale de CSS, l’absence de tracking de dépendances et l’accumulation de code mort en faisaient la pire partie des grandes web apps. La conférence a allumé un mouvement. JSS (Oleg Slobodskoi) a livré fin 2014 comme première bibliothèque CSS-in-JS d’usage général. CSS Modules est arrivé en 2015 comme approche au scoping au moment du build. styled-components (Glen Maddern + Max Stoiber) a livré en octobre 2016, popularisant l’API tagged-template-literal où l’on écrit le CSS dans des backticks attachés à une définition de composant. Emotion (Kye Hohenberger) a livré le 10 juillet 2017 avec à la fois l’API style styled-components et un prop css plus flexible qui acceptait directement des objets JavaScript, exactement le format que cet outil produit. Stitches (Modulz/Pedro Duarte) a livré en 2020 avec une API basée sur des variants mais est devenu non maintenu mi-2023 et a été formellement archivé en avril 2026.

Le pendule est revenu en arrière. « Why We're Breaking Up with CSS-in-JS » de Sam Magura le 16 octobre 2022 (écrit par un mainteneur d’Emotion) a été le point d’inflexion. L’argument technique : CSS-in-JS au runtime ralentit mesurablement les renders React (le propre benchmark de Magura sur Spot Member Browser a fait passer le temps de render médian de 54,3 ms à 27,7 ms après migration depuis Emotion, soit environ 2× plus rapide) ; les bundles sont plus gros ; les coûts de sérialisation s’accumulent. L’argument architectural : React Server Components (stabilisés par Next.js 13.4 le 4 mai 2023) ne peuvent pas utiliser React Context, dont la plupart des bibliothèques CSS-in-JS dépendent pour le theming. La vague de remplacement : Tailwind CSS (Adam Wathan, avec la v4 lancée le 22 janvier 2025) ; Vanilla Extract (Mark Dalgleish chez Seek, 26 mars 2021) pour CSS-in-TypeScript au moment du build ; CSS Modules pour des noms de classe scopés sans coût de runtime ; et la cohorte « compile-to-static » survivante citée nommément dans le post de Magura : vanilla-extract, Linaria, Compiled, StyleX et Pigment CSS. JSS lui-même a été déprécié le 14 mai 2024 ; styled-components est passé en mode maintenance le 17 mars 2025. CSS-in-JS au runtime n’est plus le défaut pour les nouveaux projets React en 2026, mais une gigantesque base de code de styled-components et Emotion existants persiste, et convertir CSS vers la forme objet de ces bibliothèques reste la réalité quotidienne pour beaucoup d’équipes.

Les surfaces d’API des bibliothèques majeures

React inline style (le prop style) est la baseline universelle, tout composant React accepte un objet style dont les clés sont des propriétés CSS en camelCase. Pas de support pour les pseudo-classes (:hover), media queries, ou !important ; c’est de l’« inline style » au sens de l’ancien attribut HTML style="...", juste avec un objet JavaScript au lieu d’une chaîne. La sortie de cet outil tombe directement dans style={...}. styled-components prend des tagged template literals contenant de vraies chaînes CSS : const Button = styled.div`background: red; padding: 10px;`. Le CSS est du vrai CSS, kebab-case et tout, vous n’avez généralement pas besoin de ce convertisseur pour styled-components à moins de migrer d’inline styles vers un composant styled. Emotion supporte les deux APIs : l’API styled (template literals comme styled-components) et le prop css avec un objet JavaScript (camelCase, exactement le format que cet outil produit). Pour le prop css d’Emotion, la sortie de ce convertisseur est directement utilisable. JSS utilise un format objet similaire avec quelques fonctionnalités supplémentaires (theming, noms de classe générés automatiquement) mais la syntaxe de propriété camelCase de base est la même. Le binding de style de Vue (:style="...") accepte la même syntaxe d’objet camelCase que l’inline style de React. Vanilla Extract utilise une forme objet typée plus stricte avec des fonctions wrapper style({ ... }) explicites ; l’objet camelCase intérieur a la même forme.

Cas limites et pièges

• L’exception du préfixe vendeur ms. La plupart des préfixes vendeurs se mettent en majuscule après camelCase : -webkit-transform → WebkitTransform, -moz-appearance → MozAppearance, -o-transition → OTransition. Mais le préfixe de Microsoft est l’exception : -ms-flex → msFlex avec un m minuscule, parce que c’est ainsi que la source React DOM le définit. C’est le piège CSS-to-JS le plus googlé.
• Propriétés sans unités. React DOM maintient une liste de propriétés où les nombres nus sont valides (z-index, opacity, line-height, flex-grow, flex-shrink, order, columns et plusieurs autres). Pour celles-ci, zIndex: 5 est correct. Pour tout le reste, les valeurs dimensionnelles ont besoin d’unités sous forme de chaînes : width: '100px', pas width: 100 (que React traitera comme '100px' par défaut silencieux, pratique mais lossy si vous vouliez % ou vh).
• calc(), var() et propriétés personnalisées CSS. Celles-ci fonctionnent comme valeurs chaîne : width: 'calc(100% - 20px)', color: 'var(--brand-color)'. Les propriétés personnalisées (variables CSS) ont besoin de guillemets autour du --name : '--my-var': 'red'.
• !important ne fonctionne pas dans les inline styles React. Le prop style de React ignore silencieusement les annotations !important. Si vous devez surcharger une règle de plus haute spécificité, utilisez une vraie feuille de style (CSS Modules, Tailwind, styled-components), les inline styles ne sont pas le bon outil.
• Contenu chaîne vide. content: '' nécessite une attention au quoting en JavaScript : content: "''": une valeur chaîne vide, mais la valeur elle-même est un littéral chaîne CSS vide qui a besoin que les apostrophes environnantes soient préservées.
• Règles imbriquées et pseudo-sélecteurs. La conversion CSS-to-JS simple produit un objet plat, les états hover, media queries et styles de pseudo-élément ont besoin de la propre structure de la bibliothèque de destination. Le prop css d’Emotion supporte les objets imbriqués ('&:hover': { background: 'red' }) ; l’inline style de React non.
• Propriétés raccourcies. margin: 10px 20px 10px 20px reste comme une chaîne en forme JS : margin: '10px 20px 10px 20px'. React permet le raccourci ; certaines bibliothèques CSS-in-JS avertissent que cela peut interagir de façon inattendue avec les variantes longhand.

Cas d’usage courants

• Inline styles React. Convertir des snippets CSS d’un designer ou d’une feuille de style en format objet style={...} pour des composants qui n’ont pas de feuille de style associée.
• Prop css Emotion. Migrer d’un fichier CSS séparé vers le prop css à syntaxe objet d’Emotion, où camelCase + forme JS-objet est l’entrée native.
• Animations JavaScript. GSAP, anime.js, Motion One et Framer Motion acceptent tous des objets style comme cibles de keyframes. Le format camelCase est requis là aussi.
• Tokens de design system. Convertir des valeurs de propriété personnalisée CSS en constantes JavaScript à utiliser dans des systèmes de design-tokens (Style Dictionary, Theo, etc.) où TypeScript ou JS est la source de vérité canonique.
• Migration JSS. Material UI v4 et antérieures utilisaient JSS lourdement ; convertir des prototypes CSS en forme objet JSS est le point de friction. Notez que Material UI v5+ est passé à Emotion par défaut ; c’est plutôt un cas d’usage legacy.
• Binding de style inline Vue. :style="{...}" dans les templates Vue utilise le même format objet camelCase que le prop style de React ; la sortie de ce convertisseur est directement utilisable dans les templates Vue aussi.

Périmètre honnête : ce que cet outil fait et ne fait pas

Cet outil convertit des déclarations CSS en syntaxe objet JavaScript avec clés camelCase et valeurs chaîne correctement quotées. Il gère les règles de mise en majuscule des préfixes vendeurs (y compris l’exception minuscule ms). Il ne traduit pas vers l’API d’une bibliothèque spécifique au-delà de produire l’objet camelCase, vous devez encore savoir si votre codebase veut l’objet à l’intérieur de styled.div`...`, à l’intérieur d’un appel css Emotion, à l’intérieur d’un prop style React, ou à l’intérieur d’un binding :style Vue. Le choix dépend de votre bibliothèque, pas du convertisseur. L’outil ne gère pas non plus les règles imbriquées et pseudo-sélecteurs automatiquement, la syntaxe d’objet imbriqué d’Emotion ('&:hover': {...}) et l’imbrication de template-literal de styled-components fonctionnent différemment et nécessitent une structuration manuelle. Pour une migration complète d’un fichier CSS vers une bibliothèque CSS-in-JS, attendez-vous à faire de la restructuration au-delà de la conversion propriété-par-propriété que cet outil fournit.

Confidentialité : pourquoi le tout-navigateur compte ici

CSS contient rarement des secrets, mais des feuilles de style propriétaires révèlent des informations sur la taxonomie de classes interne d’un site, ses tokens de design system, et parfois son hypothèse de test A/B à travers des sélecteurs spécifiques à l’expérience. Les outils de conversion côté serveur exigent de téléverser le CSS, qui reste dans leurs logs. Pour les styles de produit internes, les fichiers source-de-vérité de design system, ou le branding en cours, la conversion tout-navigateur garde tout local. Cet outil exécute toute la transformation dans votre navigateur, vérifiez dans l’onglet Réseau des DevTools pendant que vous cliquez sur Convertir, ou mettez la page hors ligne (mode avion) et le convertisseur fonctionne toujours.

Questions fréquentes

Comment les propriétés CSS sont-elles converties en camelCase ?

Chaque tiret dans une propriété CSS kebab-case est supprimé et la lettre suivante est mise en majuscule : background-color → backgroundColor, border-radius → borderRadius, margin-top → marginTop. Les propriétés à préfixe vendeur suivent la même règle avec mise en majuscule : -webkit-transform → WebkitTransform (W majuscule), -moz-appearance → MozAppearance. L’exception fameuse est le préfixe Microsoft : -ms-flex → msFlex avec un m minuscule, parce que c’est ainsi que React DOM le définit.

Cela fonctionne-t-il pour les media queries et pseudo-classes ?

Les objets style JavaScript simples (le prop style React, le :style Vue) ne supportent pas les media queries ou pseudo-classes, ce sont des concepts de feuille de style. Les bibliothèques CSS-in-JS qui acceptent la syntaxe objet (prop css d’Emotion, JSS) les supportent via des objets imbriqués : '&:hover': { background: 'red' }, '@media (min-width: 768px)': { padding: '20px' }. La documentation de la bibliothèque de destination montrera la structure d’imbrication exacte. Cet outil produit l’objet plat ; vous l’enveloppez dans la syntaxe d’imbrication de la bibliothèque manuellement.

Pourquoi !important ne fonctionne-t-il pas dans les inline styles React ?

Le prop style de React ignore silencieusement les annotations !important: elles ne font pas partie de la grammaire des littéraux objet JS et le renderer de React ne les traduit pas. Si vous devez surcharger une règle de plus haute spécificité, utilisez une vraie feuille de style (CSS Modules, Tailwind, styled-components, CSS pur). Le mécanisme d’inline-style de React est pour des styles ponctuels ou dynamiques où la spécificité n’est pas une préoccupation ; !important appartient à une feuille de style.

Devrais-je encore utiliser CSS-in-JS en 2026 ?

Pour les nouveaux projets React, le défaut actuel est « non, utilisez Tailwind, CSS Modules ou Vanilla Extract. » L’article de Sam Magura d’octobre 2022 depuis l’intérieur de l’équipe Emotion (combiné à l’incompatibilité de Context des React Server Components) a poussé l’écosystème vers des solutions build-time uniquement. styled-components est passé en mode maintenance le 17 mars 2025 ; JSS a été déprécié le 14 mai 2024. Pour les codebases existantes avec un investissement significatif en styled-components ou Emotion, pas d’urgence à migrer, les deux bibliothèques fonctionnent encore, et le coût de runtime est le genre de chose que vous optimisez quand cela apparaît dans le profilage. Pour un projet tout neuf en 2026 : Tailwind v4 (sorti le 22 janvier 2025) est le choix le plus populaire ; Vanilla Extract pour les projets qui veulent un typage TypeScript strict sur les styles ; CSS Modules pour les projets qui veulent une abstraction minimale.

Puis-je convertir des tokens de design-system de cette façon ?

Pour un snippet ponctuel, oui. Pour un design system complet (typiquement des dizaines ou centaines de tokens organisés par couleur, espacement, typographie, motion) utilisez un outil dédié comme Style Dictionary ou Theo, qui prennent tous deux une source de vérité unique (JSON, YAML ou JS) et produisent vers de multiples destinations (propriétés personnalisées CSS, constantes JS, iOS Asset Catalogs, Android XML, etc.). L’avantage d’un vrai outil de design-token est la cohérence à travers les plateformes ; ce convertisseur est pour le cas où vous avez un snippet CSS en main et voulez la forme JS tout de suite.

Mon CSS est-il envoyé quelque part ?

Non. La conversion s’exécute entièrement dans votre navigateur via JavaScript. Le CSS que vous collez ne traverse jamais le réseau, vérifiez dans l’onglet Réseau des DevTools pendant que vous cliquez sur Convertir, ou mettez la page hors ligne après son chargement et confirmez que l’outil fonctionne toujours. Sûr pour les feuilles de style propriétaires, les fichiers source-de-vérité de design system, ou tout CSS qui révèle des taxonomies de classes internes que vous ne voudriez pas voir copiées sur le disque dur d’un inconnu.

Outils associés