Introduction

The Specify CLI enables you to test and use Specify right from the terminal.

There are two main usages for the CLI:

  • To pull design tokens from your Specify repository into a local directory. Just like you would do with the REST API .
  • To sync a Specify repository to update the design tokens it contains.

With the CLI, you will be able to maintain your design tokens and stay up to date by automating their extraction.

Follow the installation guide to set up the Specify CLI.

Installation

You can install the Specify CLI via Yarn or NPM:

  • yarn add --dev @specifyapp/cli
  • npm install --save-dev @specifyapp/cli

Or globally:

  • yarn global add @specifyapp/cli
  • npm install -g @specifyapp/cli

Creating a script

To simplify the usage of the Specify CLI, you can create a script in your package.json which you can find an example here.

package.json

{
  ...
  "scripts": {
    "sync": "specify sync",
    "pull": "specify pull"
  }
  ...
}

Config File

You can use the Specify CLI with a config file. The default file should be named .specifyrc.json and should be put at the root of your project.

You can also use the -C flag and name your file the way you like. For now, only .js and .json file are supported.

The config file accepts the following properties:

  • repository string optional

    The repository containing the design tokens you're requesting. It follows the pattern @owner/repositoryName.

  • personalAccessToken string optional

    Your personal access token.

    👉 Generate your personal access token .

  • rules Array optional

    The list of all the rules that will be applied during the design tokens extraction.

Use case

Let's say you want to get all your colors from Specify converted in CSS Custom properties. You apply 2 parsers:

  1. The sort-by parser to sort your colors in alphabetical order
  2. The to-css-custom-properties parser to convert your design tokens in CSS Custom properties

Config File Use Case

{
  "repository": "@owner/repositoryName",
  "personalAccessToken": "personal-access-token",
  "rules": [
    {
      "name": "Design Tokens / Colors",
      "path": "assets/styles/variables/colors.css",
      "filter": {
        "types": ["color"]
      },
      "parsers": [
        {
          "name": "sort-by",
          "options": {
            "keys": ["name"]
          }
        },
        {
          "name": "to-css-custom-properties"
        }
      ]
    }
  ]
}

Flags

Flags are parameters you can pass while launching the command. All of these parameters are optional if you use a config file.

They will always override the config written in the config file. For more information about the config file, see Config file.

CLI - Common

  • --repository

    ,

    -r string optional

    The repository containing the design tokens you're requesting. It follows the pattern `@owner/repositoryName`.

  • --personal-access-token

    ,

    -p string optional

    Your personal access token.

    👉 Generate your personal access token .

  • --config-path

    ,

    -C string optional

    The path to your JSON or JavaScript config file.

CLI - Sync

  • --types

    ,

    -t string optional

    The types you want to synchronize. By default the CLI synchronizes every types but you can specify which type you want to sync by listing them here separated by a comma.

CLI - Pull

  • --rules

    ,

    -R string optional

    The list of all the rules that will be applied during the design tokens extraction.

  • --dry-run boolean optional

    Launch the CLI and display the result without creating the files.

Use case

Let's say you want to:

  1. Sync all the colors of your repository at @owner/repositoryName
  2. Get all your colors from the repository at @owner/repositoryName
  3. Transform them in CSS Custom Properties
  4. Save these CSS Custom Properties in a color.css file located in the style/ directory

CLI Example

specify sync \
--types color \
--repository <@owner>/<repositoryName> \
--personal-access-token <myPersonalAccessToken>

specify pull \
--repository <@owner>/<repositoryName> \
--personal-access-token <myPersonalAccessToken> \
--rules '[{"path": "style/color.css","filter": {"types": ["color"]},"parsers":[{"name": "to-css-custom-properties"}]}]'

CLI Short Example

specify sync \
-t color \
-r <@owner>/<repositoryName> \
-p <myPersonalAccessToken> \

specify pull \
-r <@owner>/<repositoryName> \
-p <myPersonalAccessToken> \
-R '[{"path": "style/color.css","filter": {"types": ["color"]},"parsers":[{"name": "to-css-custom-properties"}]}]'

CLI Short Example With Config Path

specify sync \
-t color \
-r <@owner>/<repositoryName> \
-p <myPersonalAccessToken> \
-C path/.specifyrc.json

specify pull \
-r <@owner>/<repositoryName> \
-p <myPersonalAccessToken> \
-C path/.specifyrc.json

Usage

Depending of your usage of the Specify CLI, you will have to give different parameters for it to work efficiently

CLI - Common

Both of the commands will need:

  • A repository. Represented by an owner and a name. You can find it in the URL of your repository in the Specify App (format: @owner/repositoryName).
  • A personal access token. A key allowing you to access your protected data. You can learn more about it in our authentication section.

You can specify these parameters by passing them as flags or by creating a config file.

CLI - Pull

For this command to work, it will need another parameter:

  • A set of rules. Each rules will define in which format and where you want to pull your design tokens from the repository.

Like the sync command, the pull command has some specific flags. To learn more about this, go to the dedicated section .

CLI - Sync

This command does not need more parameters than the two stated above.

But you will be able to pass some specific flags. To learn more about this, go to the dedicated section.

Get colors from a Specify repository

{
  "repository": "@owner/repositoryName",
  "personalAccessToken": "personal-access-token",
  "rules": [
    {
      "name": "Design Tokens / Colors",
      "path": "assets/styles/variables/colors.css",
      "filter": {
        "types": ["color"]
      },
      "parsers": [
        {
          "name": "sort-by",
          "options": {
            "keys": ["name"]
          }
        },
        {
          "name": "to-css-custom-properties"
        }
      ]
    }
  ]
}