by davesnx

davesnx / styled-ppx

styled-components in Reason and OCaml

200 Stars 13 Forks Last release: 3 months ago (v0.20.1-0) MIT License 334 Commits 31 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


styled-ppx is the ppx that enables CSS-in-Reason. Build on top of emotion, it allows you to style apps quickly, performant and as you always done it.

Allows you to create React Components with Type-safe CSS style definitions that don't rely on a specific DSL and great error messages:

BETA: This ppx is in an early stage ⚠️. Meaning that it doesn't support full functionality as emotion or styled-components. But you can safely use it, as it would respect Compatible Versioning. In case you want to know more, take a look at the ROADMAP, or feel free to chat on Discord: @davesnx#5641


implements a ppx that transforms

extensions points into
modules with bs-emotion as styles, which does all the CSS-in-JS under the hood thanks to emotion.

This is how you can write components in ReasonML or OCaml with this ppx:

Standard styled component

module StyledComponent = [%styled.div
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;

ReactDOMRe.renderToElementWithId( {React.string("- Middle -")} , "app", );

Dynamic styled component

module Dynamic = [%styled
  (~color, ~background) => {j|
  color: $color;
  background-color: $background;

ReactDOMRe.renderToElementWithId( {React.string("Hello!")} , "app", );

Inline css function

   {React.string("Hello!")} ,

For further detail, take a look in here.


I love CSS and I'm coming from the JavaScript world: writing React with styled-components mostly. I found to be one of the best combos for writting scalable frontend applications. When I arrived to Reason wasn't a thing. Even people were asking for it (a few times).

So I took the time to create it with help from @jchavarri 🙌.

If you want to know more about how it works or what are the benefits I recommend to watch my talk at ReasonSTHLM Meetup


This package depends on bs-emotion, ReasonReact and BuckleScript, make sure you follow their installations.

on native projects

esy add davesnx/styled-ppx

on BuckleScript projects

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

And add the PPX in your

  "bs-dependencies": [
  "ppx-flags": ["@davesnx/styled-ppx/styled-ppx"]

However, if you want to use

in BuckleScript: Create an
file with the content:
  "dependencies": {
    "styled-ppx": "*",
    "ocaml": "~4.6.1000"
  "resolutions": {
    "styled-ppx": "davesnx/styled-ppx"

And add the PPX in your

  "ppx-flags": ["esy x styled-ppx.exe"]

If you want to try out of the box a project, just visit and follow the instalation process there.

Editor Support

One of the fears of using a ppx is editor support, we belive that having compiling errors and syntax highlight would be an amazing experience. Install the VSCode extension:

VSCode Extension

  • If you are interested on another editor, please fill an issue and we would consider.

Thanks to

Thanks to Javier Chávarri, for helping me understand all the world of OCaml and his knowledge about ppx's. It has been a great experience. Inspired by @astrada

and his CSS Parser. Thanks to ahrefs/bs-emotion and emotion.


We would love your help improving styled-ppx, there's still a lot to do. The roadmap lives under the Projects in GitHub. Take a look, the tasks are well organized and clear for everybody to pick any!

You need

, you can install the latest version from npm:
yarn global add [email protected]
# Or
npm install -g [email protected]

NOTE: Make sure

esy --version
returns at least
for this project to build.

Then run the

command from this project root to install and build depenencies.

Now you can run your editor within the environment (which also includes merlin):

esy vim

After you make some changes to source code, you can re-run project's build again with the same simple

command and run the native tests with
esy test

This project uses Dune as a build system, if you add a dependency in your

file, don't forget to add it to your
files too.

Running Tests

You can test compiled executable (runs

specified in

This will run the native unit test.

esy test

This tests only ensures that the output looks exactly as a snapshot, so their mission are to ensure the ppx transforms to a valid OCaml syntax.

If you want to run Bucklescript's integration test instead, you can do:

cd test/bucklescript
yarn install
yarn build
yarn test

This tests are more like an end to end tests, that ensures that emotion have the correct methods for each CSS property.

Happy reasoning!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.