Hoppa till innehåll
TextArray1.41.0
100% lokalt

CSS till JS objektkonverterare

Konvertera CSS-deklarationer till ett React/JS inline-stil-objekt och tillbaka igen.

Inmatning
Utmatning
Relaterade verktyg
CSS-formaterareUtvecklarverktyg
CSS-minifierareUtvecklarverktyg
JSON till TypeScriptUtvecklarverktyg
HTML till JSX-konverterareUtvecklarverktyg
i18n nyckel diffUtvecklarverktyg
TOML till JSON-omvandlareUtvecklarverktyg
CSS till JS objektkonverterare
Klistra in ett block med CSS-deklarationer och få tillbaka ett JavaScript-stilobjekt, redo att släppas in i en React- eller Preact-komponents stilrekvisita. Varje kebab-case-egenskap blir camelCase - bakgrundsfärg förvandlas till bakgrundsfärg, teckenstorlek till teckenstorlek - och det hela skrivs ut som ett giltigt objekt bokstavligt med indrag i två mellanslag. Du kan klistra in blotta deklarationer eller en fullständig regel med en väljare och hängslen; omslagsväljaren är avskalad för dig, så att kopiera en regel direkt från DevTools fungerar bara.
Omvandlaren går åt båda hållen. Växla riktningen till JS-objekt → CSS och ett stilobjekt förvandlas tillbaka till vanligt prop: värde; rader, med camelCase avstavat igen och citattecken borttagna. Det gör det enkelt att flytta en stil från en komponent och till en stilmall, eller att kontrollera vad en uppsättning inline-stilar faktiskt renderas som. Anpassade egenskaper som --brand-color behåller sina ledande streck och förblir citerade, eftersom de inte är giltiga identifierare, och leverantörsprefix hanteras på det sätt som React förväntar sig: -webkit-box-shadow blir WebkitBoxShadow, medan -ms- prefix använder gemener msFlex-form.
Som standard sänds varje värde ut som en sträng, vilket är det säkra valet - det håller enheter, färger och saker som linjehöjd: 1,5 intakta. Slå på "Enhetslösa värden som siffror" och rena siffror som z-index eller opacitet skrivs som siffror istället, och matchar hur du vanligtvis skulle skriva dem för hand. Du kan också välja enkla eller dubbla citattecken för att matcha ditt projekts formatterare.
Allt körs i din webbläsare. Den CSS du klistrar in laddas aldrig upp, så inklistring av stilar från ett privat designsystem eller ett internt komponentbibliotek stannar kvar på din dator. Kopiera resultatet, ladda ner det som en fil eller skicka det vidare till ett annat verktyg.
FAQ
Hanterar den en fullständig CSS-regel med en väljare?
Ja. Klistra in `.button { färg: röd; stoppning: 8px; }` och väljaren och klammerparenteserna tas bort och bara stilobjektet kvarstår. Nakna deklarationer utan hängslen fungerar också.
Varför är mina siffror inslagna i citattecken?
Som standard är varje värde en sträng, så enheter och inledande nollor överlever. Slå på "Enhetslösa värden som siffror" och rena siffror som z-index: 10 eller opacitet: 0,5 sänds ut som siffror istället.
Hur konverteras leverantörsprefix och anpassade egenskaper?
Leverantörsprefix följer Reacts konvention: -webkit-transition blir WebkitTransition, och -ms- prefix använder en gemen ms. Anpassade egenskaper som --brand-color behåller sina streck och förblir citerade som giltiga objektnycklar.
Kan det konvertera ett JS-stilobjekt tillbaka till CSS?
Ja. Växla riktningen till JS-objekt → CSS. camelCase-nycklar avstavas, citattecken tas bort och varje egenskap skrivs som en normal prop: värde; linje.
Laddas min CSS upp någonstans?
Nej. Konverteringen körs helt i din webbläsare utan serverbearbetning, så stilar från ett privat eller internt projekt lämnar aldrig din enhet.