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;")])
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 bypassstyled-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.