Mode output in plugin-sass (CSS variable mode) uses the tokens own css-variable for all modes, not their respective targets

[Torsten Daeges]

Hello again!

We're using plugin-sass together with plugin-css in "CSS variable mode" and found that mode output in the .scss-file does not seem to work as we would expect. As an example, we've defined a token "redgreenblue" with 3 modes (red, green and blue) that point to (duh) a "red", "green" and "blue" token.

However, the .scss outputs it like this and uses the tokens own CSS variable for all its modes, not their respective targets.

  "redgreenblue": (
    default: (var(--redgreenblue)),
    "red": (var(--redgreenblue)),
    "blue": (var(--redgreenblue)),
    "green": (var(--redgreenblue)),
  )

Here's the token-JSON to reproduce this:

{
    "red": {
      "$type": "color",
      "$value": "#ff0000"
      },
    "blue": {
        "$type": "color",
        "$value": "#00ff00"
      },
    "green": {
        "$type": "color",
        "$value": "#0000ff"
      },
    "redgreenblue": {
        "$type": "color",
        "$value": "{red}",
        "$extensions": {
            "mode": {
                "red": "{red}",
                "blue": "{blue}",
                "green": "{green}"
            }
        }    
    }
}

... and the tokens.config.mjs to go along with it. :)

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

export default {
  tokens: ['./tokens.json'],
  plugins: [
    pluginSass({
      filename: 'test.scss',
      pluginCSS: {
        filename: 'test.css',
        p3: false
      },
    }),
  ],
};

Thanks again and have a very nice day!