Compilation Style DictionaryStyle Dictionary compilation
Garantir que toute modification des tokens JSON se propage correctement dans toutes les plateformes cibles via Style Dictionary.Ensure every JSON token modification propagates correctly to all target platforms via Style Dictionary.
Flux du pipelinePipeline flow
01 · Déclencheur01 · Trigger
Tokens JSON modifiésJSON tokens modified
tokens/primitives.json · tokens/semantic.json · tokens/component.jsontokens/primitives.json · tokens/semantic.json · tokens/component.json
02 · Compilation02 · Compilation
Style Dictionary buildStyle Dictionary build
npx style-dictionary build → CSS · JS · Swift · Android XML depuis les mêmes sources JSON.npx style-dictionary build → CSS · JS · Swift · Android XML from the same JSON sources.
03 · Validation03 · Validation
Sorties vérifiéesOutputs verified
dist/css/ · dist/js/ · dist/ios/ · dist/android/ — aucune référence non résolue, cohérence sources/sorties.dist/css/ · dist/js/ · dist/ios/ · dist/android/ — no unresolved reference, source/output consistency.
Valeur métierBusiness value
Un token défini, partout disponible. Style Dictionary compile automatiquement les tokens en variables CSS, modules JS, valeurs Swift et XML Android — cohérence multi-plateforme sans effort manuel.One defined token, available everywhere. Style Dictionary automatically compiles tokens into CSS variables, JS modules, Swift values and Android XML — cross-platform consistency without manual effort.
Matrice de déclenchementTrigger matrix
| Fichier modifiéChanged file | ActionAction |
|---|---|
tokens/primitives.json | Oui — compilation complèteYes — full compilation |
tokens/semantic.json | Oui — compilation complèteYes — full compilation |
tokens/component.json | Oui — compilation complète + approbation PDYes — full compilation + PD approval |
ContrôlesChecks
- exit 0 sur la compilation (aucune erreur de résolution de référence)exit 0 on compilation (no reference resolution error)
- dist/css/variables.css contient tous les tokens sémantiquesdist/css/variables.css contains all semantic tokens
- Valeur résolue en CSS = valeur dans primitives.jsonResolved CSS value = value in primitives.json
- Aucun token {unresolved.ref} dans les sortiesNo {unresolved.ref} token in outputs
- dist/js/, dist/ios/, dist/android/ générés correctementdist/js/, dist/ios/, dist/android/ correctly generated
CommandeCommand
npx style-dictionary build --config style-dictionary/config.json
# Activation : npm install style-dictionary + configurer style-dictionary/config.json