Stili degli oggetti in valori letterali del modello — Numio

Riscrive gli stili degli oggetti css({...}) e styled.x({...}) in valori letterali modello con tag per componenti con stile, Emotion o Linaria. Le chiavi camelCase diventano kebab-case, i numeri ottengono px tranne le proprietà senza unità e le espressioni JS diventano interpolazioni ${}.

Migrazione degli stili di oggetto Emotion o Glamour su componenti con stile o Linaria, che prevedono il modello letterale CSS.

Object Styles

Template Literal

Quando usarlo

Migrazione degli stili di oggetto Emotion o Glamour su componenti con stile o Linaria, che prevedono il modello letterale CSS.
Conversione di una definizione styled(Component)({...}) nella sintassi del modello in modo che possa essere letta e modificata come normale CSS.

Come si usa

Incolla JavaScript o TypeScript (JSX/TSX consentito) che chiama css({...}), styled.tag({...}) o styled(Component)({...}) nell'editor degli stili di oggetto.
In Impostazioni, mantieni attivi "Transpile css tags" e "Transpile styled tags" oppure disattivane uno per lasciare tali chiamate invariate; un banner di avviso mostra quando uno è spento.
Copia il pannello Template Litelar. Il codice esterno alle chiamate convertite viene mantenuto ma riformattato da Prettier.

Stili oggetto (JavaScript o TypeScript)

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

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

Modello letterale con tag

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

Dettagli e limiti

La conversione viene eseguita nel tuo browser: un Web Worker applica babel-plugin-object-styles-to-template con Babel standalone (analizzando la sintassi TypeScript quando il semplice JavaScript fallisce) e il risultato viene formattato da Prettier senza punto e virgola.

Vengono convertite solo le chiamate con un singolo argomento oggetto semplice. styled("div")(obj, props => ...) con una funzione o più argomenti e gli array css([...]) vengono lasciati così come sono.

Le proprietà senza unità come zIndex, lineHeight e l'opacità mantengono i numeri nudi; gli altri numeri ottengono px. I valori dell'array non vengono espansi e diventano un'interpolazione come ${[0, 4]}.

Prettier normalizza anche il codice non modificato, ad esempio le virgolette singole diventano virgolette doppie.

FAQ

Quali nomi di chiamata vengono riconosciuti?

Il plugin trasforma chiamate css(...) e con stile: styled.button(...), styled("div")(...) e styled(Link)(...). Altre funzioni con argomenti oggetto, come someFn({ color: 'red' }), non vengono modificate.

Come vengono gestiti le variabili e i valori del tema?

Ogni valore non letterale, come theme.primary o colors.white, resta un’espressione JavaScript dentro ${...} nel template, quindi viene ancora risolto in fase di esecuzione.

I selettori nidificati come &:hover sono supportati?

Sì. Un oggetto nidificato sotto una chiave come '&:hover' diventa un blocco nidificato nel modello, separato dalle dichiarazioni principali da una riga vuota.

Funziona con TypeScript?

Sì. Se il codice non viene analizzato come JavaScript, viene nuovamente analizzato con la sintassi TypeScript di Babel. I tipi vengono mantenuti: le interfacce rimangono e styled.button<Props>({...}) diventa styled.button<Props>`...`.

Specifiche e riferimenti

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