Konvertor CSS na JS objekt
Preveďte CSS deklarácie na React/JS objekt inline štýlov a rovnako aj naopak.
Konvertor CSS na JS objekt
Vložte blok CSS deklarácií a dostanete objekt štýlov v JavaScripte, pripravený rovno do prop style v React alebo Preact komponente. Každá vlastnosť v kebab-case sa zmení na camelCase — z background-color je backgroundColor, z font-size je fontSize — a celok sa vypíše ako platný objektový literál s odsadením dvomi medzerami. Vložiť môžete samotné deklarácie aj celé pravidlo so selektorom a zloženými zátvorkami; obalový selektor sa odstráni za vás, takže skopírovanie pravidla priamo z DevTools jednoducho funguje.
Prevod ide oboma smermi. Prepnite smer na JS objekt → CSS a z objektu štýlov sa zasa stanú bežné riadky prop: value;, kde sa camelCase opäť rozdelí spojovníkmi a úvodzovky okolo hodnôt zmiznú. Vďaka tomu ľahko presuniete štýl z komponenty do štýlopisu alebo si overíte, ako sada inline štýlov naozaj vykreslí. Vlastné vlastnosti ako --brand-color si ponechajú úvodné pomlčky a ostanú v úvodzovkách, keďže nie sú platné identifikátory, a prefixy výrobcov sa spracujú tak, ako to očakáva React: z -webkit-box-shadow je WebkitBoxShadow, kým prefix -ms- používa tvar msFlex s malým začiatočným písmenom.
Predvolene sa každá hodnota vypíše ako reťazec, čo je bezpečná voľba — zachová jednotky, farby aj veci ako line-height: 1.5. Po zapnutí voľby „Hodnoty bez jednotiek ako čísla“ sa čisté čísla, napríklad z-index či opacity, zapíšu ako čísla, presne tak, ako by ste ich písali ručne. Vybrať si môžete aj jednoduché alebo dvojité úvodzovky podľa formátovača vášho projektu.
Všetko beží vo vašom prehliadači. Vložené CSS sa nikam nenahráva, takže štýly zo súkromného dizajnového systému či internej knižnice komponentov ostanú na vašom počítači. Výsledok skopírujte, stiahnite ako súbor alebo ho pošlite ďalšiemu nástroju.