Stilobjekte in Template-Literale umwandeln — Numio

Schreibt Objekt-Styles in css({...}) und styled.x({...}) in Tagged Template Literals für styled-components, Emotion oder Linaria um. camelCase-Schlüssel werden zu kebab-case, Zahlen erhalten px außer bei einheitenlosen Eigenschaften, und JS-Ausdrücke werden zu ${}-Interpolationen.

Objekt-Styles aus Emotion oder Glamor zu styled-components oder Linaria migrieren, die CSS als Template Literal erwarten.

Object Styles

Template Literal

Wann sie hilft

Objekt-Styles aus Emotion oder Glamor zu styled-components oder Linaria migrieren, die CSS als Template Literal erwarten.
Eine styled(Component)({...})-Definition in Template-Syntax umwandeln, damit sie sich wie normales CSS lesen und bearbeiten lässt.

Anwendung

Füge JavaScript oder TypeScript (JSX/TSX erlaubt), das css({...}), styled.tag({...}) oder styled(Component)({...}) aufruft, in den Object-Styles-Editor ein.
Lass in Settings "Transpile css tags" und "Transpile styled tags" aktiviert oder schalte eine Option aus, um diese Aufrufe unverändert zu lassen; ist eine aus, erscheint ein Warnbanner.
Kopiere den Bereich Template Literal. Code außerhalb der umgewandelten Aufrufe bleibt erhalten, wird aber von Prettier neu formatiert.

Objekt-Styles (JavaScript oder TypeScript)

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

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

Tagged Template Literal

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;
`

Details und Einschränkungen

Die Umwandlung läuft in deinem Browser: Ein Web Worker wendet babel-plugin-object-styles-to-template mit Babel standalone an (und parst TypeScript-Syntax, wenn reines JavaScript scheitert); das Ergebnis wird von Prettier ohne Semikolons formatiert.

Nur Aufrufe mit genau einem einfachen Objekt als Argument werden umgewandelt. styled("div")(obj, props => ...) mit einer Funktion oder mehreren Argumenten sowie css([...])-Arrays bleiben unverändert.

Einheitenlose Eigenschaften wie zIndex, lineHeight und opacity behalten reine Zahlen; andere Zahlen erhalten px. Array-Werte werden nicht aufgelöst und werden zu einer Interpolation wie ${[0, 4]}.

Prettier normalisiert auch den unveränderten Code, zum Beispiel werden einfache Anführungszeichen zu doppelten.

FAQ

Welche Aufrufnamen werden erkannt?

Das Plugin wandelt css(...) und styled-Aufrufe um: styled.button(...), styled("div")(...) und styled(Link)(...). Andere Funktionen mit Objekt-Argumenten, etwa someFn({ color: 'red' }), werden nicht verändert.

Wie werden Variablen und Theme-Werte behandelt?

Jeder nicht-literale Wert, etwa theme.primary oder colors.white, bleibt als JavaScript-Ausdruck in ${...} im Template erhalten und wird so weiterhin zur Laufzeit aufgelöst.

Werden verschachtelte Selektoren wie &:hover unterstützt?

Ja. Ein verschachteltes Objekt unter einem Schlüssel wie '&:hover' wird zu einem verschachtelten Block im Template, durch eine Leerzeile von den Deklarationen des Elternelements getrennt.

Funktioniert es mit TypeScript?

Ja. Lässt sich der Code nicht als JavaScript parsen, wird er erneut mit Babels TypeScript-Syntax geparst. Typen bleiben erhalten: Interfaces bleiben bestehen, und styled.button<Props>({...}) wird zu styled.button<Props>`...`.

Spezifikationen und Referenzen

babel-plugin-object-styles-to-template on GitHub