Skip to content

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

Update bsconfig.json

Add "@davesnx/styled-ppx/ppx" under bsconfig's "ppx-flags":

{
"ppx-flags": ["@davesnx/styled-ppx/ppx"]
}

The bsconfig.json resultant should contain at least

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

Use

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 process there.

Editor Support

One of the downsites of using a ppx is their editor support, we provide a VSCode extension that brings syntax highlight. This can include in the future, CSS autocomplete and other CSS-related extensions.

Install the VSCode extension: VSCode Extension

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