# register-view

## Interface

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

## Options

<table data-full-width="true"><thead><tr><th width="292">Parameter</th><th width="127.33333333333331">Required</th><th width="202">Type</th><th width="136">Default</th><th width="253">Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>true</code></td><td><code>string</code></td><td></td><td>The name of the SDTF view.</td></tr><tr><td><code>query</code></td><td><code>true</code></td><td><a href="../../guides/querying-a-sdtf-graph"><code>SDTFQuery</code></a></td><td></td><td>The query that select items in the token tree.</td></tr></tbody></table>

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

{% tabs %}
{% tab title="Input" %}

<pre class="language-json" data-line-numbers><code class="lang-json">{
  "colors": {
    "$collection": {
      "$modes": ["light", "dark"]
    },
<strong>    "info": {
</strong><strong>      "infoToken": {
</strong><strong>        "$type": "color",
</strong><strong>        "$value": {
</strong><strong>          "light": {
</strong><strong>            "model": "rgb",
</strong><strong>            "red": 219,
</strong><strong>            "green": 234,
</strong><strong>            "blue": 254,
</strong><strong>            "alpha": 1
</strong><strong>          },
</strong><strong>          "dark": {
</strong><strong>            "model": "rgb",
</strong><strong>            "red": 219,
</strong><strong>            "green": 234,
</strong><strong>            "blue": 254,
</strong><strong>            "alpha": 1
</strong><strong>          }
</strong><strong>        }
</strong><strong>      }
</strong><strong>    },
</strong>    "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
          }
        }
      }
    }
  }
}
</code></pre>

{% endtab %}

{% tab title="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.

{% code title=".specifyrc.json" lineNumbers="true" %}

```json5
{
  "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"
          }
        }
      ]
    }
  ]
}
```

{% endcode %}
{% endtab %}

{% tab title="Output" %}
{% code title="tokens.css" lineNumbers="true" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}