Typed styled components for ReScript

styled-ppx is the ppx that brings typed styled components to ReScript. Allows you to create React Components with type-safe style definitions that don't rely on a different language than CSS.

Build on top of emotion, it allows you to style apps safe, quickly, performant and as you always done it.

module Center = %styled.div(`
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
`)
 
<Center>
  {React.string("Hello from the future!")}
</Center>

module Center = %styled.div(`
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
`)
 
<Center>
  {React.string("Hello from the future!")}
</Center>

• Type-safe CSS
• Component-based styling
• Implements utility helpers such as classname and css
• There's no abstraction over standard CSS, neither a new language or DSL
• Support the power of the underliying language: pattern-matching, composition, labelled arguments
• Build on top of emotion

styled-ppx is a ppx, can learn more about ppxs in the Real World OCaml: Preprocessing with ppx. To get a general idea, are similar to babel-plugins. They run before the compilation of your code, and expands those notations (%styled.div%styled.div or %cx%cx) into valid ReScript code.