ReScript

Supported versions: ReScript v9 and v10

ReScript v11 support is currently in development (track progress here).

For organizations requiring support for specific ReScript versions, we offer sponsored development options. Please reach out to discuss sponsorship arrangements for prioritized compatibility implementation.

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 the CSS module)

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 and follow the installation instructions there.

Introduction Melange