LiveStyle.Types (LiveStyle v0.13.1)

View Source

Typed CSS custom property helpers for @property rule generation.

These functions create type specifications for CSS custom properties, enabling smooth transitions and animations on custom properties.

This module aligns with StyleX's stylex.types API.

Examples

import LiveStyle.Types

vars [
  rotation: angle("0deg"),
  progress: percentage("0%"),
  scale: number(1)
]

Generated CSS

@property --rotation {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

Summary

Types

property_type()

Functions

angle(initial)

Angle type (<angle>).

any(initial)

Any type (*).

color(initial)

Color type (<color>).

custom(syntax, initial)

Creates a property with a custom syntax.

custom_ident(initial)

Custom identifier type (<custom-ident>).

image(initial)

Image type (<image>).

integer(initial)

Integer type (<integer>).

length(initial)

Length type (<length>).

length_percentage(initial)

Length or percentage type (<length-percentage>).

no_inherit(property)

Creates a non-inheriting property type.

number(initial)

Number type (<number>).

percentage(initial)

Percentage type (<percentage>).

resolution(initial)

Resolution type (<resolution>).

string(initial)

String type (<string>).

time(initial)

Time type (<time>).

transform_function(initial)

Transform function type (<transform-function>).

transform_list(transforms)

Transform list type (<transform-list>).

url(initial)

URL type (<url>).

Types

property_type()

@type property_type() :: [
  syntax: String.t(),
  initial: String.t() | number(),
  inherits: boolean()
]

Functions

angle(initial)

@spec angle(String.t()) :: property_type()

Angle type (<angle>).

Accepts values like 0deg, 90deg, 0.5turn.

any(initial)

@spec any(String.t()) :: property_type()

Any type (*).

Accepts any value. Note: properties with * syntax cannot be animated.

color(initial)

@spec color(String.t()) :: property_type()

Color type (<color>).

Accepts any valid CSS color value.

custom(syntax, initial)

@spec custom(String.t(), String.t() | number()) :: property_type()

Creates a property with a custom syntax.

Use this for complex or union types.

Examples

Types.custom("<length> | auto", "auto")

custom_ident(initial)

@spec custom_ident(String.t()) :: property_type()

Custom identifier type (<custom-ident>).

Accepts custom identifiers (unquoted strings).

image(initial)

@spec image(String.t()) :: property_type()

Image type (<image>).

Accepts url(), gradient functions, etc.

integer(initial)

@spec integer(integer()) :: property_type()

Integer type (<integer>).

Accepts whole numbers only.

length(initial)

@spec length(String.t()) :: property_type()

Length type (<length>).

Accepts values like 0px, 1rem, 10vh.

length_percentage(initial)

@spec length_percentage(String.t()) :: property_type()

Length or percentage type (<length-percentage>).

Accepts lengths or percentages.

no_inherit(property)

@spec no_inherit(property_type()) :: property_type()

Creates a non-inheriting property type.

By default, all properties inherit. Use this to create one that doesn't.

Examples

Types.length("0px") |> Types.no_inherit()

number(initial)

@spec number(number()) :: property_type()

Number type (<number>).

Accepts any numeric value (integers or decimals).

percentage(initial)

@spec percentage(String.t()) :: property_type()

Percentage type (<percentage>).

Accepts percentage values like 50%, 100%.

resolution(initial)

@spec resolution(String.t()) :: property_type()

Resolution type (<resolution>).

Accepts values like 96dpi, 2dppx.

string(initial)

@spec string(String.t()) :: property_type()

String type (<string>).

Accepts quoted string values.

time(initial)

@spec time(String.t()) :: property_type()

Time type (<time>).

Accepts values like 0ms, 1s, 300ms.

transform_function(initial)

@spec transform_function(String.t()) :: property_type()

Transform function type (<transform-function>).

Accepts a single transform function like rotate(45deg).

transform_list(transforms)

@spec transform_list([String.t()]) :: property_type()

Transform list type (<transform-list>).

Accepts a list of transform functions.

Examples

Types.transform_list([
  Functions.rotate(Units.deg(45)),
  Functions.scale(1.5)
])

url(initial)

@spec url(String.t()) :: property_type()

URL type (<url>).

Accepts URL values.