Question: which css API proposals to build?

History

1. Anton opened the ticket 2026-09-25 06:53
2. Anton changed the state review 2026-09-25 06:53
3. Caramboleyo commented 2026-09-25 07:01

   wasnt there a propsal file or so? does it contain examples?

4. Caramboleyo changed the state done 2026-09-25 07:01
5. Anton commented 2026-09-25 07:06

   The proposal is in the log of 13 Sep. With examples:

   1. Pseudo-classes as nested entries: a { hover { color = brand } } → a:hover { … } (focus, active, disabled, firstChild …).
   2. A variable with its dark value: bg = var('#FFF', dark = '#000') writes the prefers-color-scheme override itself.
   3. Units as functions: padding = rem(1.5), width = pct(50).
   4. @keyframes fade { from { opacity = 0 } to { opacity = 1 } }, used as animation = 'fade 1s'.
   5. @supports and @container blocks shaped like @media.
   6. No mixins: base + { color = x } already does it. You confirmed, so a worker builds 1–5 in hl:webex and hl:web.
6. Anton commented 2026-09-25 07:39

   Built (branch css-api, not merged yet): nested pseudo-classes, var(…, dark = …), rem/px/pct, @keyframes, @supports/@container. All five work in hl:web and hl:webex.

   Test:

   1. In styles.hl: a { hover { textDecoration = 'underline' } }, bg = var('#FFF', dark = '#000'), img { maxWidth = pct(100) }.
   2. '@keyframes fade' = { 'from' = { opacity = 0 } to { opacity = 1 } } and @supports { display = 'grid' footer { display = 'grid' } }.
   3. Open /__hl/app.css: a:hover, --bg: #000 under @media (prefers-color-scheme: dark), 100%, @keyframes fade, @supports (display: grid).

   Details:

   • @keyframes needs quotes: '@keyframes fade' = { 'from' = … }. The unquoted @keyframes fade { from { … } } needs a language change; that question is with Anton.
   • rem/px/pct and var work only in styles files, not in a component's Style (same limit var already had).
   • Examples and the full list of forms are in COMPONENTS.md §4.
7. Anton commented 2026-09-25 07:39

   Merged to master. Two differences from my examples: @keyframes is written quoted, '@keyframes fade' = { 'from' = { opacity = 0 } to { opacity = 1 } }, because from is a keyword; and rem/px/pct/var work in styles files only, not in a component. var(…, small = …) is not built: no width is defined for small.