register-view

This parser helps you register a SDTF view that can be later used by generation parser to allow for partial outputs of the token tree with no destructive mutations.

Interface

interface parser {
  name: 'register-view';
  options: {
    name: string;
    query: SDTFQuery;
  };
}

Options

Parameter	Required	Type	Default	Description
name	true	string		The name of the SDTF view.
query	true	SDTFQuery		The query that select items in the token tree.

Basic usage: register a SDTF view for use with CSS output

Input

{
  "colors": {
    "$collection": {
      "$modes": ["light", "dark"]
    },
    "info": {
      "infoToken": {
        "$type": "color",
        "$value": {
          "light": {
            "model": "rgb",
            "red": 219,
            "green": 234,
            "blue": 254,
            "alpha": 1
          },
          "dark": {
            "model": "rgb",
            "red": 219,
            "green": 234,
            "blue": 254,
            "alpha": 1
          }
        }
      }
    },
    "danger": {
      "dangerToken": {
        "$type": "color",
        "$value": {
          "light": {
            "model": "rgb",
            "red": 209,
            "green": 204,
            "blue": 204,
            "alpha": 1
          },
          "dark": {
            "model": "rgb",
            "red": 19,
            "green": 34,
            "blue": 54,
            "alpha": 1
          }
        }
      }
    }
  }
}

Config

1. We want to get all tokens in all groups named "info"

2. We also want to get the parent collection...

3. ... and all children tokens within the "info" group(s)

4. We eventually generate our selected SDTF token tree in a CSS file thanks to the to-css-custom-properties parser.

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Only get tokens from a group named 'info' and gererate tokens in JSON",
      "parsers": [
        {
          "name": "register-view",
          "options": {
            "name": "Info only",
            "query": {
              "where": {
                "group": "info",
                "select": {
                  "parents": true,
                  "children": true
                }
              }
            }
          }
        },
        {
          "name": "to-css-custom-properties",
          "options": {
            "withSDTFView": "Info only"
          },
          "output": {
            "type": "file",
            "filePath": "tokens.css"
          }
        }
      ]
    }
  ]
}

Output

tokens.css

:root[data-colors="light"] {
  --info-infoToken: rgb(219, 234, 254);
}
:root[data-colors="dark"] {
  --info-infoToken: rgb(219, 234, 254);
}