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:

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

Or globally:

  • npm install -g @specifyapp/cli
  • yarn global add @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. This configuration can either be in JSON or in JavaScript. 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.

Properties

  • repository string optional

    The repository property is composed of two information:

    • the name of your organization in Specify (e.g. "@acme").
    • the name of the Specify repository containing the design data you're requesting (e.g., "brand")

    It follows the pattern @owner/repositoryName (e.g., "@acme/brand").

  • 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": "kebabcasify",
          "options": {
            "keys": ["name"]
          }
        },
        {
          "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 property is composed of two information:

    • the name of your organization in Specify (e.g. "@acme").
    • the name of the Specify repository containing the design data you're requesting (e.g., "brand")

    It follows the pattern @owner/repositoryName (e.g., "@acme/brand").

  • --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 of the design data you want your Specify repository to synchronizes from your sources. By default the CLI synchronizes every type of design data.

    You can synchronize specific types with the following pattern { "types": ["color", "textStyle"] }.

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 '[{"name": "Get Colors", "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 '[{"name": "Get Colors", "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. Folllowing the format @owner/repositoryName (e.g., "@acme/brand"). Learn more in the Properties section.
  • 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": "kebabcasify",
          "options": {
            "keys": ["name"]
          }
        },
        {
          "name": "sort-by",
          "options": {
            "keys": ["name"]
          }
        },
        {
          "name": "to-css-custom-properties"
        }
      ]
    }
  ]
}