styled-ppx: How to mimic a JavaScript feature and over-engineering CSS
summary
Project implements styled-ppx: a ReScript/Reason OCaml PPX that parses embedded CSS, generates type-safe ReScript bindings, and emits hashed classnames at compile time. It includes a custom Menhir parser for modern CSS and a parser for MDN’s Backus-style grammar to validate ~200 CSS properties and values. Interpolation is supported but restricted to values (e.g. lengths, colors) so the compiler infers types and produces errors for mismatches. Result is working type-checked CSS in ReScript and enough traction to turn the repo into a job opportunity.
AI-written summary · about
chapters (15)
- 0:00Introduction and speaker intro
- 1:33CSS in JS origins and React impact
- 7:17Why CSS in JS became popular
- 9:27Introduction to OCaml and ReasonML
- 12:34ReasonML and ReScript evolution
- 14:02Motivation for styled-ppx project
- 16:49Understanding PPX in OCaml
- 20:25Designing styled-ppx syntax
- 22:53CSS parsing and AST transformation
- 24:44Adding type safety to CSS properties
- 26:54Implementing CSS property validation
- 29:03Solving interpolation with type safety
- 31:10Project lessons and conclusions
- 32:56PPX as a compiler learning path
- 33:40Q&A and closing
