Array API

%styled.{{tag}} and %cx%cx support an alternative to the string-based API. It's the Array API, where the rules can be defined as an array of Css.Rules (from bs-css).

The Css.Rules can be created with %css or bs-css calls.

Example

Both cx and styled extensions support the following:

module Component = %styled.section([
  %css("display: flex"),
  %css("justify-content: center"),
])
 
let className = %cx([%css("display: flex;")])

module Component = %styled.section([
  %css("display: flex"),
  %css("justify-content: center"),
])
 
let className = %cx([%css("display: flex;")])

Any expression that is a Css.Rule.t is valid inside the array.

Features

Allowing composability and re-usability of CSS.
Useful to reference other variables, a function call or a pattern match.
Solves the migration from other systems (such as bs-css) and bypass styled-ppx parser that might not support a property.

Here are some illustrative examples:

module Button = %styled.button([
  buttonStyles, /* a variable reference */
  anyRandomFunction(123), /* a function call */
  boolean ? %css("width: 100%;") : %css("width: auto"), /* conditional */
])

module Button = %styled.button([
  buttonStyles, /* a variable reference */
  anyRandomFunction(123), /* a function call */
  boolean ? %css("width: 100%;") : %css("width: auto"), /* conditional */
])

module Align = %styled.div(
  (~distribute=#Center, ~align=#Center) => [
    %css("display: flex"),
    %css("height: 100%"),
    %css("width: 100%;"),
    switch distribute {
    | #Start => %css("justify-content: flex-start")
    | #Center => %css("justify-content: center")
    | #End => %css("justify-content: flex-end")
    },
    switch align {
    | #Start => %css("align-items: flex-start")
    | #Center => %css("align-items: center")
    | #End => %css("align-items: flex-end")
    },
  ]
)
 
<Align distribute=#Start align=#Start />

module Align = %styled.div(
  (~distribute=#Center, ~align=#Center) => [
    %css("display: flex"),
    %css("height: 100%"),
    %css("width: 100%;"),
    switch distribute {
    | #Start => %css("justify-content: flex-start")
    | #Center => %css("justify-content: center")
    | #End => %css("justify-content: flex-end")
    },
    switch align {
    | #Start => %css("align-items: flex-start")
    | #Center => %css("align-items: center")
    | #End => %css("align-items: flex-end")
    },
  ]
)
 
<Align distribute=#Start align=#Start />

Usage with Dynamic components

There's a nice composability where dynamic components and the Array API provides. You can create a component that can run any code before the styles. It will be called each time the component renders. Such as this example of runtime styles where it derives the color's background button based on a variant prop passed to a Theme module.

module Button = %styled.button(
  (~variant) => {
    let color = Theme.button(~variant)
 
    [
      %css("background-color: $(color)"),
      %css("width: 100%;"),
      %css("display: inline-flex"),
    ]
  }
)

module Button = %styled.button(
  (~variant) => {
    let color = Theme.button(~variant)
 
    [
      %css("background-color: $(color)"),
      %css("width: 100%;"),
      %css("display: inline-flex"),
    ]
  }
)

Note: The returned expression (the last expression of the function) need to be an array of Css.rules (it can't be a reference or a function call). This is a limitation of ppxes where it needs to check the current AST to know which type is.