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