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. Create React Components or simply class
with type-safe style definitions wiht only CSS.
Built on top of emotion (opens in a new tab), it allows you to style apps safely, quickly, and performantly - 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>;
Feaatures
- Type-safe CSS
- Component-based styling
- Zero abstraction over CSS
- Supports the power of the underlying language: pattern-matching, composition, labelled arguments, static type-safety.
- Implements utilities such as
cx
to generate classNames andcss
to generateCss.rule
- Integrates with [@resript-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 macro. They are similar to babel plugins (opens in a new tab). Run before the compilation of your code, and can transform your source-code.
In this case, expands styled-ppx extensions (e.g., %styled.div
[%styled.div]
or %cx
[%cx]
) into valid code.
You can learn more about it in Tarides blog: Introduction to OCaml ppx ecosystem (opens in a new tab).