Konwerter CSS na obiekty JavaScript — Numio

Konwertuje zwykły obiekt CSS na obiekt JavaScript (CSS-in-JS) za pomocą postcss-js. Nazwy właściwości stają się camelCase, selektory i reguły at stają się kluczami, a właściwość powtarzana w jednej regule zamienia się w tablicę wartości.

Przenoszenie stylów z pliku .css do obiektu styled-system, JSS, Emotion lub Radium bez ponownego wpisywania każdej właściwości.

CSS

JavaScript Object

Kiedy go używać

Przenoszenie stylów z pliku .css do obiektu styled-system, JSS, Emotion lub Radium bez ponownego wpisywania każdej właściwości.
Przekształcanie fragmentu kodu CSS skopiowanego z narzędzia do projektowania lub przeglądarki DevTools w obiekt dla stylu wbudowanego lub elementu stylu.

Jak używać

Wklej CSS do edytora CSS lub upuść na nim plik .css.
Przeczytaj wynik w panelu Obiekt JavaScript; jest przypisany do `const converted` i sformatowany przy użyciu Prettier (bez średników).
Skopiuj obiekt, zmień nazwę `converted` i wybierz potrzebne klawisze selektora. Na tej stronie nie ma żadnych ustawień, które można zmienić.

Wejście CSS

.card {
  display: flex;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.card:hover .title {
  color: tomato;
}

@media (max-width: 600px) {
  .card { flex-direction: column; }
}

Obiekt JavaScript

const converted = {
  ".card": {
    display: "flex",
    backgroundColor: "#fff",
    WebkitBoxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
    margin: "0 auto",
  },
  ".card:hover .title": { color: "tomato" },
  "@media (max-width: 600px)": { ".card": { flexDirection: "column" } },
}

Szczegóły i ograniczenia

Konwersja przebiega w środowisku Web Worker w Twojej przeglądarce (parse PostCSS + obiektyfikacja postcss-js); CSS nie jest wysyłany na serwer.

Właściwości z prefiksem dostawcy zachowują swój prefiks w PascalCase (np. -webkit-box-shadow zmienia się na WebkitBoxShadow). Właściwości niestandardowe, takie jak --main-color, zachowują swoją oryginalną nazwę.

Wartości są przechowywane jako ciągi znaków, z wyjątkiem bezjednostkowych właściwości liczbowych, takich jak indeks Z, które stają się liczbami. Komentarze są usuwane.

Dane wyjściowe nie są gotowe do obsługi React Native: selektory, bloki :hover i @media są przechowywane jako klucze zagnieżdżone, a wartości skrócone nie są rozwijane.

FAQ

Co się stanie, jeśli ten sam selektor pojawi się dwukrotnie?

Reguły z tym samym selektorem są łączone w jeden klucz. Jeśli ta sama właściwość jest zadeklarowana dwukrotnie, np. color: red !important; color: blue, klucz zawiera tablicę: ["red !important", "blue"].

Czy obsługiwane są zapytania @media i zagnieżdżone selektory?

Tak. Blok @media staje się kluczem, takim jak „@media (max-width: 600px)”, którego wartość jest obiektem znajdujących się w nim reguł. Selektory potomków i pseudoselektory pozostają pełnymi kluczami łańcuchowymi.

Dlaczego pojawia się błąd "Unclosed block"?

Dane wejściowe muszą być prawidłowe CSS. PostCSS zatrzymuje się w przypadku błędów składniowych, takich jak brakujący nawias zamykający i zgłasza wiersz i kolumnę; Składnia Sass lub Less (zmienne, zagnieżdżanie) nie jest tutaj kompilowana.

Specyfikacje i referencje

postcss-js na GitHub