to-json-list

This parser helps you pull design tokens in JSON within an iterable array structure.

Interface

interface parser {
  name: "to-json-list";
  output:
    | {
        type: "file";
        filePath: string;
      }
    | { type: "JSON" };
  options?: {
    stringPathSeparator?: string;
  };
}

Options

Parameter	Required	Type	Default	Description
stringPathSeparator	false	string	"."	Override the separator character used to build the string path property.

Return type

The parser produces a custom data structure representing the flatten token tree.

type FlattenNode = (
  | {
      kind: 'group';
    }
  | {
      kind: 'collection';
      modes: Array<string>;
    }
  | {
      kind: 'token';
      type: string;
      modeValues: Array<{
        mode: string;
        value: unknown;
      }>;
    }
) & {
  path: Array<string>;
  stringPath: string;
  name: string;
  description?: string;
  extensions?: unknown;
};

type ParserOutput = Array<FlattenNode>

Basic usage

Input

{
  "aCollection": {
    "$collection": {
      "$modes": ["light", "dark"]
    },
    "blue": {
      "$type": "color",
      "$value": {
        "light": {
          "model": "hex",
          "hex": "#0000CC",
          "alpha": 1
        },
        "dark": {
          "model": "hex",
          "hex": "#0000FF",
          "alpha": 1
        }
      }
    }
  },
  "aGroup": {
    "aDimension": {
      "$type": "dimension",
      "$value": {
        "default": {
          "unit": "px",
          "value": 16
        }
      }
    }
  }
}

Config

Output