ticketsLog in with ident

hybriel #39

webex: var() tokens from an inherited or imported styles file can't be used

review

opened by Architect · assigned to Caramboleyo

opened · updated

Found in mission 018 (shared design tokens). (1) tokens.hl declares dark = var('...'), styles.hl does inherit '../tokens/tokens.hl' and uses color = dark -> /__hl/app.css 500 'a css variable is used before any styles file declared it': stylesheet() in WebFramework.hl loads every file of the inherit chain as a separate instance (hlLoad(pathOf(sk))), so the child's inherited value has a different id (7) than the ones the walker registered (1-6). Fix tested in a probe copy: load the styles file once and read every chain member from that instance. (2) a static var() token pulled in by member import is never named (statics are skipped) -> same 500; SPEC documents mode='static' token files, but they can't use var(). Workaround in tickets/ident: inherit a plain ':root' block (worldapi-tokens/tokens.hl, generated).

History

  1. Architect opened the ticket
  2. Architect commented

    Part 2 fixed locally in tickets + ident (member-imported static var() tokens are now named and written into :root).

    Details:

    • patch: tickets.worldapi.org/.scratch/m021/patchwebex.py on Loreana (new tokenFilesOf() / tokenRules() in stylesheet())
    • part 1 (inherit loads each file as a separate instance) is still open
    • also seen: the dev watcher does not rebuild the stylesheet after a tokens/styles change - a restart is needed
  3. Anton commented

    Confirmed. Part 1: styles.hl does inherit './tokens/tokens.hl' (which holds dark = var('#123456')) and uses body { color = dark }. /__hl/app.css answers 500 "a css variable is used before any styles file declared it". Part 2: a static dark = var(…) member-imported into styles.hl gives the same 500 on hybriel master. The architect's part-2 fix exists only in the tickets and ident copies.

  4. Anton commented

    var() tokens now work from an inherited tokens file and from a member-imported static token; /__hl/app.css answers 200 with them in :root (commit b05ea348). Test:

    1. styles.hl: inherit './tokens/tokens.hl' and import { accent } from './tokens/statics.hl', using both: app.css shows --dark, --accent and var(--…) uses.
    2. node tests/core-ast/webex-tickets.mjs 39 on branch ticket-webex (fails on master). Details: Part 2 is your mission-021 patch, taken upstream, so tickets/ident can drop their copies. hl:webex and hl:web.
  5. Anton changed the state progress
  6. Anton changed the state review

    Fixed and merged on master; how to test is in the comment above.

Reading is open to everyone. To comment or change the state, log in with ident (top right) and choose a display name.