Emotion: generare CSS con JavaScript

Emotion è una libreria JavaScript che rientra nella categoria “CSS-in-JS“, il cui scopo è quindi quello di produrre stili CSS dinamici tramite il motore di scripting più famoso nel Web. Ispirato ad altri prodotti come glam, glamor, permette di stilizzare molto velocemente le strutture HTML attraverso valori stringa o oggetti.

Emotion promette risultati cross-browser e rispettosi degli standard Web moderni, un’esperienza di scrittura ottimale e performance di tutto rispetto, grazie al sistema di caching ed all’utilizzo di “insertRule”. Emotion si presenta agli sviluppatori in due versioni principali:

• una versione Vanilla, ovvero indipendente da qualsiasi framework e utilizzabile con JavaScript puro;
• una versione appositamente dedicata alla collaborazione con il framework Javascript React su cui si focalizza principalmente la documentazione offerta dal team di sviluppo sebbene, come sottolineato, la logica d’implementazione ed utilizzo sia applicabile anche alla versione indipendente.

La release Vanilla funziona anche in associazione con i framework JavaScript (incluso React), ma quella dedicata dispone di funzionalità disegnate specificamente per lavorare alla perfezione con quest’ultimo.

La pagina ufficiale del progetto offre un’ampia e dettagliata documentazione che, come anticipato, si rivolge principalmente alla versione dedicata a React, ma condivide tutta la logica con la versione Vanilla ed una nutrita sezione demo sparpagliata all’interno della stessa documentazione, che permette in alcuni casi le modifiche inline e real-time dei risultati.

Una volta installata la libreria tramite npm o babel, possiamo utilizzare Emotion per stilizzare gli elementi, Ciò sia senza avvalerci di React:

import { css } from 'emotion'
const app = document.getElementById('root')
const myClassName = css`
  color: hotpink;
`
app.classList.add(myClassName)

sia collaborando con il framework di casa Facebook:

/** @jsx jsx */
import { jsx, css } from '@emotion/core'
const style = css`
  color: hotpink;
`
const SomeComponent = ({ children }) => (
  <div css={style}>
    Some hotpink text.
    {children}
  </div>
)
const anotherStyle = css({
  textDecoration: 'underline'
})
const AnotherComponent = () => (
  <div css={anotherStyle}>Some text with an underline.</div>
)
render(
  <SomeComponent>
    <AnotherComponent />
  </SomeComponent>
)

Allo sviluppatore la scelta.

Via Emotion