Über dieses Tool
Das Tool CSS zu JS-Style-Objekt konvertiert einen Block von CSS in ein JavaScript-Objekt, das für React-Inline-Styles oder CSS-in-JS-Bibliotheken wie styled-components und Emotion geeignet ist. Es parst die Deklarationen lokal in Ihrem Browser — nichts wird hochgeladen — sodass die Migration eines Stylesheets zu Inline-Styles nur ein Einfügen und Kopieren entfernt ist.
Jeder Eigenschaftsname wird in camelCase gesetzt: background-color wird zu backgroundColor, z-index wird zu zIndex. Vendor-Präfixe folgen den Regeln von React — ein führendes -ms- wird zu kleingeschriebenem ms (msFilter), während -webkit-, -moz- und -o- zu Webkit, Moz und O großgeschrieben werden (WebkitBoxShadow). Custom Properties (--brand-color) werden wörtlich als zitierte Schlüssel beibehalten. Werte werden standardmäßig als Strings ausgegeben, wobei Einheiten und !important erhalten bleiben; ein numerischer Umschalter lässt nackte Ganzzahlen und Dezimalzahlen stattdessen zu unzitierten Zahlen werden. Schlüssel, die gültige JavaScript-Bezeichner sind, bleiben unzitiert; der Rest wird automatisch zitiert.
Wenn die Eingabe ein einfacher Deklarationsblock ist (keine Selektoren), erzeugt sie ein flaches Objekt, perfekt für eine React-style-Prop. Wenn die Eingabe vollständige Regeln mit Selektoren enthält, gibt der styled/Emotion-Modus ein verschachteltes Objekt aus, das nach jedem Selektor-String verschlüsselt ist — die Objektsyntax, die diese Bibliotheken akzeptieren. Sie steuern den Namen des Ausgabe-const, und das Ganze wird als const styles = { ... }; geschrieben, bereit zum Einfügen.