Naar de inhoud
Numio

Objectstijlen naar sjabloonliterals — Numio

Herschrijft css({...}) en styled.x({...}) objectstijlen in getagde sjabloonliterals voor styled-componenten, Emotion of Linaria. camelCase-sleutels worden kebab-case, getallen krijgen px behalve unitless-eigenschappen, en JS-expressies worden ${}-interpolaties.

Objectstijlen van Emotion of Glamour migreren naar stijlcomponenten of Linaria, waarbij de letterlijke sjabloon CSS wordt verwacht.

Object Styles

Template Literal

Wanneer gebruik je dit?

  • Objectstijlen van Emotion of Glamour migreren naar stijlcomponenten of Linaria, waarbij de letterlijke sjabloon CSS wordt verwacht.
  • Een styled(Component)({...}) definitie converteren naar sjabloonsyntaxis, zodat deze kan worden gelezen en bewerkt zoals normaal CSS.

Hoe werkt het

  1. Plak JavaScript of TypeScript (JSX/TSX toegestaan) dat css({...}), styled.tag({...}) of styled(Component)({...}) aanroept in de Object Styles-editor.
  2. Laat in Instellingen "Transpile css-tags" en "Transpile styled tags" ingeschakeld, of schakel een optie uit om die aanroepen ongewijzigd te laten; een waarschuwingsbanner geeft aan wanneer er een is uitgeschakeld.
  3. Kopieer het deelvenster Sjabloonletterlijk. Code buiten de geconverteerde oproepen wordt bewaard, maar opnieuw geformatteerd door Prettier.

Objectstijlen (JavaScript of TypeScript)

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

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

Getagd sjabloon letterlijk

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 en beperkingen

De conversie wordt uitgevoerd in uw browser: een Web Worker past babel-plugin-object-styles-to-template toe met Babel standalone (parseert de TypeScript-syntaxis wanneer gewone JavaScript mislukt), en het resultaat wordt opgemaakt door Prettier zonder puntkomma's.

Alleen oproepen met één enkel object-argument worden geconverteerd. styled("div")(obj, props => ...) met een functie of meerdere argumenten, en css([...]) arrays blijven zoals ze zijn.

Unitless-eigenschappen zoals zIndex, lineHeight en dekking behouden kale cijfers; andere nummers krijgen px. Arraywaarden worden niet uitgebreid en worden een interpolatie zoals ${[0, 4]}.

Prettier normaliseert ook code die niet door de omzetting is gewijzigd; enkele aanhalingstekens worden bijvoorbeeld dubbele aanhalingstekens.

FAQ

Welke roepnamen worden herkend?

De plug-in transformeert css(...) en gestileerde aanroepen: styled.button(...), styled("div")(...) en styled(Link)(...). Andere functies met objectargumenten, zoals someFn({ color: 'red' }), worden niet gewijzigd.

Hoe wordt er omgegaan met variabelen en themawaarden?

Elke niet-letterlijke waarde, zoals thema.primary of kleuren.wit, wordt bewaard als een JavaScript-expressie binnen ${...} in de sjabloon, zodat deze tijdens runtime nog steeds wordt omgezet.

Worden geneste selectors zoals &:hover ondersteund?

Ja. Een genest object onder een sleutel zoals '&:hover' wordt een genest blok in de sjabloon, gescheiden van de bovenliggende declaraties door een lege regel.

Werkt het met TypeScript?

Ja. Als de code niet wordt geparseerd als JavaScript, wordt deze opnieuw geparseerd met de TypeScript-syntaxis van Babel. Typen blijven behouden: interfaces blijven, en styled.button<Props>({...}) wordt styled.button<Props>`...`.

Specificaties en referenties