Links

change-case

This parser helps you change the case of names or modes over a SDTF graph.

Interface

interface parser {
name: 'change-case';
options: {
change?: 'name' | 'modes';
toCase:
| 'camelCase'
| 'capitalCase'
| 'constantCase'
| 'kebabCase'
| 'noCase'
| 'pascalCase'
| 'pascalSnakeCase'
| 'pathCase'
| 'sentenceCase'
| 'snakeCase'
| 'trainCase';
applyTo:
| { collection: string | true }
| { group: string | true }
| { token: string | true }
| SDTFQuery;
};
}

Options

Parameter
Required
Type
Default
Description
change
optional
'names' | 'modes'
'names'
Change the names or the modes of the selected items.
toCase
required
| 'camelCase'
| 'capitalCase'
| 'constantCase'
| 'kebabCase'
| 'noCase'
| 'pascalCase'
| 'pascalSnakeCase'
| 'pathCase'
| 'sentenceCase'
| 'snakeCase'
| 'trainCase'
The case transformation to apply. Actual transform is done by the change-case package.
applyTo
required
| { collection: string | true }
| { group: string | true }
| { token: string | true }
| SDTFQuery
The selection where to apply the transformation. collection, group, token take a Regex string or true to select anything of the kind. An SDTFQuery can be used for advance use cases.

Basic usage

This example helps you transform in kebabCase the name all collections, groups, tokens and modes. Use this example if you want to generate CSS Custom properties with the to-css-custom-properties parser.
Input
Config
Output
1
{
2
"Colors": {
3
"$collection": { "$modes": ["Light", "Dark"] },
4
"Core": {
5
"blue 100": {
6
"$type": "color",
7
"$description": "token 1 aliased with n modes within collection within n groups",
8
"$value": {
9
"Light": {
10
"red": 255,
11
"blue": 255,
12
"alpha": 1,
13
"green": 255,
14
"model": "rgb"
15
},
16
"Dark": {
17
"red": 229,
18
"blue": 29,
19
"alpha": 1,
20
"green": 29,
21
"model": "rgb"
22
}
23
}
24
},
25
"blue 700": {
26
"$type": "color",
27
"$description": "token 2 aliased with n modes within collection within n groups",
28
"$value": {
29
"Light": {
30
"red": 255,
31
"blue": 255,
32
"alpha": 1,
33
"green": 200,
34
"model": "rgb"
35
},
36
"Dark": {
37
"red": 229,
38
"blue": 0,
39
"alpha": 1,
40
"green": 0,
41
"model": "rgb"
42
}
43
}
44
}
45
},
46
"semantic": {
47
"background": {
48
"button": {
49
"primary": {
50
"hover": {
51
"$type": "color",
52
"$description": "alias token with n modes within collection within n groups",
53
"$value": {
54
"Dark": {
55
"$mode": "dark",
56
"$alias": "Colors.Core.blue 100"
57
},
58
"Light": {
59
"$mode": "light",
60
"$alias": "Colors.Core.blue 700"
61
}
62
}
63
}
64
}
65
}
66
}
67
}
68
}
69
}
We change the case of the token names and the modes to kebabCase. We applyTo the collection level so we transform in kebabCase:
  • the collection names
  • the group names
  • the token names
  • the mode names
We eventually generate our transformed SDTF graph in a JSON file thanks to the to-sdtf parser.
.specifyrc.json
1
{
2
"version": "2",
3
"repository": "@owner/repository",
4
"personalAccessToken": "<your-personal-access-token>",
5
"rules": [
6
{
7
"name": "SDTF",
8
"parsers": [
9
{
10
"name": "change-case",
11
"options": {
12
"change": "names",
13
"toCase": "kebabCase",
14
"applyTo": {
15
"collection": true
16
}
17
}
18
},
19
{
20
"name": "change-case",
21
"options": {
22
"change": "modes",
23
"toCase": "kebabCase",
24
"applyTo": {
25
"collection": true
26
}
27
}
28
},
29
{
30
"name": "to-sdtf",
31
"output": {
32
"type": "file",
33
"filePath": "tokens.json"
34
}
35
}
36
]
37
}
38
]
39
}
tokens.json
1
{
2
"colors": {
3
"$collection": { "$modes": ["light", "dark"] },
4
"core": {
5
"blue-100": {
6
"$type": "color",
7
"$description": "token 1 aliased with n modes within collection within n groups",
8
"$value": {
9
"light": {
10
"red": 255,
11
"blue": 255,
12
"alpha": 1,
13
"green": 255,
14
"model": "rgb"
15
},
16
"dark": {
17
"red": 229,
18
"blue": 29,
19
"alpha": 1,
20
"green": 29,
21
"model": "rgb"
22
}
23
}
24
},
25
"blue-700": {
26
"$type": "color",
27
"$description": "token 2 aliased with n modes within collection within n groups",
28
"$value": {
29
"light": {
30
"red": 255,
31
"blue": 255,
32
"alpha": 1,
33
"green": 200,
34
"model": "rgb"
35
},
36
"dark": {
37
"red": 229,
38
"blue": 0,
39
"alpha": 1,
40
"green": 0,
41
"model": "rgb"
42
}
43
}
44
}
45
},
46
"semantic": {
47
"background": {
48
"button": {
49
"primary": {
50
"hover": {
51
"$type": "color",
52
"$description": "alias token with n modes within collection within n groups",
53
"$value": {
54
"dark": {
55
"$mode": "dark",
56
"$alias": "colors.core.blue-100"
57
},
58
"light": {
59
"$mode": "light",
60
"$alias": "colors.core.blue-700"
61
}
62
}
63
}
64
}
65
}
66
}
67
}
68
}
69
}