Open davesnx opened 4 months ago
The problem remaining to solve is the static interpolation:
let small = `px 10 in
let classname = [%cx {| margin: $(small); |}];
How can we access small
, and turn it into a CSS variable?
let%cx classname = {
let lola = small in
{| font-size: $(lola) |}
};
let%css_var = `px 10 in
(* let small = CssJs.publishGlobalVar (__MODULE__ ++ "-small",`px 10); `px 10 in *)
let classname = [%cx {| margin: var(--small); |}]
(Problems of hashing name, and others)
let classname = [%cx {| margin: $(small); |}] @@ { small: small }
We can remove the runtime completely and go for static styles. Generate CSS files in the _build folder (for Melange/native) and in-source in ReScript.
Design
styled.div
cx
Ideal plan
Some JavaScript implementations
withCSSVar
is a simple helper to access/modify css variables in your code