Typed styled components for ReScript

styled-ppx is the ppx (opens in a new tab) that brings typed styled components to ReScript, allowing you to create React Components with type-safe style definitions that look like good old CSS.

styled-ppx is built on top of emotion (opens in a new tab), so you can style your apps in a safe, familiar, and performant way.

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>;

Highlights

  • Type-safe CSS
  • Component-based styling
  • Implements utility helpers such as classname and css
  • There's no abstraction over standard CSS - it's neither a new language nor a DSL (opens in a new tab)
  • Supports the power of the underlying language: pattern-matching, composition, labelled arguments, etc
  • Built on top of emotion (opens in a new tab)

styled-ppx is a ppx. You can learn more about ppxs in Tarides blog: Introduction to OCaml ppx ecosystem (opens in a new tab). Generally speaking, they are similar to babel plugins (opens in a new tab). They run before the compilation of your code, and expands styled-ppx notations (e.g., %styled.div [%styled.div] or %cx [%cx]) into valid ReScript code.

ReScript