Ability to write custom Format for binary files instead of text files.

[mchiasson-youi]

Wild idea here to make style-dictionary output binary data instead of a text file to store design token values maybe with protobuf or flatbuffers, etc.

[jorenbroekema]

Hey, I'm definitely open to that suggestion, it should be pretty easy to implement, but the main question is whether you're looking to output a binary file per token, or a binary file per dictionary (multiple tokens).

If it's per token, then the Action hook should already allow you to do this https://style-dictionary-v4.netlify.app/reference/api/#registeraction

Right now formats are supposed to either return a string or a Promise which resolves to a string, but that could easily be expanded to include some kind of buffer type, https://github.com/amzn/style-dictionary/blob/v4/lib/buildFile.js#L127 and also line 136 is where we'd have to change the implementation slightly to support this.

Can you share your use case and maybe explain what kind of types of binary data you're aiming to export? Are we talking images, precompiled scripts, etc.?

E.g. one usecase I can think of is storing images as base64 encoded strings in your token files, but then you're probably outputting them per token so I would use an action for this:

{
  "assets": {
    "avatar": {
      "value": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAKElEQVQ4jWNgYGD4Twzu6FhFFGYYNXDUwGFpIAk2E4dHDRw1cDgaCAASFOffhEIO3gAAAABJRU5ErkJggg==",
      "type": "image"
    }
  }
}

and then the action:

 // can be used in browser + node, but if you're only concerned about Node, `import fs from 'node:fs';` is fine too
import { fs } from 'style-dictionary/fs';

StyleDictionary.registerAction({
  name: 'copy_assets',
  do: async function (dictionary, config) {
    console.log('Exporting images');
    await Promise.all(
      dictionary.allTokens
        .filter(token => token.type === 'image')
        .map(token => fs.promises.writeFile(
          `build/assets/${token.path.slice(1).join('_')}`,
          Buffer.from(token.value.replace(/^data:image\/\w+;base64,/, ''), 'base64')
        ))
    );
  },
  undo: async function (dictionary, config) {
    console.log('Cleaning images');
    await Promise.all(dictionary.allTokens
      .filter(token => token.type === 'image')
      .map(token => fs.promises.unlink(`build/assets/${token.path.slice(1).join('_')}`))
    );
  },
});

But if you're combining multiple tokens into a single binary format, the format hook makes more sense and then we need to extend the formatter return type a bit to support Buffers