Skip to content

Getting Started

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


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": [
"ppx-flags": ["@davesnx/styled-ppx/ppx"]


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 */
rel="noopener noreferrer"
<span className={[%cx "color: black; position: absolute; left: 0px;"]}>


If you want to try it out, just fork 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