Style Dictionary

CSS-in-JS 🔴 Senior

Définition

Outil d'Amazon pour transformer des design tokens JSON en variables pour chaque plateforme (CSS, Sass, JS, iOS, Android). Pipeline configurable avec des transformers.

Analogie

Un traducteur automatique qui convertit un livre dans toutes les langues simultanément.

Exemple de code

// config.json
{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "buildPath": "build/",
      "files": [{ "format": "css/variables" }]
    }
  }
}

Cas d'usage

Générer automatiquement les variables CSS, Sass et JS a partir d'une source unique de tokens.

#styling#css-in-js

← → au clavier pour passer d'une fiche à l'autre