CLI config file

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 in your root dir
  3. .zeytalrc in your root dir

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

1
{
2
  "$schema": "node_modules/zeytal/schema/zeytal.json"
3
}

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

1
{
2
  "$schema": "node_modules/zeytal/schema/zeytal.json",
3
  "assets": {},
4
  "styles": {},
5
  "variables": {},
6
  "tailwind": {}
7
}

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

1
{
2
  "assets": {
3
    "figmaFilesVersion": "live",
4
    "directoryPath": ".zeytal/assets",
5
    "optimize": {
6
      "svg": {}
7
    }
8
  },
9
  "styles": {
10
    "figmaFilesVersion": "live",
11
    "directoryPath": ".zeytal/styles",
12
    "formats": {
13
      "targets": ["ts", "css"],
14
      "colors": {
15
        "format": "hex"
16
      },
17
      "fonts": {
18
        "usePostscriptFontNames": false,
19
        "unit": "px",
20
        "relativeLineHeight": false
21
      },
22
      "effects": {
23
        "combine": true
24
      },
25
      "grids": {
26
        "extractColors": false
27
      }
28
    }
29
  },
30
  "variables": {
31
    "directoryPath": ".zeytal/variables",
32
    "collectionsIgnorePrefix": "",
33
    "formats": {
34
      "targets": ["ts", "css"],
35
      "colors": {
36
        "format": "hex"
37
      },
38
      "numbers": {
39
        "format": []
40
      }
41
    }
42
  },
43
  "tailwind": {
44
    "tokensPrefix": "",
45
    "globalModes": [],
46
    "globalIgnoreTokenNames": [],
47
    "globalStripTokenNames": [],
48
    "globalRewriteTokenNames": {},
49
    "namespaces": {
50
      "fontFamily": {
51
        "tokensMapping": [],
52
        "stripTokenNames": [],
53
        "rewriteTokenNames": {}
54
      },
55
      "fontSize": {
56
        "tokensMapping": [],
57
        "stripTokenNames": [],
58
        "rewriteTokenNames": {}
59
      },
60
      "fontWeight": {
61
        "tokensMapping": [],
62
        "stripTokenNames": [],
63
        "rewriteTokenNames": {}
64
      },
65
      "letterSpacing": {
66
        "tokensMapping": [],
67
        "stripTokenNames": [],
68
        "rewriteTokenNames": {}
69
      },
70
      "lineHeight": {
71
        "tokensMapping": [],
72
        "stripTokenNames": [],
73
        "rewriteTokenNames": {}
74
      },
75
      "color": {
76
        "tokensMapping": [],
77
        "stripTokenNames": [],
78
        "rewriteTokenNames": {}
79
      },
80
      "spacing": {
81
        "tokensMapping": [],
82
        "stripTokenNames": [],
83
        "rewriteTokenNames": {}
84
      },
85
      "breakpoint": {
86
        "tokensMapping": [],
87
        "stripTokenNames": [],
88
        "rewriteTokenNames": {}
89
      },
90
      "container": {
91
        "tokensMapping": [],
92
        "stripTokenNames": [],
93
        "rewriteTokenNames": {}
94
      },
95
      "radius": {
96
        "tokensMapping": [],
97
        "stripTokenNames": [],
98
        "rewriteTokenNames": {}
99
      },
100
      "shadow": {
101
        "tokensMapping": [],
102
        "stripTokenNames": [],
103
        "rewriteTokenNames": {}
104
      },
105
      "insetShadow": {
106
        "tokensMapping": [],
107
        "stripTokenNames": [],
108
        "rewriteTokenNames": {}
109
      },
110
      "dropShadow": {
111
        "tokensMapping": [],
112
        "stripTokenNames": [],
113
        "rewriteTokenNames": {}
114
      },
115
      "blur": {
116
        "tokensMapping": [],
117
        "stripTokenNames": [],
118
        "rewriteTokenNames": {}
119
      },
120
      "perspective": {
121
        "tokensMapping": [],
122
        "stripTokenNames": [],
123
        "rewriteTokenNames": {}
124
      },
125
      "aspect": {
126
        "tokensMapping": [],
127
        "stripTokenNames": [],
128
        "rewriteTokenNames": {}
129
      },
130
      "ease": {
131
        "tokensMapping": [],
132
        "stripTokenNames": [],
133
        "rewriteTokenNames": {}
134
      },
135
      "animate": {
136
        "tokensMapping": [],
137
        "stripTokenNames": [],
138
        "rewriteTokenNames": {}
139
      }
140
    }
141
  }
142
}

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

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

Define a nested value

1
object.keyA.key1="some-value"

Push to an array

1
styles.formats.targets[]="json"

Update array item by index

1
styles.formats.targets.0="json"

Config default — RC style

1
assets.figmaFilesVersion="live"
2
assets.directoryPath=".zeytal/assets"
3
assets.optimize.svg={}
4
styles.figmaFilesVersion="live"
5
styles.directoryPath=".zeytal/styles"
6
styles.formats.targets=["ts", "css"]
7
styles.formats.colors.format="hex"
8
styles.formats.fonts.usePostscriptFontNames=false
9
styles.formats.fonts.unit="px"
10
styles.formats.fonts.relativeLineHeight=false
11
styles.formats.effects.combine=true
12
styles.formats.grids.extractColors=false
13
variables.directoryPath=".zeytal/variables"
14
variables.collectionsIgnorePrefix=""
15
variables.formats.targets=["ts", "css"]
16
variables.formats.colors.format="hex"
17
variables.formats.numbers.format=[]
18
tailwind.tokensPrefix=""
19
tailwind.globalModes=[]
20
tailwind.globalIgnoreTokenNames=[]
21
tailwind.globalStripTokenNames=[]
22
tailwind.globalRewriteTokenNames={}
23
tailwind.namespaces.fontFamily.tokensMapping=[]
24
tailwind.namespaces.fontFamily.stripTokenNames=[]
25
tailwind.namespaces.fontFamily.rewriteTokenNames={}
26
tailwind.namespaces.fontSize.tokensMapping=[]
27
tailwind.namespaces.fontSize.stripTokenNames=[]
28
tailwind.namespaces.fontSize.rewriteTokenNames={}
29
tailwind.namespaces.fontWeight.tokensMapping=[]
30
tailwind.namespaces.fontWeight.stripTokenNames=[]
31
tailwind.namespaces.fontWeight.rewriteTokenNames={}
32
tailwind.namespaces.letterSpacing.tokensMapping=[]
33
tailwind.namespaces.letterSpacing.stripTokenNames=[]
34
tailwind.namespaces.letterSpacing.rewriteTokenNames={}
35
tailwind.namespaces.lineHeight.tokensMapping=[]
36
tailwind.namespaces.lineHeight.stripTokenNames=[]
37
tailwind.namespaces.lineHeight.rewriteTokenNames={}
38
tailwind.namespaces.color.tokensMapping=[]
39
tailwind.namespaces.color.stripTokenNames=[]
40
tailwind.namespaces.color.rewriteTokenNames={}
41
tailwind.namespaces.spacing.tokensMapping=[]
42
tailwind.namespaces.spacing.stripTokenNames=[]
43
tailwind.namespaces.spacing.rewriteTokenNames={}
44
tailwind.namespaces.breakpoint.tokensMapping=[]
45
tailwind.namespaces.breakpoint.stripTokenNames=[]
46
tailwind.namespaces.breakpoint.rewriteTokenNames={}
47
tailwind.namespaces.container.tokensMapping=[]
48
tailwind.namespaces.container.stripTokenNames=[]
49
tailwind.namespaces.container.rewriteTokenNames={}
50
tailwind.namespaces.radius.tokensMapping[]
51
tailwind.namespaces.radius.stripTokenNames[]
52
tailwind.namespaces.radius.rewriteTokenNames{}
53
tailwind.namespaces.shadow.tokensMapping=[]
54
tailwind.namespaces.shadow.stripTokenNames=[]
55
tailwind.namespaces.shadow.rewriteTokenNames={}
56
tailwind.namespaces.insetShadow.tokensMapping=[]
57
tailwind.namespaces.insetShadow.stripTokenNames=[]
58
tailwind.namespaces.insetShadow.rewriteTokenNames={}
59
tailwind.namespaces.dropShadow.tokensMapping=[]
60
tailwind.namespaces.dropShadow.stripTokenNames=[]
61
tailwind.namespaces.dropShadow.rewriteTokenNames={}
62
tailwind.namespaces.blur.tokensMapping=[]
63
tailwind.namespaces.blur.stripTokenNames=[]
64
tailwind.namespaces.blur.rewriteTokenNames={}
65
tailwind.namespaces.perspective.tokensMapping=[]
66
tailwind.namespaces.perspective.stripTokenNames=[]
67
tailwind.namespaces.perspective.rewriteTokenNames={}
68
tailwind.namespaces.aspect.tokensMapping=[]
69
tailwind.namespaces.aspect.stripTokenNames=[]
70
tailwind.namespaces.aspect.rewriteTokenNames={}
71
tailwind.namespaces.ease.tokensMapping=[]
72
tailwind.namespaces.ease.stripTokenNames=[]
73
tailwind.namespaces.ease.rewriteTokenNames={}
74
tailwind.namespaces.animate.tokensMapping=[]
75
tailwind.namespaces.animate.stripTokenNames=[]
76
tailwind.namespaces.animate.rewriteTokenNames={}

PreviousGenerated files
NextAssets config