Styles

uno implements a strict CSS-like subset. Style names accept both camelCase and kebab-case. The TypeScript type StyleName only includes camelCase names. Every value must be a string, including numbers.

node.style('backgroundColor', '#1f6fb2')
node.style('padding', '12px 16px')
node.style('flex-grow', '1')

// Invalid: numeric values are not accepted.
node.style('opacity', 0.5) // Throws an error

Units and common values

In WebGPU, rem uses the value set by ui.setRootSize() (16 by default), while vw and vh use the last values supplied to ui.setViewport().

CSS-wide keywords other than unset, CSS functions such as calc() and var(), named colors, rgb(), em, and arbitrary CSS declarations are not supported.

Resetting styles with unset

All properties accept 'unset'. Use it to clear a previously applied value:

node.style('opacity', '0.5')
node.style('opacity', 'unset')

For shorthands, 'unset' clears all the properties they expand into. For example, it clears padding on all four sides:

node.style('padding', '12px 16px')
node.style('padding', 'unset')

Framework adapters automatically apply 'unset' when a previously applied property is removed from the style object. In this React example, changing dimmed from true to false removes opacity and clears its previous value:

function Example({ dimmed }: { dimmed: boolean }) {
  return <View style={dimmed ? { opacity: '0.5' } : {}} />
}

Style properties

pointerEvents: 'none' removes a node from WebGPU hit testing.

The WebGPU renderer uses MTSDF alpha distance for strokes and shadows and the RGB distance field for the glyph fill.

Longhands are also public style names. For example, backgroundSizeWidth, backgroundPositionY, and every side-specific border property can be assigned directly.

Rendering differences

• Opacity: WebGPU multiplies ancestor opacity into each drawable separately. Overlapping elements can therefore look different from CSS, which composites the subtree before applying group opacity.
• Overflow: overflow: 'hidden' and overflow: 'scroll' clip children to a rectangle. borderRadius does not round this clip, so children can remain visible in the rounded corners.

Images and objectFit

objectFit is not a core style name. It is an Image component option implemented by the framework adapters:

When neither dimension is supplied, Image uses the registered resource dimensions. When only one is supplied, it derives aspectRatio. Values inside style take precedence over the component's width and height props.