Possible bug in plugin-css with typography tokens

[torstendaeges]

Hello,

I came across an issue with typography tokens today:

So "d.font.display" is an alias for the base typography token "o.font.10".
Both are $type typography.

For some reason, the output of plugin-css breaks up the reference "var(--o-font-10)" letter by letter.

  --d-font-display-0: v;
  --d-font-display-1: a;
  --d-font-display-2: r;
  --d-font-display-3: (;
  --d-font-display-4: `-;`
  --d-font-display-5: -;
  --d-font-display-6: o;
  --d-font-display-7: -;
  --d-font-display-8: f;
  --d-font-display-9: o;
  --d-font-display-10: n;
  --d-font-display-11: t;
  --d-font-display-12: -;
  --d-font-display-13: 1;
  --d-font-display-14: 0;
  --d-font-display-15: );

The same happens to all my typography tokens.

Is this a known bug? Thank you and keep up the amazing work!
Torsten

[torstendaeges]

Here's an input JSON the bug can be replicated with - the token "fontalias" gets transformed into 15 css custom properties.

{
  "bodyText": {
    "$type": "typography",
    "$value": {
      "fontFamily": ["Helvetica", "-system-ui", "sans-serif"],
      "fontSize": "1.5rem",
      "fontStyle": "normal",
      "fontWeight": 400,
      "letterSpacing": 0,
      "lineHeight": 1.5,
      "textTransform": "none"
    }
  },
  "fontalias": {
    "$type": "typography",
    "$value": "{bodyText}"
  }
}

[drwpow]

Awesome bug report, and great recreation! Found the issue very easily, and will be pushing a fix to @cobalt-ui/plugin-css. As far as I can tell, this is only a bug in the CSS plugin, but please let me know if it crops up again 🙂

[torstendaeges]

Thank you so much for the quick fix! However, I'm afraid the issue is still popping up in mode-output. Since I can't reopen this one, I'm opening a new issue for it - hope that's ok.