ppx_stylesheet

ppx_stylesheet is a CSS-in-OCaml library. It allows you to define CSS rules in your OCaml source code and generate a CSS file out of them at compile time.

This project is inspired by elm-css and jsoo-css.

Example

open Css

(* this will define the global CSS variables --red and --page-width *)
let%css red = rgb 255 0 0

let%css _page_width = `px 1000

(* box_styles is a string containing an auto-generated class name *)
let box_styles =
  [%css
    [ margin `zero `auto
    ; padding (`px 10)
    ; background_color (var red)
    ; width_ "calc(var(--page-width) * 0.8)"
    ]]
in
(* it's compatible with any HTML generation library, e.g. dream-html *)
div [class_ box_styles] [ p [] [txt "This is a red box"] ]

After running dune build the following CSS file is generated at _build/stylesheet.css:

/* Main */
:root {
  --page-width: 1000px;
  --red: rgb(255 0 0);
}
.c658277527 {
  background-color: var(--red);
  margin: 0;
  padding: 10px;
  width: calc(var(--page-width) * 0.8);
}

Features

• no runtime overhead, a single CSS file is generated at compile-time
• CSS properties are type-checked by the compiler (except for raw properties ending in '_')
• CSS class names are auto-generated by calculating a hash over the contained rules
• syntax highlighting, auto-completion and other LSP features work for CSS rules too
• define and use global CSS variables

Limitations

Some CSS features are not implemented yet:

• animations
• pseudo-classes and pseudo-elements
• at-rules such as media queries
• functions such as calc