LiveStyle.Compiler.CSS.Vars (LiveStyle v0.13.0)

View Source

CSS custom property (variable) generation for LiveStyle.

This module handles generating CSS output for:

  • @property rules (for typed CSS variables)
  • CSS custom property declarations in :root

@property Rules

Typed variables get @property rules for animation support:

@property --color { syntax: "<color>"; inherits: true; initial-value: blue }

CSS Variable Rules

Variables are grouped by their at-rule conditions:

:root{--v12345:blue;--v67890:red;}
@media (prefers-color-scheme: dark){:root{--v12345:lightblue;}}

StyleX Compatibility

Output follows StyleX's minified format:

  • No spaces around colons or semicolons
  • No newlines between declarations

Summary

Functions

Generate @property rules for typed CSS variables.

Generate CSS custom property declarations.

Functions

generate_properties(manifest)

@spec generate_properties(LiveStyle.Manifest.t()) :: String.t()

Generate @property rules for typed CSS variables.

Returns a string of @property rules, one per line.

generate_vars(manifest)

@spec generate_vars(LiveStyle.Manifest.t()) :: String.t()

Generate CSS custom property declarations.

Groups variables by their at-rule conditions and generates :root blocks.