Custom Formats in Style Dictionary

build3.js

// Way 3: calling StyleDictionary.extend().buildAllPlatforms()
// you would call this in your npm script like: "node build1.js"
// the filename doesn't really matter, I tend to use 'build.js' if this file is running and 'config.js' if it exports a config

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

StyleDictionary.registerFormat({
  name: 'myCustomFormat',
  formatter: function({ dictionary }) {
    // custom format code
  }
});

StyleDictionary.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      files: [{
        destination: 'variables.css',
        format: 'myCustomFormat'
      }]
    }
  }
}).buildAllPlatforms();

build4.js

// Way 4: calling buildAllPlatforms() with inline format
// you would call this in your npm script like: "node build.js"

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

StyleDictionary.extend({
 format: {
   myCustomFormat: function({ dictionary }) {
     // custom format code
   }
 },
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      files: [{
        destination: 'variables.css',
        format: 'myCustomFormat'
      }]
    }
  }
}).buildAllPlatforms();

build5.js

// Way 5: calling extend() and then .registerFormat()
// you would call this in your npm script like: "node build.js"

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

const sd = StyleDictionary.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      files: [{
        destination: 'variables.css',
        format: 'myCustomFormat'
      }]
    }
  }
});

// You can register the format after .extend() as long as it is before .buildAllPlatforms()
sd.registerFormat({
  name: 'myCustomFormat',
  formatter: function({ dictionary }) {
    // custom format code
  }
});

sd.buildAllPlatforms();

config1.js

// Way 1: Javascript config with inline custom format
// you would call this in an npm script like: "style-dictionary build --config ./config1.js"

module.exports = {
 format: {
   myCustomFormat: function({ dictionary }) {
     // custom format code
   }
 },
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      files: [{
        destination: 'variables.css',
        format: 'myCustomFormat'
      }]
    }
  }
}

config2.js

// Way 2: Javascript config with registerTransform
// you would call this in an npm script the same way: "style-dictionary build --config ./config2.js"
const StyleDictionary = require('style-dictionary');

StyleDictionary.registerFormat({
  name: 'myCustomFormat',
  formatter: function({ dictionary }) {
    // custom format code
  }
});

module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      files: [{
        destination: 'variables.css',
        format: 'myCustomFormat'
      }]
    }
  }
}