CSS in JavaScript-Objekte umwandeln — Numio
Wandelt reines CSS mit postcss-js in ein JavaScript-Objekt (CSS-in-JS) um. Eigenschaftsnamen werden zu camelCase, Selektoren und At-Regeln werden zu Schlüsseln, und eine in einer Regel wiederholte Eigenschaft wird zu einem Array von Werten.
Styles aus einer .css-Datei in ein styled-system-, JSS-, Emotion- oder Radium-Objekt übernehmen, ohne jede Eigenschaft neu zu tippen.
Wann sie hilft
- Styles aus einer .css-Datei in ein styled-system-, JSS-, Emotion- oder Radium-Objekt übernehmen, ohne jede Eigenschaft neu zu tippen.
- Ein aus einem Design-Tool oder den Browser-DevTools kopiertes CSS-Snippet in ein Objekt für einen Inline-Style oder eine style-Prop umwandeln.
Anwendung
- Füge CSS in den CSS-Editor ein oder ziehe eine .css-Datei darauf.
- Lies das Ergebnis im Bereich JavaScript Object; es wird `const converted` zugewiesen und mit Prettier formatiert (ohne Semikolons).
- Kopiere das Objekt, benenne `converted` um und übernimm die Selektor-Schlüssel, die du brauchst. Diese Seite hat keine Einstellungen.
CSS-Eingabe
.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; }
}JavaScript-Objekt
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" } },
}Details und Einschränkungen
Die Umwandlung läuft in einem Web Worker in deinem Browser (PostCSS-Parsing + postcss-js objectify); das CSS wird nicht an einen Server gesendet.
Eigenschaften mit Vendor-Präfix behalten ihr Präfix in PascalCase (z. B. wird -webkit-box-shadow zu WebkitBoxShadow). Custom Properties wie --main-color behalten ihren ursprünglichen Namen.
Werte bleiben Strings, außer bei einheitenlosen numerischen Eigenschaften wie z-index, die zu Zahlen werden. Kommentare werden entfernt.
Die Ausgabe ist nicht direkt für React Native geeignet: Selektoren, :hover- und @media-Blöcke bleiben als verschachtelte Schlüssel erhalten, und Kurzschreibweisen werden nicht aufgelöst.
FAQ
Was passiert, wenn derselbe Selektor zweimal vorkommt?
Regeln mit demselben Selektor werden zu einem Schlüssel zusammengeführt. Wird dieselbe Eigenschaft zweimal deklariert, etwa color: red !important; color: blue, enthält der Schlüssel ein Array: ["red !important", "blue"].
Werden @media-Queries und verschachtelte Selektoren unterstützt?
Ja. Ein @media-Block wird zu einem Schlüssel wie "@media (max-width: 600px)", dessen Wert ein Objekt mit den darin enthaltenen Regeln ist. Nachfahren- und Pseudo-Selektoren bleiben als vollständige String-Schlüssel erhalten.
Warum erhalte ich den Fehler "Unclosed block"?
Die Eingabe muss gültiges CSS sein. PostCSS bricht bei Syntaxfehlern wie einer fehlenden schließenden Klammer ab und meldet Zeile und Spalte; Sass- oder Less-Syntax (Variablen, Verschachtelung) wird hier nicht kompiliert.