Typography token aliases broken in mode-output of plugin-css

[Torsten Daeges]

The same bug I reported a few days ago (thank you very much for the quick fix btw!) managed to hide away in another spot:

I'm afraid it is still happening within mode-output:

[data-viewport="xl"] {
  --fontalias-0: v;
  --fontalias-1: a;
  --fontalias-2: r;
  --fontalias-3: (;
  --fontalias-4: -;
  --fontalias-5: -;
  --fontalias-6: b;
  --fontalias-7: o;
  --fontalias-8: d;
  --fontalias-9: y;
  --fontalias-10: T;
  --fontalias-11: e;
  --fontalias-12: x;
  --fontalias-13: t;
  --fontalias-14: );
}

Here's the code to reproduce it:

tokens.json:

{
    "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}",
        "$extensions": {
            "mode": {
                "xl": "{bodyText}"
            }
        }    
    }
}

tokens.config.mjs:

import pluginCSS from '@cobalt-ui/plugin-css';
/** @type {import('@cobalt-ui/core').Config} */

export default {
  tokens: ['./tokens.json'],
  plugins: [
    pluginCSS({
      modeSelectors: [
        {mode: 'xl', selectors: ['[data-viewport="xl"]']}
      ]
    })
  ]
};

Cobalt is a game-changer for our design system btw. Thank you!

[Drew Powers]

Oh thank you! I added a test but you’re right forgot to check for modes. It’s a quick fix though and will release it later today.

Really appreciate the kind words, and the bug reports! Any / all bug reports help make this project better, thank you!