Snippet for Style Dictionary where it generate SCSS maps like in Bootstrap variables

build.js

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

const { fileHeader } = StyleDictionary.formatHelpers;

const styleDictionary = StyleDictionary.extend({
  source: [`src/tokens/**/*.json`],

  platforms: {
    scss: {
      transformGroup: `scss`,
      buildPath: `./`,
      options: {
        fileHeader: `ecriFileHeader`
      },
      files: [
        {
          destination: `src/scss/__variables.scss`,
          format: `scss/variablesAndMaps`,
          options: {
            outputReferences: true
          }
        }
      ]
    }
  }
});

// Adding a custom file header with the `.registerFileHeader`
styleDictionary.registerFileHeader({
  name: `ecriFileHeader`,
  fileHeader: () => {
    return [
      `Project 2021`,
      `Do not edit directly`
    ]
  }
});

styleDictionary.registerFormat({
  name: `scss/variablesAndMaps`,
  formatter: function ({ dictionary, file }) {
    const { tokens } = dictionary;
    const tokensArray = Object.keys(tokens);
    const findMap = tokensArray
      .filter(cat => Object.keys(tokens[cat]).find(attr => attr === 'map'));

    return fileHeader({ file }) + tokensArray.map(cat =>
      findMap.includes(cat)
        ? getSCSSMapVariables(dictionary, cat)
        : getSCSSVariables(dictionary, cat)
    )
    .join(`\n`);
  }
});

styleDictionary.buildAllPlatforms();

function getSCSSVariables(dictionary, category) {
  return dictionary.allTokens
    .filter(token => token.attributes.category === category)
    .map(token =>`$${token.name}: ${getValue(token, dictionary)} !default;`)
    .join(`\n`);
}

function getSCSSMapVariables(dictionary, category) {
  const { map } = dictionary.tokens[category];
  return `
$${category}: (
${Object.keys(map).map(m => `  "${m}": ${getValue(map[m], dictionary)},`).join(`\n`)}
) !default;`;
}

function getValue(token, dictionary) {
  let value = dictionary.usesReference(token.original.value)
    ? `$${dictionary.getReferences(token.original.value)[0].name}`
    : JSON.stringify(token.value);

  return value.replace(/"/g, '');
}

colors.json

// Little example of how the JSON should be written
{
  "white": { "value": "#fff" },
  "gray": {
    "100": { "value": "#f8f9fa" },
    "200": { "value": "#e9ecef" },
    "300": { "value": "#dee2e6" },
    "400": { "value": "{gray.100.value}" }
  },
  "black": { "value": "#000" },
  "grays": {
    "map": {
      "100": { "value": "{gray.100.value}" },
      "200": { "value": "{gray.200.value}" },
      "300": { "value": "{gray.300.value}" },
      "400": { "value": "{gray.400.value}" }
    }
  },
  "colors": {
    "map": {
      "100": { "value": "{gray.100.value}" },
      "200": { "value": "{gray.200.value}" },
      "300": { "value": "{gray.300.value}" },
      "400": { "value": "#fff" }
    }
  }
}