Convertitore di oggetti da CSS a JavaScript — Numio
Converte il semplice CSS in un oggetto JavaScript (CSS-in-JS) con postcss-js. I nomi delle proprietà diventano camelCase, i selettori e le regole at diventano chiavi e una proprietà ripetuta in una regola si trasforma in un array di valori.
Spostare gli stili da un file .css in un oggetto styled-system, JSS, Emotion o Radium senza ridigitare ogni proprietà.
Quando usarlo
- Spostare gli stili da un file .css in un oggetto styled-system, JSS, Emotion o Radium senza ridigitare ogni proprietà.
- Trasformare uno snippet CSS copiato da uno strumento di progettazione o browser DevTools in un oggetto per uno stile in linea o un sostegno di stile.
Come si usa
- Incolla CSS nell'editor CSS o trascina un file .css su di esso.
- Leggi il risultato nel pannello Oggetto JavaScript; è assegnato a `const converted` e formattato con Prettier (senza punto e virgola).
- Copia l'oggetto, rinomina `converted` e scegli i tasti di selezione che ti servono. Questa pagina non ha impostazioni da modificare.
Ingresso 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; }
}Oggetto 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" } },
}Dettagli e limiti
La conversione viene eseguita in un Web Worker nel tuo browser (PostCSS parse + postcss-js objectify); lo CSS non viene inviato a un server.
Le proprietà con prefisso del fornitore mantengono il loro prefisso in PascalCase (ad esempio -webkit-box-shadow diventa WebkitBoxShadow). Le proprietà personalizzate come --main-color mantengono il loro nome originale.
I valori vengono mantenuti come stringhe, ad eccezione delle proprietà numeriche senza unità come z-index, che diventano numeri. I commenti vengono eliminati.
L'output non è pronto per React Native: i selettori, i blocchi :hover e @media vengono mantenuti come chiavi nidificate e i valori brevi non vengono espansi.
FAQ
Cosa succede se lo stesso selettore appare due volte?
Le regole con lo stesso selettore vengono unite in una sola chiave. Se la stessa proprietà è dichiarata due volte, ad esempio color: red !important; color: blue, la chiave contiene un array: ["red !important", "blue"].
Sono supportate le query @media e i selettori nidificati?
Sì. Un blocco @media diventa una chiave del tipo "@media (max-width: 600px)" il cui valore è oggetto delle regole al suo interno. I discendenti e gli pseudo-selettori rimangono chiavi di stringa complete.
Perché ricevo un errore "Unclosed block"?
L'input deve essere valido CSS. PostCSS si ferma in caso di errori di sintassi come una parentesi graffa di chiusura mancante e riporta la riga e la colonna; La sintassi Sass or Less (variabili, nidificazione) non è compilata qui.