CSS Properties

Unistyle maps theme properties to CSS through a descriptor-based system. Each CSS property has a descriptor that defines how to process the value.

Descriptor Types

simple — Pass-Through

Values used directly as CSS. No unit conversion.

{ display: 'flex', position: 'relative', color: 'red', fontFamily: 'sans-serif' }
// → display: flex; position: relative; color: red; font-family: sans-serif;

Properties: display, position, boxSizing, float, flexDirection, flexWrap, alignItems, justifyContent, color, fontFamily, fontWeight, fontStyle, textAlign, textDecoration, textTransform, whiteSpace, overflow, overflowX, overflowY, visibility, cursor, pointerEvents, userSelect, objectFit, objectPosition, listStyleType, listStylePosition, backgroundAttachment, backgroundClip, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize, borderCollapse, tableLayout, verticalAlign, resize, wordBreak, wordWrap, textOverflow, appearance, touchAction, willChange, and many more.

convert — Number to rem

Numbers are converted to rem using rootSize. String values pass through unchanged.

{ fontSize: 16, gap: 24, lineHeight: 1.5 }
// With rootSize=16:
// → font-size: 1rem; gap: 1.5rem; line-height: 1.5rem;

{ fontSize: '2em', gap: 'auto' }
// → font-size: 2em; gap: auto;

Properties: fontSize, gap, rowGap, columnGap, gridAutoRows, gridAutoColumns, lineHeight, letterSpacing

convert_fallback — Fallback Chain + Conversion

Picks the first non-null value from a fallback chain, then converts:

{ size: 200, minSize: 100 }
// → width: 12.5rem; height: 12.5rem; min-width: 6.25rem; min-height: 6.25rem;

{ width: 300, height: 200 }  // width/height override size
// → width: 18.75rem; height: 12.5rem;

edge — Spacing Shorthands

Handles margin, padding, inset, and border properties with full/x/y/side expansion.

Input Keys

Same pattern for padding, inset, borderWidth, borderStyle, borderColor.

Priority Resolution

1. Start with full value for all sides
2. x overrides left and right
3. y overrides top and bottom
4. Individual sides override everything

{ padding: 16, paddingX: 24, paddingTop: 32 }
// → padding: 2rem 1.5rem 1rem 1.5rem;
//   (top: 32→2rem, right: 24→1.5rem, bottom: 16→1rem, left: 24→1.5rem)

Shorthand Optimization

Output is optimized to the shortest valid CSS shorthand:

Logical Properties

CSS Logical Properties are also supported:

{ marginInline: 16, paddingBlock: 8 }
// → margin-inline: 1rem; padding-block: 0.5rem;

{ marginInlineStart: 16, paddingBlockEnd: 8 }
// → margin-inline-start: 1rem; padding-block-end: 0.5rem;

border_radius — Corner Shorthands

{ borderRadius: 8 }
// → border-radius: 0.5rem;

{ borderRadius: 8, borderRadiusTopLeft: 16, borderRadiusBottomRight: 0 }
// → border-radius: 1rem 0.5rem 0rem 0.5rem;

special — Custom Handlers

{ fullScreen: true }
// → position: fixed; top: 0; left: 0; right: 0; bottom: 0;

{ hideEmpty: true }
// → &:empty { display: none; }

{ extendCss: (css) => css`&:hover { opacity: 0.8; }` }
// → &:hover { opacity: 0.8; }

Unit Conversion Rules

Understanding when values are converted:

Only the convert, convert_fallback, and edge descriptor types perform unit conversion. simple descriptors pass values through unchanged.

Complete Property Reference

Every property supported by unistyle, organized by category. The Type column indicates the descriptor type: S = simple (pass-through), C = convert (number→rem), CF = convert_fallback, E = edge shorthand, BR = border-radius shorthand, SP = special handler.

Position & Layout

Inset (Edge Shorthand)

Logical inset: insetInline, insetInlineStart, insetInlineEnd, insetBlock, insetBlockStart, insetBlockEnd — all type C.

Sizing

Shorthand props (not real CSS, resolved internally): size (sets both width+height), minSize (sets both min-width+min-height), maxSize (sets both max-width+max-height).

Spacing (Edge Shorthands)

Margin: margin, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft — all type E with rem conversion.

Padding: padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft — all type E with rem conversion.

Logical margin: marginInline, marginInlineStart, marginInlineEnd, marginBlock, marginBlockStart, marginBlockEnd — all type C.

Logical padding: paddingInline, paddingInlineStart, paddingInlineEnd, paddingBlock, paddingBlockStart, paddingBlockEnd — all type C.

Flexbox

Grid

Typography

Colors & Background

Borders

Shorthand border: border, borderTop, borderBottom, borderLeft, borderRight — all type S.

Border width (edge shorthand): borderWidth, borderWidthX, borderWidthY, borderWidthTop, borderWidthRight, borderWidthBottom, borderWidthLeft — type E with px unit.

Border style (edge shorthand): borderStyle, borderStyleX, borderStyleY, borderStyleTop, borderStyleRight, borderStyleBottom, borderStyleLeft — type E (no unit).

Border color (edge shorthand): borderColor, borderColorX, borderColorY, borderColorTop, borderColorRight, borderColorBottom, borderColorLeft — type E (no unit).

Border radius (corner shorthand): borderRadius, borderRadiusTop, borderRadiusBottom, borderRadiusLeft, borderRadiusRight, borderRadiusTopLeft, borderRadiusTopRight, borderRadiusBottomLeft, borderRadiusBottomRight — type BR with rem conversion.

Border other: borderSpacing (S), borderImage (S), borderImageOutset (S), borderImageRepeat (S), borderImageSlice (S), borderImageSource (S), borderImageWidth (S).

Logical borders: borderInline, borderBlock, borderInlineStart, borderInlineEnd, borderBlockStart, borderBlockEnd — all type S.

Visual Effects

Animations & Transforms

Scroll

Interaction

Lists

Masks

Shapes

Columns

Table & Misc

Fragmentation (Print)

API Reference

ExtendCss

Styles