Transform tokens into data set referecing other root variables about style-dictionary HOT 3 OPEN

{
  "data-background": {
    "voilet-50": {
      "type": "group";
      "background-color": {
        "value": "{mode-colors.default.background-color}",
        "type": "color",
        "$extensions": {
          "studio.tokens": {
            "modify": {
              "type": "mix",
              "value": "{mix-in}",
              "space": "lch",
              "color": "#ffffff"
            }
          }
        }
      },
      "alt-background-color": {
        "value": "{mode-colors.default.alt-background-color}",
        "type": "color"
      },
      "background-on-color": {
        "value": "{text-dark}",
        "type": "color",     
      }
    }
  }
}

import StyleDictionary from 'style-dictionary';
import { formattedVariables } from 'style-dictionary/utils';
import { fileHeader } from 'style-dictionary/utils';
import { registerTransforms } from '@tokens-studio/sd-transforms';

// sd-transforms, 2nd parameter for options can be added
// See docs: https://github.com/tokens-studio/sd-transforms
registerTransforms(StyleDictionary);

const groups = ["font-style", "color-theme", "data-background"];

StyleDictionary.registerTransform({
  name: "attribute/group",
  type: 'attribute',
  matcher: function(prop) {
    return groups.includes(prop.path.slice(0,2).join('-'));
  },
  transformer: function(prop) {
    return {
      // Brittle logic, the group is the 3rd level of the object path
      group: true,
      groupName: prop.path.slice(0,3).join('-')
    }
  }
});

StyleDictionary.registerFilter({
  name: 'core-filter',
  matcher: (token) => token.filePath.endsWith('core.json')
});

StyleDictionary.registerFilter({
  name: 'base-filter',
  matcher: (token) => token.filePath.endsWith('base.json')
});

StyleDictionary.registerFilter({
  name: 'background-filter',
  matcher: (token) => token.filePath.endsWith('base.json')
});

StyleDictionary.registerTransform({
  name: 'css/boolean-to-display',
  type: 'value',
  transformer: (token, _, options) => {
    const tokenType = options.usesDtcg ? token.$type : token.type;
    const tokenValue = options.usesDtcg ? token.$value : token.value;
    if (tokenType === 'boolean') {
      return tokenValue === 'true' ? 'block' : 'hidden';
    }
    return tokenValue;
  }
});

// Custom CSS format that is basically a copy of the built-in,
// except for the fact that we pass formatting options -> commentPosition
StyleDictionary.registerFormat({
  name: 'custom/css/variables',
  formatter: async function ({ dictionary, options = {}, file }) {
    const selector = options.selector ? options.selector : `:root`;
    const { outputReferences, outputReferenceFallbacks, usesDtcg } = options;
    const header = await fileHeader({ file });
    return (
      header +
      `${selector} {\n` +
      formattedVariables({
        format: 'css',
        dictionary,
        outputReferences,
        outputReferenceFallbacks,
        usesDtcg,
        formatting: {
          commentPosition: 'above'
        }
      }) +
      `\n}\n`
    );
  },
});

StyleDictionary.registerFormat({
  name: 'css/group',
  formatter: function(dictionary, config) {
    const groupMap = dictionary.allProperties.reduce(function(prev,curr) {
      if (!prev[curr.attributes.groupName]) {
        prev[curr.attributes.groupName] = [];
      }
      prev[curr.attributes.groupName].push(curr);
      return prev;
    },{});
    
    return Object.keys(groupMap).map(function(key) {
      let props = groupMap[key];
      return `.${key} {
${props.map(function(prop) {
  return `  ${prop.name}: ${prop.value};`
}).join('\n')}
}`
    }).join('\n\n');
  }
});