"Styled Components" Syntax

css can be embedded within an OCaml expression. Spiritually similar to styled components. This will expand into a Vdom.Attr.t:

Vdom.Node.div ~attrs:[ [%css {|
  background-color: tomato;
  min-width: 2rem;
  min-height: 2rem;
|}] ] []

It also has the same interpolation syntax as ppx_string:

let f (color : string) =
  Vdom.Node.div ~attrs:[ [%css {|
    border: 0.3rem solid %{color};
  |}] ] []

like ppx_string, you can specify a module, it will call the module's to_string_css function:

let f (color : Css_gen.Color.t) =
  Vdom.Node.div ~attrs:[ [%css {|
    border: 0.3rem solid %{color#Css_gen.Color};
  |}] ] []

You can also use Nested CSS:

[%css {|
  background-color: tomato;
  &:hover {
    background-color: red;
  }
|}]

"Stylesheet" Syntax

The recommended way of using ppx_css is via the styled_component syntax. However, in some situations, you do need to use @media/@keyframes other things that are not expressible in the styled_component syntax/not expressible with nested CSS. In such scenarios, css also has a "stylesheet" syntax available:

module Styles = [%css stylesheet {|
 .card:hover {
    background-color: tomato;
 }

 :root {
    background-color: tomato;
  }
|}]

It will generate Styles.card : Vdom.Attr.t that you can then attach to style your app. PPX CSS will additionally do the following things behind the scenes:

• It will hash your identifiers. Normal CSS is prone to name clashes. PPX_CSS adds a unique hash to your classnames (e.g. "card_hash_12345") to be resilient against CSS naming clases. You do not need to add unique prefixes while using ppx_css.
• It will register your CSS. You do not need to serve/bundle your own CSS files. Under the hood, ppx_css registers your styles using the CSSStylesheet API.

You can opt-out of hashing behavior/customize it with the following options. The syntax for sending options is: [%css stylesheet {|...css string...|} ~option_name:OPTION_VALUE]

• ~dont_hash:string list: Will not hash the identifiers it seems Will not hash the identifiers it sees. (e.g. [%css stylesheet {||} ~dont_hash:["card"]])
• ~dont_hash_prefixes:string list: Will not hash identifiers that match that prefix. (e.g. [%css stylesheet {||} ~dont_hash_prefixes:[--]] will stop hashing all css variables.)
• ~rewrite:(string * string) list: Let's you change what each identifier is rewritten to. (e.g. [%css stylesheet {||} ~rewrite:["foo", "bar"]] rewrites "foo" into "bar")

The stylesheet syntax also generates a For_referencing module that includes - Styles.For_referencing.card : string - the post-hashed name.

If you use CSS Variables, it will also generate a Variables module that has two functions: set: ?css_variable1:string -> ?css_variable2:string -> unit -> Vdom.Attr.t and set_all : css_variable1:string -> css_variable2:string -> Vdom.Attr.t that let you set the post-hashed variables.