sd-transitive-attribute-transform-example

base.json

{
  "color": {
    "base": {
      "green": {
        "100": {
          "value": "#e8f5e9",
          "attributes": {
            "font": "base"
          }
        },
        "300": {
          "value": "#a5d6a7",
          "attributes": {
            "font": "base"
          }
        },
        "500": {
          "value": "#66bb6a",
          "attributes": {
            "font": "inverse"
          }
        },
        "700": {
          "value": "#43a047",
          "attributes": {
            "font": "inverse"
          }
        },
        "900": {
          "value": "#2e7d32",
          "attributes": {
            "font": "inverse"
          }
        }
      }
    }
  }
}

brand.json

{
  "color": {
    "brand": {
      "primary": {
        "lighter": { "value": "{color.base.green.100.value}" },
        "light":   { "value": "{color.base.green.300.value}" },
        "base":    { "value": "{color.base.green.500.value}" },
        "dark":    { "value": "{color.base.green.700.value}" },
        "darker":  { "value": "{color.base.green.900.value}" }
      }
    }
  }
}

package.json

{
  "name": "sd-transitive-attribute-transform",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "style-dictionary build --config ./sd.config.js"
  },
  "dependencies": {
    "style-dictionary": "^2.10.0"
  }
}

sd.config.js

const combineJSON = require('style-dictionary/lib/utils/combineJSON');

// In order to access other tokens inside a transform we need to create
// the properties object ourself by calling the internal combineJSON method
const properties = combineJSON(['tokens/**/*.json'], true, null);

// Creating a simplified version of the alias resolution here
// note: this logic won't capture all the edge cases style dictionary covers
// in alias resolution, like error on circular references
const resolveReference = (value) => {
  let reference;
  // this will grab the contents inside the '{}' and set the variable
  // reference to it.
  value.replace(/\{([^}]+)\}/g, (match, variable) => {
    reference = variable;
  });
  
  if (reference && reference.indexOf(`{`) > -1) {
    return resolveReference(reference);
  } else {
    return reference;
  }
}

// Create our custom transform
const transitiveAttributeTransform = (token) => {
  // If the token's value has a '{' we assume it has a reference
  if (token.value.indexOf('{') > -1) {
    const reference = resolveReference(token.value);

    // turn the reference into an array and remove the last part 'value'
    const objPath = reference.split('.').slice(0,-1);
    
    // Walk the properties object using the object path so we can
    // access the referenced token
    let obj = properties;
    for (let index = 0; index < objPath.length; index++) {
      obj = obj[objPath[index]];
    }
    
    // now we have the referenced token in the obj variable
    return {
      font: obj.attributes.font
    }
  } else {
    return {}
  }
}

module.exports = {
  transform: {
    transitiveAttribute: {
      type: 'attribute',
      transformer: transitiveAttributeTransform
    }
  },
  
  // we directly add the properties objec here instead of using 'source'
  // because we already have the merged token object
  properties,
  
  platforms: {
    json: {
      transforms: ['attribute/cti', 'transitiveAttribute'],
      buildPath: 'build/',
      files: [{
        destination: 'test.json',
        format: 'json'
      }]
    }
  }
}