variant Intent { Positive Negative} style Button { paddingLeft: 10 paddingRight: $theme_sizes_xl [Intent=Positive] { color: green } [Intent=Negative] { color: red }}
Styles are authored on component-base and fully encapsulated from other styles accounting for predictable styling without side-effects. It also enables automatic code-splitting where each component is rendered to a new file.
Elodin compiles to a variety of different languages, platforms and libraries without having to change a single line. It's truly one file for all targets!
The compiler will validate every property-value pair and throw on invalid rules resulting in solid code and bulletproof output. If it compiles, it works!
The syntax is a mix of CSS and JavaScript with some concepts from ReasonML and thus already familiar to many developers. It is declarative and unlike CSS only supports one value per property.