How do I use ppx_css?

Learning
1

Context: I’m working through bonsai/08-css.md at master · janestreet/bonsai · GitHub , which has 3 ways of using css. I can’t get the ppx_css one to work.

Here is my dune file:

(library
 (name bc_bonsai_guide)
 (preprocess
  (pps ppx_jane ppx_css ppx_pattern_bind ppx_typed_fields js_of_ocaml-ppx))
 (libraries
  angstrom
  async_kernel
  bonsai
  bonsai_web
  bonsai_experimental_animation
  bonsai_web_ui_form
  bonsai_web_ui_query_box
  bonsai_web_ui_search_bar
  bonsai_web_ui_drag_and_drop
  core_kernel
  core_kernel.composition_infix
  js_of_ocaml
  virtual_dom
  virtual_dom.keyboard
  incr_dom
  incr_dom_partial_render))

Here is my Ch_08.ml

open Core
open Bonsai_web


module Style =
  [%css stylesheet
       {|
       table.politicians {
         border-collapse: collapse;
         border: 1px solid brown;
       }

       table.politicians td {
         padding: 4px;
       }

       table.politicians thead {
         text-align: cente;r
         background: brown;
         color: antiquewhite;
         font-weight: bold;
       }

       table.politicians tr {
         background: antiquewhite;
       }

       table.politicians tr:nth-child(even) {
         background: wheat;
       }
       |}]

Here is the error I get:

File "ml/b_snips/bc_bonsai_guide/Ch_08.ml", line 6, characters 4-7:
6 |   [%css stylesheet
        ^^^
Error: Uninterpreted extension 'css'.

debug 1

Based on bonsai/08-css.md at master · janestreet/bonsai · GitHub , I get the impression all we need is

+  (preprocess (pps (ppx_jane ppx_css)))

I definitely have both of those in my dunefile.

debug 2

I’m looking at ppx_css/web_test at master · janestreet/ppx_css · GitHub and I’m not seeing anything special they are doing in dune or *.ml

what am I doing wrong / how do I fix this ?

1 Like
2

Is this a typo or the issue?

3

That’s actually a simple one. The documentation is for the bleeding edge, development release of Bonsai, which you can install if you follow these instructions. That syntax will also be released soon with v0.16 of Jane Street packages.

In the meantime, if you’re using the publicly released v0.15, I would look at the codebase at the time of that tag for example code. For this particular issue, instead of [%css stylesheet {|...|}] you’ll want to use [%css.raw {|...|}]. You can read more about breaking changes in the changelog of each repo. For example, with ppx_css.

2 Likes
4

Definitely a mistake on my part, but that particular compiler complaint was due to css spreadsheet vs css.raw

1 Like