# How do I use ppx\_css?

**URL:** <https://discuss.ocaml.org/t/how-do-i-use-ppx-css/12198>\
**Category:** Learning\
**Created:** [May 21, 2023, 11:12am UTC](https://discuss.ocaml.org/t/how-do-i-use-ppx-css/12198 "2023-05-21T11:12:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![zeroexcuses](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/zeroexcuses/32/1692_2.png) [@zeroexcuses](https://discuss.ocaml.org/u/zeroexcuses)\
**Post date:** [May 21, 2023, 11:12am UTC](https://discuss.ocaml.org/t/how-do-i-use-ppx-css/12198/1 "2023-05-21T11:12:06Z")

</div>

Context: I’m working through [https://github.com/janestreet/bonsai/blob/master/docs/guide/08-css.md](https://github.com/janestreet/bonsai/blob/master/docs/guide/08-css.md) , which has 3 ways of using css. I can’t get the ppx\_css one to work.

Here is my dune file:

```auto
(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

```auto
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:

```auto
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 [https://github.com/janestreet/bonsai/blob/master/docs/guide/08-css.md](https://github.com/janestreet/bonsai/blob/master/docs/guide/08-css.md) , I get the impression all we need is

```auto
+ (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](https://github.com/janestreet/ppx_css/tree/master/web_test) and I’m not seeing anything special they are doing in dune or \*.ml

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

---

<div class="post-metadata">

**Author:** ![toastal](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/toastal/32/2944_2.png) [@toastal](https://discuss.ocaml.org/u/toastal)\
**Post date:** [May 21, 2023, 12:04pm UTC](https://discuss.ocaml.org/t/how-do-i-use-ppx-css/12198/2 "2023-05-21T12:04:32Z")

</div>

> [@zeroexcuses](#):
>
> `text-align: cente;r`

Is this a typo or the issue?

---

<div class="post-metadata">

**Author:** ![askvortsov](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/askvortsov/32/3034_2.png) [@askvortsov](https://discuss.ocaml.org/u/askvortsov)\
**Post date:** [May 21, 2023, 1:02pm UTC](https://discuss.ocaml.org/t/how-do-i-use-ppx-css/12198/3 "2023-05-21T13:02:31Z")

</div>

> [@zeroexcuses](#):
>
> ```auto
> Error: Uninterpreted extension 'css'.
> 
> ```

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](https://github.com/janestreet/opam-repository). That syntax will also be released soon with [v0.16](https://github.com/ocaml/opam-repository/pull/23742) 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](https://github.com/janestreet/ppx_css/blob/master/CHANGES.md).

---

<div class="post-metadata">

**Author:** ![zeroexcuses](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/zeroexcuses/32/1692_2.png) [@zeroexcuses](https://discuss.ocaml.org/u/zeroexcuses)\
**Post date:** [May 21, 2023, 8:41pm UTC](https://discuss.ocaml.org/t/how-do-i-use-ppx-css/12198/4 "2023-05-21T20:41:42Z")

</div>

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