LiveStyle.CSSValue (LiveStyle v0.12.0)

View Source

CSS value normalization and transformation.

Follows StyleX's transform-value.js and normalize-value.js approach.

Delegates property checks to LiveStyle.Property for centralized compile-time generated lookups. Regex patterns are compiled at module level for efficiency.

Summary

Functions

normalize(value)

Normalizes a CSS value string.

to_css(v, property)

Converts a value to its CSS string representation.

to_css_property(key)

Converts an Elixir property key to CSS property name.

Functions

normalize(value)

@spec normalize(String.t()) :: String.t()

Normalizes a CSS value string.

Applies StyleX's normalize-value.js pipeline:

  • Normalize whitespace
  • Normalize timings (500ms -> .5s)
  • Remove leading zeros (0.5 -> .5)
  • Normalize zero dimensions (0px -> 0)
  • Normalize empty string quotes ('' -> "")

to_css(v, property)

@spec to_css(any(), String.t() | nil) :: String.t()

Converts a value to its CSS string representation.

Examples

iex> LiveStyle.CSSValue.to_css(10, "padding")
"10px"

iex> LiveStyle.CSSValue.to_css(0.5, "opacity")
"0.5"

iex> LiveStyle.CSSValue.to_css("0.5s", "transition-duration")
".5s"

to_css_property(key)

@spec to_css_property(atom() | String.t()) :: String.t()

Converts an Elixir property key to CSS property name.

Examples

iex> LiveStyle.CSSValue.to_css_property(:background_color)
"background-color"

iex> LiveStyle.CSSValue.to_css_property("margin-top")
"margin-top"