CSS Extraction at build-time

[davesnx]

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.

• We will remove the runtime completely allowing much faster implementation
• Output real CSS (can be extracted to a new file, cached)
  • Need to know how to generate files on the same folder (both in rescript and melange)
• Dynamic components can be translated to CSS variables
  • Is that possible?
    • https://pawelgrzybek.com/interpolate-css-custom-properties-values/
    • There are a few limitations: media-queries/selectors
  • Which dynamic values aren't representable as CSS variables?
    • If there's a list of them, can we generate inline styles for those?
• We can have development type-safety if we keep the parsing/type-checking + inline styles at run-time.
  • Not sure how thought, maybe with unboxed?
• We already have a css-in-js logic implemented in native

Design

styled.div

module C = [%styled.div "height: 100%"]
(* pushes into the Stylesheet ".div12312 {height: 100%}" *)
(* module C = <div className="div12312" /> *)

module C = [%styled.div (~what) => "width: $(what); height: 100%"]
(* pushes static properties ".div12312 {height: 100%}" *)
(* generates dynamic properties with CSS vars ".div12345 {width: (--var-what)}" *)
(* module C = <div className="div12312 div12345" style={ReactDOM.Style.make("--var-what": what)} /> *)

cx

let cx = [%cx "height: 100%"]
(* pushes properties ".hash {height: 100%}" *)
(* let cx = ".hash" *)

Ideal plan

• Understand what it means 0 runtime cost with dynamic styling compiledcssinjs.com https://github.com/callstack/linaria
• Read a few resources about it
  • https://shud.in/posts/ssr-streaming-and-css-in-js
  • https://github.com/andreipfeiffer/css-in-js
  • https://medium.com/@tkh44/writing-a-css-in-js-library-from-scratch-96cd23a017b4
  • https://scrimba.com/g/gcssvariables
  • https://github.com/threepointone/glam/tree/e9bca3950f12503246ed7fccad5cf13e5e9c86e3
  • https://www.youtube.com/watch?v=Gw28VgyKGkw&ab_channel=LeeRobinson
  • https://github.com/tw-in-js/twind
  • https://joshwcomeau.com/css/css-variables-for-react-devs/
  • https://www.lekoarts.de/javascript/writing-performant-css-with-vanilla-extract
  • Rethinking CSS - Introducing Stylex https://youtu.be/ur-sGzUWId4
  • The problem with importing css https://www.coolcomputerclub.com/posts/importing-css
  • Take a look at ppx_css from janestreet https://github.com/janestreet/ppx_css/blob/master/inline_css/src/inline_css.ml
  • React 18's discussion Library Upgrade Guide: <style> (most CSS-in-JS libs) reactwg/react-18#110
• Create the logic at runtime first (styled-ppx.emotion-native)
• Implement a CSS printer for static styles
  • Can we reuse server-emotion css module to print it
    • Re-implement all css_to_emotion/css_types.Debug and Declarations_to_emotion
  • Create a CSS pretty printer
    • https://github.com/janestreet/ppx_css/blob/master/css_jane/src/css_jane.ml
    • https://github.com/astrada/ocaml-css-parser/blob/master/test/css_fmt_printer.ml
    • https://git.chimrod.com/css_lib.git/tree/lib/print.ml
  • Apply SCSS to CSS transformations
    • Ref: https://github.com/postcss/postcss-nested
    • ensure selectors are “resolved”
    • ensure & in selectors are replaced with the parent hash
    • ensure media queries are at the top level
    • ensure media queries render with “and”
• Generate static files from the output of the server-emotion
  • Generate css files similarly to https://github.com/hyper-systems/rescript-sx
  • Create a cache for it (don’t re-generate files that don’t change)
  • Avoid the hashing in testing (or add labels)
• Dynamic styling
  • Parser should support CSS variables
  • Render to styles should render to inline styles as well (native-react + to_string)
• Support dynamic values. (Transform to CSS variables and inject static CSS)
  • What should we do on interpolation in selectors and mediaqueries?
• Remove the "bridge" from css to bs-emotion and move it to inline-styles
• Implement a vendor-prefixer for unsupported properties https://github.com/kripod/style-vendorizer (styled-ppx.emotion-native)
• Remove array API? and css extension?

Some JavaScript implementations

• https://github.com/stereobooster/css-in-js-101
• https://4catalyzer.github.io/astroturf/introduction
• https://twind.dev/handbook/introduction.html#features
• https://github.com/microsoft/griffel
• https://github.com/CraigCav/css-zero
• https://github.com/callstack/linaria
• https://github.com/modulz/stitches
• https://github.com/atlassian-labs/compiled
• https://github.com/jsxstyle/jsxstyle
• cssx
  https://github.com/krasimir/cssx/tree/master/packages/cssx
  https://www.smashingmagazine.com/2016/04/finally-css-javascript-meet-cssx/
• emotion
  https://github.com/emotion-js/emotion/blob/v9.2.12/packages/create-emotion/src/index.js
  https://github.com/thysultan/stylis.js/tree/master/src
• Zero-runtime CSS-in-TypeScript with 🧁 vanilla-extract
  https://www.youtube.com/watch?v=-Idub5K7K6Q&t=2556s
• https://github.com/antfu/unocss
• https://github.com/justjavac/postcss-rs
• https://github.com/4Catalyzer/astroturf
• https://twitter.com/devongovett/status/1454126641555386372?s=28
• https://blogg.bekk.no/increasing-the-performance-of-elm-css-34075512d6a6
• withCSSVar is a simple helper to access/modify css variables in your code
• https://github.com/kentaromiura/withCSSVar/tree/main

[davesnx]

The problem remaining to solve is the static interpolation on cx

let small = `px 10 in
let classname = [%cx {| margin: $(small); |}];

How can we access small, and turn it into a CSS variable?

Possible solutions

Solution A

Change cx into let%cx and expose everything inside the scope block:

let%cx classname = {
  let lola = `px 10 in
  {| font-size: $(lola) |}
};

let classname = {
  let _ = Css.global_var "lola" (`px 10); in
  "r4nd0mCl4sSN4M3"
};

:root {
  --lola: 10px;
}

.r4nd0mCl4sSN4M3 {
  font-size: var(--lola);
}

Problems

• Complext AST transformations are always tricky
• Changing the types is a bad idea
• What to do with StyleVars approach?
  • What about name conflicts?
  • What about let bindings?

module StyleVars = struct
  let lola = `px 10
end

let%cx classname = {
  let lola = StyleVars.lola
  {| font-size: $(lola) |}
};

---

Solution B

Create a new css extension css_var that pushes into a global :root

let%css_var small = `px 10 in
(* Will be transformed into a side-effect + the value:
  let small = Css.publish_global "-small" `px 10; `px 10 in *)
let classname = [%cx {| margin: var(--small); |}]

:root {
  --small: 10px;
}

.lola {
  margin: var(--small);
}

Problems

• What about let%css small = getSize ()? Probably enforcing to be a primitive (ensure it's not a runtime thingy)
• What about Module.value access?
• CSS Variables are global, what about collisions?

---

Solution C

cx has runtime and is an abstract type, also a new prop "cx" (<div cx) to transform from abstract to className/style

module Css = struct
  type cx = { static: string; dynamic: unit => ReactDOM.Style.t }

  let merge cxa cxb =
    { static: cxa.static ++ " " ++ cxb.static; dynamic: () => ReactDOM.Style.make(~unsafe=cxa.dynamic() ++ cxb.dynamic(), ()) }
end

let small = `px 10 in
let classname: CSS.cx = [%cx {| margin: $(small); |} { small }]
(* .lola {
  margin: var(--lola-small);
} *)
let classname: CSS.cx = { static: "lola", dynamic: Css.variable("small", small) };

Problems

• What about dynamic with more than one variable?
• Merging is an issue
• Order is an issue
• A lot of code to implement

let foo: string = [%cx {| margin: $(small); |}];
let bar: string = [%cx {| margin: $(small); |}];
let className = foo ++ " " ++ bar
let className = Css.merge foo bar

---

Solution D

Similar to B, but with a CSS-like approach with :root {}. Create a [%root] extension which expose everything to the global CSS root. Needs to work with structure_items with value bindings, but also with modules.

Example 1

[%root
  let lola = `px 10
]

:root {
  --lola: 10px;
}

let classname = [%cx {| font-size: $(lola) |}];

.lola {
  font-size: var(--lola);
}

Example 2

[%root
  module StyleVars = struct
    let lola = `px 10
  end
]

:root {
  --lola: 10px;
}

let classname = [%cx {| font-size: $(StyleVars.lola) |}];

.lola {
  font-size: var(--lola);
}