jsoo-css

jsoo-css gives a complementary API for dealing with styles in jsoo. Provides implementations to inline styles or use emotion.sh to enable CSS-in-JS mechanism. Plays really well with jsoo-react but not only.

Example

module App = {
  open Jsoo_css;

  let app =
    Emotion.make([|
      display(`flex),
      width(px(1050)),
      flexDirection(`column),
      alignItems(`center),
      padding(px(80)),
    |]);

  let h2 =
    Inline.style([|padding2(~v=`px(10), ~h=`px(5)), color(Colors.grey)|]);

  let h1 = Inline.style([|color(`rgb((123, 123, 123)))|]);

  let box =
    Emotion.make([|
      color(`hex("333")),
      backgroundColor(`hex("C0FFEE")),
      padding(px(45)),
      borderRadius(px(8)),
      fontSize(px(22)),
      fontWeight(`bold),
    |]);

  [@react.component]
  let make = () => {
    <div className=app>
      <h1 style=h1> {React.string({|Hello OCamler 🐫|})} </h1>
      <h2 style=h2>
        {React.string("Welcome to the world of React & CSS-in-JS")}
      </h2>
      <div className=box>
        {React.string("This is a title styled with emotion.sh")}
      </div>
    </div>;
  };
};

React.Dom.renderToElementWithId(<App />, "demo");

Instalation

1. Install from from github (not published on opam)

opam pin add -y jsoo-css https://github.com/ml-in-barcelona/jsoo-css.git

2. Add jsoo-css library on your executable stanza with modes js

(executables
(names index)
(modes js)
(libraries jsoo-css))

3. For emotion, need to provide global dependency with (js_of_ocaml (javascript_files globals.js))

// globals.js
joo_global_object.emotion = require("@emotion/css");

Acknowledgements

This project is based on bs-css, so, many thanks to @giraud. Thanks to bs-declaredom for such a precise HTML and CSS implementation for BuckleScript. Thanks to elm-css for being an inspiration to overall API design.