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.
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");
- Install from from github (not published on opam)
opam pin add -y jsoo-css https://github.com/ml-in-barcelona/jsoo-css.git
- Add
jsoo-css
library on your executable stanza withmodes js
(executables
(names index)
(modes js)
(libraries jsoo-css))
- For emotion, need to provide global dependency with
(js_of_ocaml (javascript_files globals.js))
// globals.js
joo_global_object.emotion = require("@emotion/css");
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.