Tokens

These utilities have to do with processing/formatting tokens object.

flattenTokens

Flatten dictionary tokens object to an array of flattened tokens.

import StyleDictionary from 'style-dictionary';
import { flattenTokens } from 'style-dictionary/utils';

const sd = new StyleDictionary({
  tokens: {
    colors: {
      black: {
        value: '#000',
        type: 'color',
        name: 'colors-black',
      },
    },
    spacing: {
      2: {
        value: '2px',
        type: 'dimension',
        name: 'spacing-2',
      },
    },
    border: {
      value: 'solid {spacing.2} {colors.black}',
      name: 'border',
    },
  },
});

const flat = flattenTokens(sd);
/**
 * [
 *   { value: '#000', type: 'color', name: 'colors-black' },
 *   { value: '2px', type: 'dimension', name: 'spacing-2' },
 *   { value: 'solid {spacing.2} {colors.black}', name: 'border' }
 * ]
 */

stripMeta

Allows you to strip meta data from design tokens, useful if you want to output clean nested formats.

You can define which meta properties to strip or which properties to keep (allowlist / blocklist), in the second options parameter.

This utility is also used in the 'json' format.

import StyleDictionary from 'style-dictionary';
import { stripMeta } from 'style-dictionary/utils';

const sd = new StyleDictionary({
  tokens: {
    colors: {
      black: {
        value: '#000',
        type: 'color',
        name: 'colors-black',
        attributes: { foo: 'bar' },
        path: ['colors', 'black'],
      },
    },
    spacing: {
      2: {
        value: '2px',
        type: 'dimension',
        name: 'spacing-2',
        attributes: { foo: 'bar' },
        path: ['spacing', '2'],
      },
    },
    border: {
      value: 'solid {spacing.2} {colors.black}',
      name: 'border',
      attributes: { foo: 'bar' },
      path: ['border'],
    },
  },
});

const stripped = stripMeta(sd, { keep: ['value'] });
/**
 * {
 *   colors: {
 *     black: {
 *       value: '#000',
 *     },
 *   },
 *   spacing: {
 *     2: {
 *       value: '2px',
 *     },
 *   },
 *   border: {
 *     value: 'solid {spacing.2} {colors.black}',
 *   },
 * }
 */