CSS

Since v0.40 styled-ppx exposes a module with the runtime called CSS.

It’s used by the ppx transformation, but it’s use to construct values for CSS properties.

The library is available as a rescript packages @davesnx/syled-ppx/css and @davesnx/syled-ppx/emotion.

Usage

let small = CSS.px(10);
// Creates a CSS.length type, valid on any CSS property that accepts a length value
 
// Now, `small` can be interpolated in `[%cx ..]`, `[%css ..]` or `[%styled.tag ..]` annotation
let classname = [%cx {|margin: $(small)|}];

let small = CSS.px(10)
// Creates a CSS.length type, valid on any CSS property that accepts a length value
 
// Now, `small` can be interpolated in `[%cx ..]`, `[%css ..]` or `[%styled.tag ..]` annotation
let classname = %cx(`margin: $(small)`)

API

Values

All CSS values are available as ReScript values

let ten = CSS.px(10);
let position = CSS.block;

let ten = CSS.px(10)
let position = CSS.block

but also as polymorphic variants and both are interchangeable

let ten = `px(10); // or CSS.px(10), they are aliases
let position = `block; // or CSS.block, they are aliases

let ten = #px(10) // or CSS.px(10), they are aliases
let position = #block // or CSS.block, they are aliases

Properties

All CSS properties are available as camelCased functions.

When using the Array API can be handy to manually create properties. If you are using the ppx transformation, there’s no need, since the ppx generates them under the hood.

let faded = CSS.opacity(0.9);

let faded = CSS.opacity(0.9)

Some properties accept just a float, like CSS.opacity but there are many properties that accept more complex values, like CSS.flex.

let basic = CSS.flex(1.0, 1.0, `px(100));

let basic = CSS.flex(1.0, 1.0, #px(100))

or simply a polyvariant

let row = CSS.display(`flex);

let row = CSS.display(#flex)

Selectors About