Generate multiple output tokens from a single input token in Amazon Style Dictionary

Question

I am using Amazon Style Dictionary to generate SCSS variables from JS definition files. Given the following input:

module.exports = {
  color: {
    border: {
      focus: { value: '#0071ff' }
    }
  }
}

I would like to generate not one output variable for this, but two (HEX and RGB). Is it possible to write a custom value transformer that spits out multiple values for a given input? Or do I need to run a separate pipeline for this use case?

Answer 1

This could be your colors.json file configuration

  "source": ["sources/colors.js"],
  "platforms": {
    "css-rgb": {
      "transforms": ["color/rgb"],
      "buildPath": "dist/rgb/",
      "files": [
        {
          "destination": "colors-rgb.css",
          "format": "css/variables"
        }
      ]
    },
    "css-hex": {
      "transforms": ["color/hex"],
      "buildPath": "dist/hex/",
      "files": [
        {
          "destination": "colors-hex.css",
          "format": "css/variables"
        }
      ]
    }
  }

to provide to your StyleDictionary configuration.

So you grab the sources from your sources/colors.js file and create in output in the dist folder two subfolders, rgb containing colors-rgb.css and hex containing colors-hex.css.