À propos de cet outil
L'outil CSS vers objet de style JS convertit un bloc de CSS en un objet JavaScript adapté aux styles en ligne React ou aux bibliothèques CSS-in-JS comme styled-components et Emotion. Il analyse les déclarations localement dans votre navigateur — rien n'est téléversé — de sorte que migrer une feuille de style vers des styles en ligne se fait en un copier-coller.
Chaque nom de propriété est mis en camelCase : background-color devient backgroundColor, z-index devient zIndex. Les préfixes vendeur suivent les règles de React — un -ms- initial est mis en minuscule en ms (msFilter), tandis que -webkit-, -moz- et -o- prennent une majuscule en Webkit, Moz et O (WebkitBoxShadow). Les propriétés personnalisées (--brand-color) sont conservées textuellement comme clés entre guillemets. Les valeurs sont émises en chaînes par défaut, préservant les unités et !important ; une bascule numérique laisse les entiers et décimales nus devenir des nombres sans guillemets. Les clés qui sont des identifiants JavaScript valides sont laissées sans guillemets ; les autres sont mises entre guillemets automatiquement.
Quand l'entrée est un bloc de déclarations simple (sans sélecteurs), il produit un objet plat unique, parfait pour une prop style React. Quand l'entrée contient des règles complètes avec sélecteurs, le mode styled/Emotion émet un objet imbriqué indexé par chaque chaîne de sélecteur — la syntaxe d'objet que ces bibliothèques acceptent. Vous contrôlez le nom du const de sortie, et le tout est écrit sous const styles = { ... }; prêt à coller.