LiveStyle.ShorthandBehavior.FlattenShorthands (LiveStyle v0.13.1)

View Source

Expands shorthand properties to their constituent longhands.

This behavior fully expands shorthand properties to their individual longhand properties. For example, margin: "10px 20px" becomes four separate margin properties.

More verbose CSS output but predictable specificity.

How It Works

When you use a shorthand like margin: "10px 20px", this behavior:

  1. Parses the multi-value input (CSS box model: top right bottom left)
  2. Returns individual longhand properties with their computed values

Example

iex> FlattenShorthands.expand_declaration("margin", "10px 20px")
[
  {"margin-top", "10px"},
  {"margin-right", "20px"},
  {"margin-bottom", "10px"},
  {"margin-left", "20px"}
]

Data-Driven Expansions

Expansion patterns are loaded at compile time from data/expand_to_longhands_expansions.txt. This data defines the multi-value parsing pattern and target longhands for each supported shorthand property.

Supported patterns:

  • 4-value - CSS box model (margin, padding, border-width, etc.)
  • 2-value - Two values (gap, overflow, margin-block, etc.)
  • border-radius - Special handling for slash syntax
  • list-style - Special parsing for type/position/image