styled components with type-safe CSS for ReScript, Melange and Native

styled-ppx is a ppx and a library that brings styled components to ReScript, Melange and Native. Create React Components with type-safe style definitions with only CSS.

It allows you to style apps safely, quickly, and performant - just 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

styled-ppx comes with its own CSS Parser and CSS type-checker, so you can write CSS and be sure it will be valid and all types will be correct. This is a huge time-saver when working at large scale with CSS.

Features

  • Zero abstraction over CSS
  • Component-based styling
  • Supports the power of the underlying language: pattern-matching, composition, labelled arguments, static type-safety.
  • Implements utilities such as cx to generate classNames and css to generate Css.rule
  • Supports ReScript, Melange and native.
  • Integrates with @rescript-react, reason-react, and server-reason-react
  • It can also work without React
  • Adds labels on the className hashes for better DX

The main part of styled-ppx is a ppx. Generally speaking, a ppx is the system from OCaml to have some sort of macros; similar to babel plugins. A small program that run before the compilation, and can transform your source-code.

In this case, expands those extensions (e.g., %styled.div [%styled.div], %cx [%cx] and %css [%css]) into valid code. If you are curious about the actual transformation, you can check the snapshot tests.

You can learn more about them in Tarides blog: Introduction to OCaml ppx ecosystem.

ReScript