Skip to content

Introduction

Typed styled components in Reason, OCaml and ReScript

styled-ppx is the ppx that enables CSS-in-Reason. Build on top of emotion, it allows you to style apps quickly, performant and as you always done it. Allows you to create React Components with Type-safe CSS style definitions that don't rely on a specific DSL and great error messages:

Overview

styled-ppx implements a ppx that transforms [%styled] extensions points into [@react.components] modules with bs-emotion as styles, which does all the CSS-in-JS under the hood thanks to emotion.

This is how you can write components in ReasonML or OCaml with this ppx:

Standard styled component

module StyledComponent = [%styled.div {|
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
|}];
ReactDOMRe.renderToElementWithId(
  <StyledComponent> {React.string("Hello from the future!")} </StyledComponent>,
  "app",
);

Features

Community

Follow @davesnx on Twitter for future project updates.

Feel free to join the Discord