A CSS Engine in OCaml

10 hours ago

The author has rewritten their website multiple times in OCaml and wanted a fully OCaml-based pipeline for Markdown to styled HTML and CSS using Tailwind CSS without Node.js.
To ensure correctness when porting Tailwind CSS generation to OCaml, they needed to compare CSS outputs between the JavaScript original and OCaml port, requiring a modern CSS diff tool.
Existing CSS diff tools lacked support for modern CSS features, so the author developed Cascade, a 30,000-line OCaml library for parsing, generating, optimizing, and diffing CSS.
Cascade includes a structural diff tool called cssdiff, which can run in the browser via js_of_ocaml and provides actionable comparisons by highlighting rule changes at the AST level.
The library supports a comprehensive set of CSS features, includes over 100 typed constructors for properties, and offers CLI tools for formatting, minifying, optimizing, and comparing CSS.
Testing involved differential comparison against Tailwind's reference output, ensuring correctness by requiring exact byte-for-byte matches to avoid hidden bugs.
Cascade's development was driven by personal needs but has broader utility for OCaml projects dealing with CSS, offering a typed alternative to string manipulation.

Hasty Briefsbeta