Convertir CSS en objets JavaScript — Numio
Convertit du CSS brut en objet JavaScript (CSS-in-JS) avec postcss-js. Les noms de propriétés passent en camelCase, les sélecteurs et les at-rules deviennent des clés, et une propriété répétée dans une même règle devient un tableau de valeurs.
Déplacer des styles d’un fichier .css vers un objet styled-system, JSS, Emotion ou Radium sans retaper chaque propriété.
Quand l’utiliser
- Déplacer des styles d’un fichier .css vers un objet styled-system, JSS, Emotion ou Radium sans retaper chaque propriété.
- Transformer un extrait CSS copié depuis un outil de design ou les DevTools du navigateur en objet pour un style inline ou une prop style.
Mode d’emploi
- Collez du CSS dans l’éditeur CSS ou déposez-y un fichier .css.
- Lisez le résultat dans le panneau JavaScript Object ; il est affecté à `const converted` et formaté avec Prettier (sans points-virgules).
- Copiez l’objet, renommez `converted` et gardez les clés de sélecteur dont vous avez besoin. Cette page n’a aucun paramètre.
Entrée CSS
.card {
display: flex;
background-color: #fff;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
margin: 0 auto;
}
.card:hover .title {
color: tomato;
}
@media (max-width: 600px) {
.card { flex-direction: column; }
}Objet JavaScript
const converted = {
".card": {
display: "flex",
backgroundColor: "#fff",
WebkitBoxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
margin: "0 auto",
},
".card:hover .title": { color: "tomato" },
"@media (max-width: 600px)": { ".card": { flexDirection: "column" } },
}Détails et limites
La conversion s’exécute dans un Web Worker de votre navigateur (parsing PostCSS + objectify de postcss-js) ; le CSS n’est envoyé à aucun serveur.
Les propriétés préfixées par un fournisseur gardent leur préfixe en PascalCase (par exemple, -webkit-box-shadow devient WebkitBoxShadow). Les propriétés personnalisées comme --main-color gardent leur nom d’origine.
Les valeurs restent des chaînes, sauf les propriétés numériques sans unité comme z-index, qui deviennent des nombres. Les commentaires sont supprimés.
La sortie n’est pas prête pour React Native : les sélecteurs, :hover et les blocs @media restent des clés imbriquées, et les valeurs raccourcies (shorthand) ne sont pas développées.
FAQ
Que se passe-t-il si le même sélecteur apparaît deux fois ?
Les règles ayant le même sélecteur sont fusionnées en une seule clé. Si la même propriété est déclarée deux fois, par exemple color: red !important; color: blue, la clé contient un tableau : ["red !important", "blue"].
Les requêtes @media et les sélecteurs imbriqués sont-ils pris en charge ?
Oui. Un bloc @media devient une clé comme "@media (max-width: 600px)" dont la valeur est un objet contenant ses règles. Les sélecteurs descendants et les pseudo-sélecteurs restent des clés de chaîne complètes.
Pourquoi ai-je une erreur "Unclosed block" ?
L’entrée doit être du CSS valide. PostCSS s’arrête sur les erreurs de syntaxe, comme une accolade fermante manquante, et indique la ligne et la colonne ; la syntaxe Sass ou Less (variables, imbrication) n’est pas compilée ici.