How to use style-dictionary - 10 common examples

const StyleDictionary = require('style-dictionary').extend(__dirname + '/config.json');
const fs = require('fs');
const _ = require('lodash');
const handlebars = require('handlebars');
const pug = require('pug');


console.log('Build started...');
console.log('\n==============================================');


// DECLARE CUSTOM FORMATS VIA CUSTOM TEMPLATE FILES (AND ENGINES)


// These formatting functions are using the Lodash "template" syntax

StyleDictionary.registerFormat({

// REGISTER A CUSTOM FORMAT (to be used for this specific example)

StyleDictionary.registerFormat({
  name: 'custom/android/xml',
  formatter: function(dictionary) {
    return dictionary.allProperties.map(function(prop) {
      return `${prop.value}`;
    }).join('\n');
  }
});


// APPLY THE CONFIGURATION
// IMPORTANT: the registration of custom transforms
// needs to be done _before_ applying the configuration
StyleDictionaryExtended = StyleDictionary.extend(__dirname + '/config.json');


// FINALLY, BUILD ALL THE PLATFORMS
StyleDictionaryExtended.buildAllPlatforms();


console.log('\n==============================================');
console.log('\nBuild completed!');

// REGISTER THE CUSTOM TRANFORM GROUPS

// if you want to see what a pre-defined group contains, uncomment the next line:
// console.log(StyleDictionary.transformGroup['group_name']);

StyleDictionary.registerTransformGroup({
  name: 'custom/web',
  // notice: here the "size/px" transform is not the pre-defined one, but the custom one we have declared above
  transforms: ['attribute/cti', 'name/cti/constant', 'size/px', 'color/css', 'time/seconds', 'ratio/%']
});

StyleDictionary.registerTransformGroup({
  name: 'custom/scss',
  // this is to show one possibility for adding a few transforms to a pre-defined group
  // (however, we suggest to use the previous approach, which is more explicit and clear)
  transforms: StyleDictionary.transformGroup['scss'].concat(['size/px', 'ratio/%'])
});

StyleDictionary.registerTransformGroup({
  name: 'custom/android',
  // as you can see, here we are completely ignoring the "attribute/cti" transform (it's totally possible),
  // because we are relying on custom attributes for the matchers and the custom format for the output
  transforms: ['name/squiggle', 'hexRGB/hexARGB', 'unitless/dp-sp']
});


// REGISTER A CUSTOM FORMAT (to be used for this specific example)

StyleDictionary.registerFormat({
  name: 'custom/android/xml',
  formatter: function(dictionary) {
    return dictionary.allProperties.map(function(prop) {

transforms: [ "name/cti/kebab", "time/seconds", "size/px", "color/css" ]
});

StyleDictionaryPackage.registerTransformGroup({
    name: 'tokens-ios',
    // to see the pre-defined "ios" transformation use: console.log(StyleDictionaryPackage.transformGroup['ios']);
    transforms: [ "attribute/cti", "name/cti/camel", "size/pxToPt"]
});

StyleDictionaryPackage.registerTransformGroup({
    name: 'tokens-android',
    // to see the pre-defined "android" transformation use: console.log(StyleDictionaryPackage.transformGroup['android']);
    transforms: [ "attribute/cti", "name/cti/camel", "size/pxToDp"]
});

StyleDictionaryPackage.transformGroup['android'];

console.log('Build started...');

// PROCESS THE DESIGN TOKENS FOR THE DIFFEREN BRANDS AND PLATFORMS

['web', 'ios', 'android'].map(function(platform) {
    ['brand#1', 'brand#2', 'brand#3'].map(function(brand) {

        console.log('\n==============================================');
        console.log(`\nProcessing: [${platform}] [${brand}]`);

        const StyleDictionary = StyleDictionaryPackage.extend(getStyleDictionaryConfig(brand, platform));

        if (platform === 'web') {
            StyleDictionary.buildPlatform('web/js');
            StyleDictionary.buildPlatform('web/json');

// console.log(StyleDictionary.transformGroup['group_name']);

StyleDictionary.registerTransformGroup({
  name: 'custom/web',
  // notice: here the "size/px" transform is not the pre-defined one, but the custom one we have declared above
  transforms: ['attribute/cti', 'name/cti/constant', 'size/px', 'color/css', 'time/seconds', 'ratio/%']
});

StyleDictionary.registerTransformGroup({
  name: 'custom/scss',
  // this is to show one possibility for adding a few transforms to a pre-defined group
  // (however, we suggest to use the previous approach, which is more explicit and clear)
  transforms: StyleDictionary.transformGroup['scss'].concat(['size/px', 'ratio/%'])
});

StyleDictionary.registerTransformGroup({
  name: 'custom/android',
  // as you can see, here we are completely ignoring the "attribute/cti" transform (it's totally possible),
  // because we are relying on custom attributes for the matchers and the custom format for the output
  transforms: ['name/squiggle', 'hexRGB/hexARGB', 'unitless/dp-sp']
});


// REGISTER A CUSTOM FORMAT (to be used for this specific example)

StyleDictionary.registerFormat({
  name: 'custom/android/xml',
  formatter: function(dictionary) {
    return dictionary.allProperties.map(function(prop) {
      return `${prop.value}`;
    }).join('\n');
  }

transforms: ["attribute/cti", "name/cti/kebab", "size/px", "color/css"]
});

StyleDictionaryPackage.registerTransformGroup({
    name: 'tokens-scss',
    // to see the pre-defined "scss" transformation use: console.log(StyleDictionaryPackage.transformGroup['scss']);
    transforms: [ "name/cti/kebab", "time/seconds", "size/px", "color/css" ]
});

StyleDictionaryPackage.registerTransformGroup({
    name: 'tokens-ios',
    // to see the pre-defined "ios" transformation use: console.log(StyleDictionaryPackage.transformGroup['ios']);
    transforms: [ "attribute/cti", "name/cti/camel", "size/pxToPt"]
});

StyleDictionaryPackage.registerTransformGroup({
    name: 'tokens-android',
    // to see the pre-defined "android" transformation use: console.log(StyleDictionaryPackage.transformGroup['android']);
    transforms: [ "attribute/cti", "name/cti/camel", "size/pxToDp"]
});

StyleDictionaryPackage.transformGroup['android'];

console.log('Build started...');

// PROCESS THE DESIGN TOKENS FOR THE DIFFEREN BRANDS AND PLATFORMS

['web', 'ios', 'android'].map(function(platform) {
    ['brand#1', 'brand#2', 'brand#3'].map(function(brand) {

        console.log('\n==============================================');
        console.log(`\nProcessing: [${platform}] [${brand}]`);

// if you want to see the available pre-defined formats, transforms and transform groups uncomment this
// console.log(StyleDictionaryPackage);

StyleDictionaryPackage.registerFormat({
    name: 'json/flat',
    formatter: function(dictionary) {
        return JSON.stringify(dictionary.allProperties, null, 2);
    }
});

StyleDictionaryPackage.registerTemplate({
    name: 'ios/plist',
    template: __dirname + '/templates/ios-plist.template'
});

StyleDictionaryPackage.registerTemplate({
    name: 'android/xml',
    template: __dirname + '/templates/android-xml.template'
});

StyleDictionaryPackage.registerTemplate({
    name: 'android/colors',
    template: __dirname + '/templates/android-xml.template'
});

// I wanted to use this custom transform instead of the "prefix" property applied to the platforms
// because I wanted to apply the "token" prefix only to actual tokens and not to the aliases
// but I've found out that in case of "name/cti/constant" the prefix was not respecting the case for the "prefix" part
//
// StyleDictionaryPackage.registerTransform({
//     name: 'name/prefix-token',
//     type: 'name',

const del = require('del');
const path = require('path');
/*

Initialize all this modules after style dictionary since they
use StyleDictionary's methods
*/
require('./src/transforms');
require('./src/transformGroups');
require('./src/templates');
require('./src/actions');

// Get the config
const config = require('./style-config.json');

const Dictionary = StyleDictionary.extend(config);

/*
Here we are separating the taks so we can run them
separate as needed. This can be simplified but currently
i'm deleting a bunch of folder to dynamically recreate.
*/

switch (argv.platform) {
  case 'web':
    del(path.join(__dirname, './build/web/')).then(() => {
      Dictionary.buildPlatform('web');
    });
    break;

  case 'ios':
    del([

// Using the custom format defined above
        format: 'myFormat'
      }]
    },
    css: {
      transformGroup: 'css',
      buildPath: buildPath,
      files: [{
        destination: 'variables.css',
        format: 'css/variables'
      }]
    },

    scss: {
      // This works, we can create new transform arrays on the fly and edit built-ins
      transforms: StyleDictionary.transformGroup.scss.concat('color/rgb'),
      buildPath: buildPath,
      files: [{
        destination: 'variables.scss',
        format: 'scss/variables'
      }]
    },

    js: {
      transforms: StyleDictionary.transformGroup.js.concat('myRegisteredTransform'),
      buildPath: buildPath,
      // If you want to get super fancy, you can use node modules
      // to create a properties object first, and then you can
      // reference attributes of that object. This allows you to
      // output 1 file per color namespace.
      files: Object.keys(properties.color).map((colorType) => ({
        destination: `${colorType}.js`,

format: 'css/variables'
      }]
    },

    scss: {
      // This works, we can create new transform arrays on the fly and edit built-ins
      transforms: StyleDictionary.transformGroup.scss.concat('color/rgb'),
      buildPath: buildPath,
      files: [{
        destination: 'variables.scss',
        format: 'scss/variables'
      }]
    },

    js: {
      transforms: StyleDictionary.transformGroup.js.concat('myRegisteredTransform'),
      buildPath: buildPath,
      // If you want to get super fancy, you can use node modules
      // to create a properties object first, and then you can
      // reference attributes of that object. This allows you to
      // output 1 file per color namespace.
      files: Object.keys(properties.color).map((colorType) => ({
        destination: `${colorType}.js`,
        format: 'javascript/es6',
        // Filters can be functions that return a boolean
        filter: (prop) => prop.attributes.type === colorType
      }))
    },

    // You can still use built-in transformGroups and formats like before
    json: {
      transformGroup: 'js',