Possible bug in plugin-css with typography tokens
torstendaeges opened this issue · comments
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
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}"
}
}
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 🙂
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.