Przejdź do treści
Numio

Style obiektów na literały szablonu — Numio

Przepisuje style obiektów css({...}) i styled.x({...}) na oznaczone literały szablonu dla styled-components, Emotion lub Linaria. Klucze camelCase stają się wielkością liter kebab, liczby otrzymują piksele, z wyjątkiem właściwości bez jednostek, a wyrażenia JS stają się interpolacjami ${}.

Migracja stylów obiektów Emotion lub Glamour do styled-components lub Linaria, które oczekują literału szablonu CSS.

Object Styles

Template Literal

Kiedy go używać

  • Migracja stylów obiektów Emotion lub Glamour do styled-components lub Linaria, które oczekują literału szablonu CSS.
  • Konwersja definicji styled(Component)({...}) na składnię szablonu, aby można ją było czytać i edytować jak zwykle CSS.

Jak używać

  1. Wklej JavaScript lub TypeScript (dozwolone JSX/TSX), które wywołują css({...}), styled.tag({...}) lub styled(Component)({...}) do edytora stylów obiektów.
  2. W ustawieniach pozostaw włączone opcje transpilacji tagów css i styled albo wyłącz jedną, aby pozostawić odpowiadające wywołania bez zmian. Wyłączenie opcji powoduje wyświetlenie ostrzeżenia.
  3. Skopiuj panel Dosłowność szablonu. Kod poza skonwertowanymi wywołaniami jest zachowywany, ale przeformatowany przez Prettier.

Style obiektów (JavaScript lub TypeScript)

const Button = styled.button({
  padding: 8,
  fontSize: '14px',
  backgroundColor: theme.primary,
  '&:hover': {
    opacity: 0.8,
  },
})

const card = css({
  display: 'flex',
  marginTop: 16,
})

Oznaczony literał szablonu

const Button = styled.button`
  padding: 8px;
  font-size: 14px;
  background-color: ${theme.primary};

  &:hover {
    opacity: 0.8;
  }
`
const card = css`
  display: flex;
  margin-top: 16px;
`

Szczegóły i ograniczenia

Konwersja przebiega w Twojej przeglądarce: pracownik sieciowy stosuje style-wtyczek babel do szablonu z samodzielnym Babelem (parsowanie składni TypeScript, gdy zwykłe JavaScript zawiedzie), a wynik jest formatowany przez Prettier bez średników.

Konwertowane są tylko wywołania z jednym argumentem zwykłego obiektu. styled("div")(obj, props => ...) z funkcją lub kilkoma argumentami oraz tablice css([...]) pozostawia się bez zmian.

Właściwości bezjednostkowe, takie jak zIndex, lineHeight i opacity, zachowują same liczby; inne liczby otrzymują px. Wartości tablicy nie są rozwijane i stają się interpolacją, taką jak ${[0, 4]}.

Prettier normalizuje również niezmieniony kod, na przykład pojedyncze cudzysłowy stają się podwójnymi cudzysłowami.

FAQ

Jakie nazwy połączeń są rozpoznawane?

Wtyczka przekształca wywołania css(...) i styled: styled.button(...), styled("div")(...) i styled(Link)(...). Inne funkcje z argumentami obiektowymi, takie jak someFn({ color: 'red' }), nie ulegają zmianie.

W jaki sposób obsługiwane są zmienne i wartości motywu?

Każda wartość niebędąca literałem, np. theme.primary lub colors.white, jest zachowywana jako wyrażenie JavaScript wewnątrz ${...} w szablonie, więc nadal jest obliczana podczas wykonywania.

Czy obsługiwane są zagnieżdżone selektory, takie jak &:hover?

Tak. Obiekt zagnieżdżony pod kluczem takim jak „&:hover” staje się zagnieżdżonym blokiem w szablonie, oddzielonym od deklaracji nadrzędnych pustą linią.

Czy to działa z TypeScript?

Tak. Jeśli kod nie jest analizowany jako JavaScript, jest analizowany ponownie ze składnią TypeScript Babela. Typy zostają zachowane: interfejsy pozostają, a styled.button<Props>({...}) staje się styled.button<Props>`...`.

Specyfikacje i referencje