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.
Since v0.40, styled-ppx ships a runtime module called CSS. The PPX transformation uses it internally to emit typed CSS declarations, but you can also use it directly to build values for interpolation or to construct rules for the Array API.
Available packages
Install the runtime that matches your platform:
| Platform | Package / library |
|---|
| ReScript | @davesnx/styled-ppx/rescript (npm) |
| Melange | styled-ppx.melange (dune library, (modes melange)) |
| Native | styled-ppx.native (dune library) |
Quick start
let small = CSS.px(10)
// Creates a CSS.length type, valid on any CSS property that accepts a length value
// `small` can now be interpolated in %cx, %css, or %styled.tag
let classname = %cx(`margin: $(small)`)
Values
All CSS values are available as typed constructors on the CSS module. Polymorphic variants are direct aliases — both forms are interchangeable:
let ten = CSS.px(10)
let position = CSS.block
// Polymorphic variant aliases — identical types
let ten' = #px(10) // same as CSS.px(10)
let position' = #block // same as CSS.block
Properties
All CSS properties are available as camelCased functions that return a Css.rule. When using the Array API, calling these functions directly lets you programmatically build rule lists without writing a CSS string:
let faded = CSS.opacity(0.9)
// Properties with complex values
let basic = CSS.flex(1.0, 1.0, #px(100))
// Properties that accept polymorphic variants
let row = CSS.display(#flex)
If you are using the PPX string syntax (%cx, %styled.*), the property functions are generated for you automatically. You only need to call them manually when using the Array API.
Common value constructors
Length
| Constructor | Example | CSS output |
|---|
CSS.px | CSS.px(10) | 10px |
CSS.em | CSS.em(1.5) | 1.5em |
CSS.rem | CSS.rem(1.0) | 1rem |
CSS.vh | CSS.vh(100.0) | 100vh |
CSS.vw | CSS.vw(50.0) | 50vw |
CSS.pct | CSS.pct(50.0) | 50% |
CSS.ch | CSS.ch(2.0) | 2ch |
CSS.cm | CSS.cm(1.0) | 1cm |
CSS.mm | CSS.mm(5.0) | 5mm |
CSS.pt | CSS.pt(12) | 12pt |
CSS.fr | CSS.fr(1.0) | 1fr |
CSS.zero | CSS.zero | 0 |
Color
| Constructor | Example | CSS output |
|---|
CSS.hex | CSS.hex("ff0000") | #ff0000 |
CSS.rgb | CSS.rgb(255, 0, 0) | rgb(255,0,0) |
CSS.rgba | CSS.rgba(255, 0, 0, 0.5) | rgba(255,0,0,0.5) |
CSS.hsl | CSS.hsl(0, 100.0, 50.0) | hsl(0,100%,50%) |
CSS.hsla | CSS.hsla(0, 100.0, 50.0, 1.0) | hsla(0,100%,50%,1) |
CSS.currentColor | CSS.currentColor | currentColor |
CSS.transparent | CSS.transparent | transparent |
Angle
| Constructor | Example | CSS output |
|---|
CSS.deg | CSS.deg(45.0) | 45deg |
CSS.rad | CSS.rad(1.57) | 1.57rad |
CSS.grad | CSS.grad(100.0) | 100grad |
CSS.turn | CSS.turn(0.25) | 0.25turn |
Time
| Constructor | Example | CSS output |
|---|
CSS.s | CSS.s(1) | 1s |
CSS.ms | CSS.ms(300) | 300ms |
Easing
| Constructor | Example |
|---|
CSS.ease | CSS.ease |
CSS.linear | CSS.linear |
CSS.easeIn | CSS.easeIn |
CSS.easeOut | CSS.easeOut |
CSS.easeInOut | CSS.easeInOut |
CSS.cubicBezier | CSS.cubicBezier(0.4, 0.0, 0.2, 1.0) |
CSS.steps | CSS.steps(4, ...) |
| Constructor | Example |
|---|
CSS.translate | CSS.translate(CSS.px(10), CSS.px(20)) |
CSS.translateX | CSS.translateX(CSS.pct(50.0)) |
CSS.translateY | CSS.translateY(CSS.px(8)) |
CSS.rotate | CSS.rotate(CSS.deg(45.0)) |
CSS.scale | CSS.scale(1.2, 1.2) |
CSS.skewX | CSS.skewX(CSS.deg(15.0)) |
CSS.skewY | CSS.skewY(CSS.deg(10.0)) |
CSS.unsafe
When a CSS property is not yet supported by styled-ppx, use CSS.unsafe as an escape hatch. It accepts a raw property name and a raw value string, and returns a Css.rule you can include via the Array API:
let block: Css.rule = %css("display: block")
let randomProperty = CSS.unsafe("-webkit-invented-property", "10px")
let picture = %cx([block, randomProperty])
CSS.unsafe bypasses all type checking. Correctness is entirely your responsibility. If a property you need is missing, consider opening an issue — most properties are straightforward to add.Native-only utilities
The following functions are only available when using the styled-ppx.native dune library. They are not available in the ReScript or Melange packages.
| Function | Description |
|---|
CSS.get_stylesheet() | Returns the accumulated stylesheet as a string, for server-side rendering |
CSS.style_tag | Produces an HTML <style> tag containing the collected styles |
