change-case
This parser helps you change the case of names or modes over a SDTF graph.
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;
};
}
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' | | |
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. |
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
.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
}
Last modified 1mo ago