CLI config

Learn how to use the command-line interface (CLI) config file to personalize and override the default behavior of your Zeytal CLI package.

Config file types

Zeytal CLI supports two config file sources:

  • zeytal.json
  • .zeytalrc

Not supported by the CLI:

  • Global RC file in the user's home directory
  • Config from package.json

Config sources loading priority

Zeytal CLI merges config sources following the order below:

  1. Config overrides passed by commmand options
  2. zeytal.json
  3. .zeytalrc

Configuration settings

With your config files, you can override the settings for the generated:

We’ll cover the .zeytalrc file syntax right after the part on the zeytal.json file.

To configure and override the default behavior of the CLI commands you use, we recommend you create a zeytal.json file in your project’s root directory.

Schema autocomplete

To add autocompletion, type checking, and schema validation to your zeytal.json file, add the following to the top of your file:

zeytal.json

{
  "$schema": "node_modules/zeytal/schema/zeytal.json"
}

Config main categories

Inside your config file you’ll find four main categories:

  • assets
  • styles
  • variables
  • tailwind

Your zeytal.json file will look like this:

zeytal.json

{
  "$schema": "node_modules/zeytal/schema/zeytal.json",
  "assets": {},
  "styles": {},
  "variables": {},
  "tailwind": {}
}

Assets config

You can learn more about the assets config in the dedicated section.

Go to Assets Config

Styles config

You can learn more about the styles config in the dedicated section.

Go to Styles Config

Variables config

You can learn more about the variables config in the dedicated section.

Go to Variables Config

TailwindCSS config

You can learn more about the tailwind config in the dedicated section.

Go to TailwindCSS Config

Config defaults

zeytal.json

{
  "assets": {
    "figmaFilesVersion": "live",
    "directoryPath": ".zeytal/assets",
    "optimize": {
      "svg": {}
    }
  },
  "styles": {
    "figmaFilesVersion": "live",
    "directoryPath": ".zeytal/styles",
    "formats": {
      "targets": ["ts", "css"],
      "colors": {
        "format": "hex"
      },
      "fonts": {
        "usePostscriptFontNames": false,
        "unit": "px",
        "relativeLineHeight": false
      },
      "effects": {
        "combine": true
      },
      "grids": {
        "extractColors": false
      }
    }
  },
  "variables": {
    "directoryPath": ".zeytal/variables",
    "collectionsIgnorePrefix": "",
    "formats": {
      "targets": ["ts", "css"],
      "colors": {
        "format": "hex"
      },
      "numbers": {
        "format": []
      }
    }
  },
  "tailwind": {
    "tokensPrefix": "",
    "globalModes": [],
    "globalIgnoreTokenNames": [],
    "globalStripTokenNames": [],
    "globalRewriteTokenNames": {},
    "namespaces": {
      "fontFamily": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "fontSize": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "fontWeight": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "letterSpacing": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "lineHeight": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "color": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "spacing": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "breakpoint": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "container": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "radius": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "shadow": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "insetShadow": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "dropShadow": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "blur": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "perspective": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "aspect": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "ease": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "animate": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      }
    }
  }
}

RC config file

Let’s break down how the .zeytalrc file works.

This file lets you override the same settings as zeytal.json but use a different syntax.

We’ll show you the default config using .zeytalrc and walk you through the most common syntax patterns so you can easily set up your own RC config file.

RC syntax usage

Define a value

stringValue="some text"
numberValue=123
booleanValue=true
arrayOfStringsValue=["text 1", "text 2"]
emptyObjectValue={}

Define a nested value

object.keyA.key1="some-value"

Push to an array

styles.formats.targets[]="json"

Update array item by index

styles.formats.targets.0="json"

Config default — RC style

assets.figmaFilesVersion="live"
assets.directoryPath=".zeytal/assets"
assets.optimize.svg={}
styles.figmaFilesVersion="live"
styles.directoryPath=".zeytal/styles"
styles.formats.targets=["ts", "css"]
styles.formats.colors.format="hex"
styles.formats.fonts.usePostscriptFontNames=false
styles.formats.fonts.unit="px"
styles.formats.fonts.relativeLineHeight=false
styles.formats.effects.combine=true
styles.formats.grids.extractColors=false
variables.directoryPath=".zeytal/variables"
variables.collectionsIgnorePrefix=""
variables.formats.targets=["ts", "css"]
variables.formats.colors.format="hex"
variables.formats.numbers.format=[]
tailwind.tokensPrefix=""
tailwind.globalModes=[]
tailwind.globalIgnoreTokenNames=[]
tailwind.globalStripTokenNames=[]
tailwind.globalRewriteTokenNames={}
tailwind.namespaces.fontFamily.tokensMapping=[]
tailwind.namespaces.fontFamily.stripTokenNames=[]
tailwind.namespaces.fontFamily.rewriteTokenNames={}
tailwind.namespaces.fontSize.tokensMapping=[]
tailwind.namespaces.fontSize.stripTokenNames=[]
tailwind.namespaces.fontSize.rewriteTokenNames={}
tailwind.namespaces.fontWeight.tokensMapping=[]
tailwind.namespaces.fontWeight.stripTokenNames=[]
tailwind.namespaces.fontWeight.rewriteTokenNames={}
tailwind.namespaces.letterSpacing.tokensMapping=[]
tailwind.namespaces.letterSpacing.stripTokenNames=[]
tailwind.namespaces.letterSpacing.rewriteTokenNames={}
tailwind.namespaces.lineHeight.tokensMapping=[]
tailwind.namespaces.lineHeight.stripTokenNames=[]
tailwind.namespaces.lineHeight.rewriteTokenNames={}
tailwind.namespaces.color.tokensMapping=[]
tailwind.namespaces.color.stripTokenNames=[]
tailwind.namespaces.color.rewriteTokenNames={}
tailwind.namespaces.spacing.tokensMapping=[]
tailwind.namespaces.spacing.stripTokenNames=[]
tailwind.namespaces.spacing.rewriteTokenNames={}
tailwind.namespaces.breakpoint.tokensMapping=[]
tailwind.namespaces.breakpoint.stripTokenNames=[]
tailwind.namespaces.breakpoint.rewriteTokenNames={}
tailwind.namespaces.container.tokensMapping=[]
tailwind.namespaces.container.stripTokenNames=[]
tailwind.namespaces.container.rewriteTokenNames={}
tailwind.namespaces.radius.tokensMapping[]
tailwind.namespaces.radius.stripTokenNames[]
tailwind.namespaces.radius.rewriteTokenNames{}
tailwind.namespaces.shadow.tokensMapping=[]
tailwind.namespaces.shadow.stripTokenNames=[]
tailwind.namespaces.shadow.rewriteTokenNames={}
tailwind.namespaces.insetShadow.tokensMapping=[]
tailwind.namespaces.insetShadow.stripTokenNames=[]
tailwind.namespaces.insetShadow.rewriteTokenNames={}
tailwind.namespaces.dropShadow.tokensMapping=[]
tailwind.namespaces.dropShadow.stripTokenNames=[]
tailwind.namespaces.dropShadow.rewriteTokenNames={}
tailwind.namespaces.blur.tokensMapping=[]
tailwind.namespaces.blur.stripTokenNames=[]
tailwind.namespaces.blur.rewriteTokenNames={}
tailwind.namespaces.perspective.tokensMapping=[]
tailwind.namespaces.perspective.stripTokenNames=[]
tailwind.namespaces.perspective.rewriteTokenNames={}
tailwind.namespaces.aspect.tokensMapping=[]
tailwind.namespaces.aspect.stripTokenNames=[]
tailwind.namespaces.aspect.rewriteTokenNames={}
tailwind.namespaces.ease.tokensMapping=[]
tailwind.namespaces.ease.stripTokenNames=[]
tailwind.namespaces.ease.rewriteTokenNames={}
tailwind.namespaces.animate.tokensMapping=[]
tailwind.namespaces.animate.stripTokenNames=[]
tailwind.namespaces.animate.rewriteTokenNames={}

Previous
Generated files
Next
Assets config