# CSS Custom Properties

This example uses 5 different parsers:

* [filter](https://docs.specifyapp.com/sdtf-beta/parsers/filter) to target specific token types like colors and text styles
* [convert-color](https://docs.specifyapp.com/sdtf-beta/parsers/convert-color) to convert our colors in HSL
* [change-case](https://docs.specifyapp.com/reference/parsers/change-case) to change the name of our tokens and modes to kebabCase
* [to-css-custom-properties](https://docs.specifyapp.com/sdtf-beta/parsers/to-css-custom-properties) to generate a CSS file containing our tokens
* [make-line-height-relative](https://docs.specifyapp.com/reference/parsers/select-modes) to make our text styles' line-height relative to their font-size
* [convert-dimension](https://docs.specifyapp.com/reference/parsers/convert-dimension) to convert our text styles' font-size from `px` to `rem`
* [to-css-text-style](https://docs.specifyapp.com/reference/parsers/to-css-text-style) to generate our text styles as CSS classes
* [svgo](https://docs.specifyapp.com/reference/parsers/svgo) to optimize, transform vectors, and generate SVG files

This template is an example among others. Head toward the [to-css-custom-properties](https://docs.specifyapp.com/sdtf-beta/parsers/to-css-custom-properties) page to get all available options. 

{% tabs %}
{% tab title="CLI configuration" %}
When using the CLI, you need to fill three properties:

* `repository`  is `@organization/repository`
* `personalAccessToken` which you can generate [in your account settings](https://specifyapp.com/user/personal-access-tokens) 
* `rules` lets you transform tokens by chaining parsers

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

```json
{
  "version": "2",
  "repository": "@organization/repository",
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate colors in HSL",
      "parsers": [
        {
          "name": "filter",
          "options": {
            "query": {
              "where": {
                "token": ".*",
                "withTypes": {
                  "include": [
                    "color"
                  ]
                },
                "select": {
                  "parents": true
                }
              }
            }
          }
        },
        {
          "name": "convert-color",
          "options": {
            "toFormat": "hsl",
            "applyTo": {
              "collection": true
            }
          }
        },
        {
          "name": "change-case",
          "options": {
            "change": "names",
            "toCase": "kebabCase",
            "applyTo": {
              "collection": true
            }
          }
        },
        {
          "name": "change-case",
          "options": {
            "change": "modes",
            "toCase": "kebabCase",
            "applyTo": {
              "collection": true
            }
          }
        },
        {
          "name": "to-css-custom-properties",
          "output": {
            "type": "file",
            "filePath": "output/colors.css"
          }
        }
      ]
    },
    {
      "name": "Generate text styles as CSS classes",
      "parsers": [
        {
          "name": "filter",
          "options": {
            "query": {
              "where": {
                "token": ".*",
                "withTypes": {
                  "include": [
                    "textStyle"
                  ]
                },
                "select": {
                  "token": true
                }
              }
            }
          }
        },
        {
          "name": "change-case",
          "options": {
            "toCase": "kebabCase",
            "applyTo": {
              "token": true
            }
          }
        },
        {
          "name": "make-line-height-relative",
          "options": {}
        },
        {
          "name": "convert-dimension",
          "options": {
            "applyToKeys": {
              "textStyle": [
                "fontSize"
              ]
            },
            "toFormat": "rem"
          }
        },   
        {
          "name": "to-css-text-style",
          "output": {
            "type": "file",
            "filePath": "output/text-styles.scss"
          },
          "options": {
            "genericFamily": "sans-serif",
            "tokenNameTemplate": "text-style-{{token}}"
          }
        }
      ]
    },
    {
      "name": "Optimize and transform vectors with svgo + Generate SVG files",
      "parsers": [
        {
          "name": "svgo",
          "output": {
            "type": "directory",
            "directoryPath": "output/assets"
          },
          "options": {
            "svgo": {
              "plugins": [
                {
                  "name": "removeDimensions"
                },
                {
                  "name": "convertColors",
                  "params": {
                    "currentColor": true
                  }
                }
              ]
            }
          }
        }
      ]
    }
  ]
}
```

{% endcode %}
{% endtab %}

{% tab title="GitHub configuration" %}
If you use the GitHub, you need to fill 4 properties:

* `repository`  is `@organization/repository`
* `head` lets you set the branch your PR will be created on
* `base` lets you set the branch your PR will be merged on
* `rules` lets you transform tokens by chaining parsers

{% hint style="info" %}
Make sure you have connected your GitHub account with your Specify account. Head toward [this article](https://help.specifyapp.com/en/articles/4722440-add-github-as-a-destination) to learn more.
{% endhint %}

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

```json
{
  "version": "2",
  "head": "specifyrc-json",
  "base": "main",
  "repository": "@organization/repository",
  "rules": [
    {
      "name": "Generate colors in HSL",
      "parsers": [
        {
          "name": "filter",
          "options": {
            "query": {
              "where": {
                "token": ".*",
                "withTypes": {
                  "include": [
                    "color"
                  ]
                },
                "select": {
                  "parents": true
                }
              }
            }
          }
        },
        {
          "name": "convert-color",
          "options": {
            "toFormat": "hsl",
            "applyTo": {
              "collection": true
            }
          }
        },
        {
          "name": "change-case",
          "options": {
            "change": "names",
            "toCase": "kebabCase",
            "applyTo": {
              "collection": true
            }
          }
        },
        {
          "name": "change-case",
          "options": {
            "change": "modes",
            "toCase": "kebabCase",
            "applyTo": {
              "collection": true
            }
          }
        },
        {
          "name": "to-css-custom-properties",
          "output": {
            "type": "file",
            "filePath": "tokens.css"
          }
        }
      ]
    },
    {
      "name": "Generate text styles as CSS classes",
      "parsers": [
        {
          "name": "filter",
          "options": {
            "query": {
              "where": {
                "token": ".*",
                "withTypes": {
                  "include": [
                    "textStyle"
                  ]
                },
                "select": {
                  "token": true
                }
              }
            }
          }
        },
        {
          "name": "change-case",
          "options": {
            "toCase": "kebabCase",
            "applyTo": {
              "token": true
            }
          }
        },
        {
          "name": "make-line-height-relative",
          "options": {}
        },
        {
          "name": "convert-dimension",
          "options": {
            "applyToKeys": {
              "textStyle": [
                "fontSize"
              ]
            },
            "toFormat": "rem"
          }
        },   
        {
          "name": "to-css-text-style",
          "output": {
            "type": "file",
            "filePath": "public/text-styles.scss"
          },
          "options": {
            "genericFamily": "sans-serif",
            "tokenNameTemplate": "text-style-{{token}}"
          }
        }
      ]
    },
    {
      "name": "Optimize and transform vectors with svgo + Generate SVG files",
      "parsers": [
        {
          "name": "svgo",
          "output": {
            "type": "directory",
            "directoryPath": "output/assets"
          },
          "options": {
            "svgo": {
              "plugins": [
                {
                  "name": "removeDimensions"
                },
                {
                  "name": "convertColors",
                  "params": {
                    "currentColor": true
                  }
                }
              ]
            }
          }
        }
      ]
    }
  ]
}
```

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