Getting Started
Melange

Melange

Ensure that you have set up a Melange project beforehand. If you haven't done so yet, refer to the Melange getting started documentation (opens in a new tab).

This guide assumes that you'll use opam and dune.

Install

opam install styled-ppx

Packages available

  • styled-ppx is the ppx
  • styled-ppx.css are the CSS bindings
  • styled-ppx.emotion are the emotion.sh bindings

Usage

Add styled-ppx under dune's preprocess pps for library with (modes melange) or melange.emit. Add styled-ppx.css and styled-ppx.emotion as libraries.

(library
  (name ...)
  (modes melange)
  (libraries
+   styled-ppx.css
+   styled-ppx.emotion
    reason-react)
  (preprocess
    (pps
+     styled-ppx
      melange.ppx
      reason-react-ppx)))
(melange.emit
  (libraries
+   styled-ppx.css
+   styled-ppx.emotion
    reason-react)
  (preprocess
    (pps
+     styled-ppx
      melange.ppx
      reason-react-ppx)))

Note: reason-react and reason-react-ppx are optional, and only needed if you use styled components ([%styled.div {||}]).

Example

/* This is a ReasonReact module with those styles encoded as a unique className */
module Link = [%styled.a (~color=CssJs.hex("4299E1")) => {|
  font-size: 1.875rem;
  line-height: 1.5;
  text-decoration: none;
  margin: 0px;
  padding: 10px 0px;
  color: $(color);
|}];
 
/* This is a unique className pointing to those styles */
let layout = [%cx {|
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center
|}];
 
/* Later in a component */
<div className=layout>
  <Link
    color={CssJs.hex("333333")}
    href="https://sancho.dev"
    rel="noopener noreferrer">
    {React.string("sancho.dev")}
  </Link>
</div>;
ReScriptNative