style-ppx - experimental CSS-in-JS like API in Reason

A project that includes the minimum configuration for a ppx called style_ppx, a project that uses Reason and Esy.

style_ppx implements a ppx that applies the record or object to the make function defined in the Style module.

So, the code:

module Style = {
  let make = (~backgroundColor, ~width, ~height, ()) => ...;
};

// Record style
Style({
  backgroundColor: "papayawhip",
  width: 42.->dp,
  height: 42.->dp
});

// Object style
Style({
  "backgroundColor": "papayawhip",
  "width": 42.->dp,
  "height": 42.->dp
});

// dp is also now the default for float values for attributes of "size" type
Style({
  backgroundColor: "papayawhip",
  width: 42., // <-- look ma' no dp!
  height: 42.->dp,
  flex: 1., // <-- ppx does not touch this because it isn't a "size" attribute
});

Is transformed into:

make(
  ~backgroundColor="papayawhip",
  ~width=42.->dp,
  ~height=42.->dp,
  ()
);

Files and folders

The example contains a couple of different targets that will be handled by dune (an OCaml build system) to use the ppx in different projects:

• The library: located under lib folder. It is used directly by native projects, and indirectly by BuckleScript projects
• The standalone binary: BuckleScript does not provide a way to compose multiple ppxs together, so each ppx gets called individually, getting a serialized version of the AST, using the -ppx compiler flag behind the scenes. This can be configured in BuckleScript projects by using the ppx-flags key in bsconfig.json (see "Examples" section below).

For this reason, style_ppx exposes an executable that can be consumed by BuckleScript projects.

Examples

The repo contains a couple of demo examples that show one way to consume the ppx from both BuckleScript and native environments.

Check the readmes on each example folder:

• BuckleScript
• Native

Attribution

• The PPX is heavily based on the following project: https://github.com/odis-labs/ppx_obj_make
• If you need something that is far more complete and actually used in production try styled-ppx