Style Dictionary

CSS-in-JS 🔴 Senior

Definition

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 simultanement.

Exemple de code

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

Cas d'usage

Generer automatiquement les variables CSS, Sass et JS a partir d'une source unique de tokens.

#styling#css-in-js