Convertisseur d'objets CSS en JS

Convertissez les déclarations CSS en un objet de style en ligne React/JS, et inversement.

Entrée

DirectionValeurs sans unité sous forme de nombresCitations

Sortie

Convertisseur d'objets CSS en JS

Collez un bloc de déclarations CSS et récupérez un objet de style JavaScript, prêt à être déposé dans l'accessoire de style d'un composant React ou Preact. Chaque propriété kebab-case devient camelCase — background-color se transforme en backgroundColor, font-size en fontSize — et le tout est imprimé comme un objet littéral valide avec une indentation à deux espaces. Vous pouvez coller des déclarations nues ou une règle complète avec un sélecteur et des accolades ; le sélecteur d'encapsulation est supprimé pour vous, donc copier une règle directement à partir de DevTools fonctionne tout simplement.

Le convertisseur va dans les deux sens. Changez la direction vers objet JS → CSS et un objet de style redevient un prop: value ordinaire; lignes, avec camelCase à nouveau coupé et les guillemets de chaîne supprimés. Cela facilite le déplacement d'un style hors d'un composant vers une feuille de style, ou la vérification du rendu réel d'un ensemble de styles en ligne. Les propriétés personnalisées telles que --brand-color conservent leurs tirets de début et restent citées, car ce ne sont pas des identifiants valides, et les préfixes des fournisseurs sont traités comme React les attend : -webkit-box-shadow devient WebkitBoxShadow, tandis que les préfixes -ms- utilisent la forme msFlex minuscule.

Par défaut, chaque valeur est émise sous forme de chaîne, ce qui constitue le choix sûr : elle conserve intactes les unités, les couleurs et des éléments tels que la hauteur de ligne : 1,5. Activez « Valeurs sans unité sous forme de nombres » et les nombres purs tels que l'index z ou l'opacité sont écrits sous forme de nombres, correspondant à la façon dont vous les saisissez habituellement à la main. Vous pouvez également choisir des guillemets simples ou doubles pour correspondre au formateur de votre projet.

Tout fonctionne dans votre navigateur. Le CSS que vous collez n'est jamais téléchargé, donc le collage de styles à partir d'un système de conception privé ou d'une bibliothèque de composants interne reste sur votre ordinateur. Copiez le résultat, téléchargez-le sous forme de fichier ou envoyez-le vers un autre outil.

FAQ

Gère-t-il une règle CSS complète avec un sélecteur ?

Oui. Coller `.button { couleur : rouge ; remplissage : 8 px ; }` et le sélecteur et les accolades sont supprimés, ne laissant que l'objet de style. Les déclarations nues sans accolades fonctionnent également.

Pourquoi mes chiffres sont-ils entre guillemets ?

Par défaut, chaque valeur est une chaîne, donc les unités et les zéros non significatifs survivent. Activez « Valeurs sans unité sous forme de nombres » et les nombres purs comme z-index : 10 ou opacité : 0,5 sont émis sous forme de nombres à la place.

Comment les préfixes des fournisseurs et les propriétés personnalisées sont-ils convertis ?

Les préfixes des fournisseurs suivent la convention de React : -webkit-transition devient WebkitTransition et les préfixes -ms- utilisent un ms minuscule. Les propriétés personnalisées telles que --brand-color conservent leurs tirets et restent citées comme clés d'objet valides.

Peut-il reconvertir un objet de style JS en CSS ?

Oui. Changez la direction vers objet JS → CSS. Les clés camelCase sont coupées, les guillemets de chaîne sont supprimés et chaque propriété est écrite comme un accessoire normal : value; doubler.

Mon CSS est-il téléchargé quelque part ?

Non. La conversion s'exécute entièrement dans votre navigateur sans traitement serveur, de sorte que les styles d'un projet privé ou interne ne quittent jamais votre appareil.

Convertisseur d'objets CSS en JS

Outils connexes

Convertisseur d'objets CSS en JS

FAQ