Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/davesnx/styled-ppx/llms.txt

Use this file to discover all available pages before exploring further.

The %css / [%css] extension parses a single CSS declaration string at compile time and returns a Css.rule value. It is the smallest building block in styled-ppx — useful when you want to define one reusable rule and then compose it with others via the Array API or feed it into %cx and %styled.*.

​
Basic usage

Pass a single property: value pair as a string literal. The extension returns a typed Css.rule value. 
let rule: Css.rule = %css("display: block")

​
Features

  • Single declarations only. You may write exactly one property: value pair — for example color: blue. Multiple declarations (color: blue; background-color: red) and selector blocks (:hover { color: blue }) are not accepted. Use %cx or %styled.tag for those cases.
  • The trailing semicolon is optional. display: block; and display: block are identical.
  • No curly braces. Writing { display: block } is invalid inside %css.

​
What is NOT allowed

The following patterns will produce a compile-time error. Use %cx or %styled.tag instead.
Invalid in %cssUse instead
Multiple declarations: color: red; background: blue%cx
Selector blocks: &:hover { color: red; }%cx
At-rules: @media (...) { ... }%cx
Outer curly braces: { display: block }Remove the braces

​
Primary use case: building rule arrays

%css shines when combined with the Array API. You can define individual rules, mix in CSS.unsafe for unsupported properties, and assemble them into a class name or a styled component: 
let block: Css.rule = %css("display: block")
let muted: Css.rule = %css("opacity: 0.5")
let randomProperty = CSS.unsafe("-webkit-invented-property", "10px")

let picture = %cx([block, muted, randomProperty])
When you need selectors, media queries, or more than one declaration in a single extension call, reach for %cx instead. For fully programmatic rule lists, use the Array API.

Build docs developers (and LLMs) love

Get started for freeTalk to us