Przejdź do treści
TextArray1.41.0
100% lokalnie

Konwerter obiektów CSS na JS

Konwertuj deklaracje CSS na obiekt w stylu wbudowanym React/JS i odwrotnie.

Wejście
Wynik
Powiązane narzędzia
Formatowanie CSSNarzędzia dla programistów
Minifikator CSSNarzędzia dla programistów
JSON na TypeScriptNarzędzia dla programistów
Konwerter HTML na JSXNarzędzia dla programistów
różnica kluczy i18nNarzędzia dla programistów
Konwerter TOML na JSONNarzędzia dla programistów
Konwerter obiektów CSS na JS
Wklej blok deklaracji CSS i uzyskaj z powrotem obiekt w stylu JavaScript, gotowy do upuszczenia we właściwości stylu komponentu React lub Preact. Każda właściwość kebab-case staje się camelCase — kolor tła zmienia się w kolor tła, rozmiar czcionki w rozmiar czcionki — a całość jest drukowana jako prawidłowy literał obiektowy z wcięciem z dwiema spacjami. Możesz wkleić same deklaracje lub pełną regułę z selektorem i nawiasami klamrowymi; selektor zawijania został usunięty, więc skopiowanie reguły bezpośrednio z DevTools po prostu działa.
Konwerter działa w obie strony. Zmień kierunek na obiekt JS → CSS, a obiekt stylu zamieni się z powrotem w zwykły prop: wartość; wiersze, z ponownym dzieleniem camelCase i usuwaniem cudzysłowów. Ułatwia to przeniesienie stylu z komponentu do arkusza stylów lub sprawdzenie, jak faktycznie renderuje się zestaw stylów wbudowanych. Niestandardowe właściwości, takie jak --brand-color, zachowują początkowe myślniki i pozostają cytowane, ponieważ nie są prawidłowymi identyfikatorami, a prefiksy dostawców są obsługiwane w sposób, jakiego oczekuje React: -webkit-box-shadow staje się WebkitBoxShadow, podczas gdy przedrostki -ms- używają małej formy msFlex.
Domyślnie każda wartość jest emitowana jako ciąg znaków, co jest bezpiecznym wyborem — jednostki, kolory i takie rzeczy jak wysokość linii: 1,5 pozostają nienaruszone. Włącz „Wartości bezjednostkowe jako liczby”, a czyste liczby, takie jak indeks Z lub krycie, będą zamiast tego zapisywane jako liczby, zgodnie ze sposobem, w jaki zwykle wpisujesz je ręcznie. Możesz także wybrać pojedyncze lub podwójne cudzysłowy, aby dopasować je do formatera projektu.
Wszystko działa w Twojej przeglądarce. Wklejony CSS nigdy nie jest przesyłany, więc wklejone style z prywatnego systemu projektowania lub wewnętrznej biblioteki komponentów pozostają na Twoim komputerze. Skopiuj wynik, pobierz go jako plik lub wyślij do innego narzędzia.
Częste pytania
Czy obsługuje pełną regułę CSS z selektorem?
Tak. Wklej `.button { kolor: czerwony; dopełnienie: 8px; }`, a selektor i nawiasy klamrowe zostają usunięte, pozostawiając jedynie obiekt stylu. Same deklaracje bez nawiasów też działają.
Dlaczego moje liczby są ujęte w cudzysłów?
Domyślnie każda wartość jest ciągiem znaków, więc jednostki i zera wiodące przetrwają. Włącz „Wartości bezjednostkowe jako liczby”, a czyste liczby, takie jak indeks Z: 10 lub krycie: 0,5, będą zamiast tego emitowane jako liczby.
W jaki sposób konwertowane są przedrostki dostawców i właściwości niestandardowe?
Przedrostki dostawców są zgodne z konwencją React: -webkit-transition staje się WebkitTransition, a przedrostki -ms- używają małych liter ms. Niestandardowe właściwości, takie jak --brand-color, zachowują myślniki i pozostają cytowane jako prawidłowe klucze obiektu.
Czy może przekonwertować obiekt w stylu JS z powrotem na CSS?
Tak. Zmień kierunek na obiekt JS → CSS. Klucze camelCase są dzielone, cudzysłowy są usuwane, a każda właściwość jest zapisywana jako zwykła właściwość: wartość; linia.
Czy mój CSS jest gdzieś przesłany?
Nie. Konwersja odbywa się całkowicie w przeglądarce, bez przetwarzania przez serwer, więc style z projektu prywatnego lub wewnętrznego nigdy nie opuszczają Twojego urządzenia.