Use token names with/without prefix in custom formatter

[nategreen]

This is sort of a 3.x question, but may also apply to 2.x.

I'm writing a format where CSS variables are assigned to Sass variables for ease of use:

$mri-color-neutral-100: var(--mri-color-neutral-100, #000000) !default;
$mri-color-dark-bg-01: var(--mri-color-dark-bg-01, #{$mri-color-neutral-100}) !default;

In this format, ideally I'd like to steal a page out of @nhoizy's book and use the Sass module system, so I wouldn't need the "mri" prefix on the Sass variables; however, I would need them on the CSS variable names still.

Can I reference the token name with and without a prefix in the same formatter? If it's possible to do so, I couldn't figure it out. Below is my formatter function:

const StyleDictionary = require('style-dictionary');

const {
  sortByReference
} = StyleDictionary.formatHelpers;

function cssVariable(name, value) {
  return `var(--${name}, ${value})`;
}

function scssVariable(name, value, comment) {
return `$${name}: ${value} !default;${comment ? ` // ${comment}`:``}`;
}

function scssVariableList(dictionary) {
  let result = ``;
  let tokens = dictionary.allProperties.sort(sortByReference(dictionary))

  function value(token) {
    if (dictionary.options.outputReferences) {
      if (dictionary.usesReference(token.original.value)) {
        let refs = dictionary.getReferences(token.original.value);
        return cssVariable(token.name, `#{$${refs[0].name}}`);
      }
    }

    return `${cssVariable(token.name, token.value)}`
  }

  for (const token of tokens) {
    result += `${scssVariable(token.name, value(token), token.comment)}` + '\n'
  }

  return result;
}

module.exports = function(dictionary, options, file) {
  return `${scssVariableList(dictionary, options)}`;
}

[dbanksdesign]

Hmm... not directly... The only thing I can think of would be to remove the prefix from the name in your formatter, or create the names in the formatter itself from the path of the token if that makes sense.

[jorenbroekema]

Closing question issue, considered as answered.