Typed styled components for ReScript, Melange and Native
styled-ppx is a ppx (opens in a new tab) and a library that brings styled components to ReScript, Melange and Native. It allows you to create React Components with type-safe style definitions that don't rely on a different language (DSL (opens in a new tab)) except CSS, but also can be used without React.
Built on top of emotion (opens in a new tab), it allows you to style apps safely, quickly, and performantly - just as you have 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>;
Highlights
- Type-safe CSS
- Component-based styling
- Implements utilities such as
cx
to generate classNames andcss
to generateCss.rules
- 0 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
- Integrates with [reason-react], [@resript-react] and [server-reason-react], accordingly
- Adds labels for better DX
The main part of styled-ppx is a ppx. You can learn more about it 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, to transform your source-code. In this case, expands styled-ppx notations (e.g., %styled.div
[%styled.div]
or %cx
[%cx]
) into valid ReScript code.