Getting Started

Depends on bs-css with bs-css-emotion and rescript-react, make sure you have them installed first.

Install

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

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

Update `bsconfig.json`

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

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

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

Example

module Link = %styled.a((~color="#4299E1") => `
  font-size: 1.875rem;
  line-height: 1.5;
  text-decoration: none;
  margin: 0px;
  padding: 10px 0px;
  color: $(color);
`)
 
module Layout = %styled.div([|
  %css("display: flex"),
  %css("width: 100%;"),
  %css("height: 100%;"),
  %css("justify-content: center;"),
  %css("align-items: center"),
|])
 
/* Later on a component */
<Layout>
  <Link
    color="#333333"
    href="https://sancho.dev"
    rel="noopener noreferrer"
  />
  <span className={%cx(`color: black; position: absolute; left: 0px;`)}>
    {React.string("sancho.dev")}
  </span>
</Layout>

module Link = %styled.a((~color="#4299E1") => `
  font-size: 1.875rem;
  line-height: 1.5;
  text-decoration: none;
  margin: 0px;
  padding: 10px 0px;
  color: $(color);
`)
 
module Layout = %styled.div([|
  %css("display: flex"),
  %css("width: 100%;"),
  %css("height: 100%;"),
  %css("justify-content: center;"),
  %css("align-items: center"),
|])
 
/* Later on a component */
<Layout>
  <Link
    color="#333333"
    href="https://sancho.dev"
    rel="noopener noreferrer"
  />
  <span className={%cx(`color: black; position: absolute; left: 0px;`)}>
    {React.string("sancho.dev")}
  </span>
</Layout>

Playground

If you want to try it out, just fork https://github.com/davesnx/try-styled-ppx and follow the instalation there.

Editor Support

One of the downsites of using an embedded language (CSS) into another (ReScript) is the limited editor support. Because of that we provide a VSCode extension that brings syntax highlight.

Install the VSCode extension: VSCode Extension

If you are interested on another editor, please fill an issue