Skip to content

Getting Started

Installation

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

With esy on native projects

esy add davesnx/styled-ppx

With npm or yarn 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 bsconfig.json file:

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

However, if you want to use esy in BuckleScript: Create an esy.json file with the content:

{
  "dependencies": {
    "styled-ppx": "*",
    "ocaml": "~4.6.1000"
  },
  "resolutions": {
    "styled-ppx": "davesnx/styled-ppx"
  }
}

And add the PPX in your bsconfig.json file:

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

If you want to try out of the box a project, just visit https://github.com/davesnx/try-styled-ppx 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.