ReScript

ReScript version supported are v9 and v10.

Install

yarn add @davesnx/styled-ppx
# Or
npm install @davesnx/styled-ppx

Packages available

@davesnx/styled-ppx/ppx is the ppx as a binary, transforms %styled.div(""), %cx("") and %css("")
@davesnx/styled-ppx/rescript is library with the runtime (expose CSS)

Update `bsconfig.json`

Add "@davesnx/styled-ppx/ppx" under bsconfig "ppx-flags". The diff on bsconfig.json should contain the following:

{
  "bs-dependencies": [
    "@rescript/react",
+   "@davesnx/styled-ppx/rescript",
  ],
+ "ppx-flags": ["@davesnx/styled-ppx/ppx"]
}

Note: @rescript/react is optional, and only needed if you use styled components (%styled.div(``)).

Example

module Link = %styled.a((~color=CSS.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={CSS.hex("333333")}
    href="https://sancho.dev"
    rel="noopener noreferrer">
    {React.string("sancho.dev")}
  </Link>
</div>

Playground

If you want to try it out, just fork https://github.com/davesnx/try-styled-ppx (opens in a new tab) and follow the installation instructions there.

Introduction Melange