Atomic CSS for OCaml (and ReasonML).
Specify CSS styles using OCaml syntax, either as let-bindings on the top level:
let%csso box =
flex_basis `auto;
width (`px 100)
or as expression in the [%csso ...]
extension:
let square n = [%csso height (`px n); width (`px n)]
or directly in the csso
attribute:
module Page = struct
let make () =
<div csso=[ use box; use (square 100) ]>
(React.string "hello!")
</div>
[@@react.component]
end
Configure csso.ppx
preprocessor in dune
file:
(melange.emit
(preprocess
(pps csso.ppx reason-react-ppx))
(libraries reason-react)
(target commonjs))
Setup a dune rule to generate extracted CSS:
(rule
(target main.css)
(mode promote)
(deps
(glob_files *.pp.ml))
(action
(with-stdout-to
%{target}
(run csso %{deps}))))
The extracted CSS will look like:
.flex-basis-auto { flex-basis: auto; }
.height-dynamic { height: var(--height); }
.width-100px { width: 100px; }
.width-dynamic { width: var(--width); }
and the generated HTML for the React component:
<div style="--width:100px;--height:100px"
class="flex-basis-auto width-dynamic height-dynamic">
hello!
</div>
Within the [%csso ...]
extension, the following syntax is supported:
property arg...
where property
is a CSS property and args...
is a set of argumentsuse expr
where expr
is an arbitrary OCaml expression of type Csso.style