StyleX
Système de styles développé par Meta, sous licence MIT : tu écris tes styles en JavaScript et un compilateur les transforme en CSS atomique statique. Sa particularité pour un design system tient dans les types. Un composant peut déclarer les propriétés de style qu'il accepte, et même les valeurs permises : un `marginTop` limité à 0, 4, 8 ou 16, par exemple. Les thèmes et les variables de design sont typés de la même façon.
Forces
- Un composant déclare les valeurs de style qu'il accepte, et l'écart se voit dans l'éditeur
- Compilé en CSS atomique statique, sans coût de style à l’exécution
- Thèmes et variables de design typés, maintenus par Meta sous licence MIT
Limites
- La contrainte de type a des trous : TypeScript peut laisser passer des propriétés en trop
- Demande un compilateur branché sur ton outil de build, là où Tailwind s'installe en deux lignes
- Beaucoup moins présent que Tailwind dans ce que les agents ont appris, donc moins fluide à générer
Pour qui
- Un design system React démarré de zéro qui veut borner les valeurs acceptées composant par composant