Over deze tool
De tool CSS naar JS-style-object zet een blok CSS om in een JavaScript-object geschikt voor React inline styles of CSS-in-JS-bibliotheken zoals styled-components en Emotion. Het parseert de declaraties lokaal in je browser — er wordt niets geüpload — dus het migreren van een stylesheet naar inline styles is een kwestie van plakken en kopiëren.
Elke eigenschapsnaam wordt in camelCase gezet: background-color wordt backgroundColor, z-index wordt zIndex. Vendor-prefixes volgen de regels van React — een voorloopstreepje -ms- wordt in kleine letters ms (msFilter), terwijl -webkit-, -moz- en -o- met hoofdletter Webkit, Moz en O worden (WebkitBoxShadow). Custom properties (--brand-color) worden letterlijk behouden als sleutels tussen aanhalingstekens. Waarden worden standaard als strings geproduceerd, met behoud van eenheden en !important; een numerieke schakelaar laat kale integers en decimalen in plaats daarvan onbeaanhaaltekende getallen worden. Sleutels die geldige JavaScript-identifiers zijn blijven zonder aanhalingstekens; de rest wordt automatisch van aanhalingstekens voorzien.
Wanneer de invoer een gewoon declaratieblok is (geen selectors) produceert het één plat object, perfect voor een React style-prop. Wanneer de invoer volledige regels met selectors bevat, produceert de styled/Emotion-modus een genest object gesleuteld op elke selector-string — de objectsyntaxis die die bibliotheken accepteren. Je bepaalt de naam van de uitvoer-const, en het geheel wordt geschreven als const styles = { ... }; klaar om te plakken.