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

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "To JSON",
      "parsers": [
        {
          "name": "to-json-list",
          "output": {
            "type": "file",
            "filePath": "tokens.json"
          }
        }
      ]
    }
  ]
}

Output

tokens.json

[
  {
    "path": [
      "aCollection"
    ],
    "stringPath": "aCollection",
    "name": "aCollection",
    "kind": "collection",
    "modes": [
      "light",
      "dark"
    ]
  },
  {
    "path": [
      "aCollection",
      "blue"
    ],
    "stringPath": "aCollection.blue",
    "name": "blue",
    "kind": "token",
    "type": "color",
    "modeValues": [
      {
        "mode": "dark",
        "value": {
          "model": "hex",
          "hex": "#0000FF",
          "alpha": 1
        }
      },
      {
        "mode": "light",
        "value": {
          "model": "hex",
          "hex": "#0000CC",
          "alpha": 1
        }
      }
    ]
  },
  {
    "path": [
      "aGroup"
    ],
    "stringPath": "aGroup",
    "name": "aGroup",
    "kind": "group"
  },
  {
    "path": [
      "aGroup",
      "aDimension"
    ],
    "stringPath": "aGroup.aDimension",
    "name": "aDimension",
    "kind": "token",
    "type": "dimension",
    "modeValues": [
      {
        "mode": "default",
        "value": {
          "value": 16,
          "unit": "px"
        }
      }
    ]
  }
]