Files
webstudio/packages/css-engine
Oleg Isonen 44a5c5f265 feat: Parse color functions with CSS variable alpha channel (#5660)
ref
https://github.com/webstudio-is/webstudio/issues/3574#issuecomment-4116312483

 (e.g. Taillwind's rgb(r g b / var(--tw-opacity)))

- css-engine/schema: extend ColorValue.alpha to number | VarValue
- css-engine/to-value: serialize VarValue alpha using toValue()
- css-data/parse-css-value: add parseColorWithVarAlpha using css-tree
AST substitution (no fragile string replacement); inject fallback: 1
when var has no explicit CSS fallback
- style-object-model: resolve VarValue alpha in substituteVars so the
color picker receives a number when the custom property is defined
- color-control: use VarValue.fallback for the picker when alpha is
still unresolved, falling back to 1 only as a last resort
2026-03-24 14:48:18 +01:00
..
2023-02-14 11:15:24 +01:00

CSS Engine

This package is designed to render effectively CSS in the format produced by Webstudio Builder. It is using CSS variables for all dynamic parts and can render at runtime as for usage on Live Canvas in the Builder as well as for extracting a fully static style sheet for production.