change-case This parser helps you change the case of names or modes over a SDTF graph.
Interface
Copy 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 the names or the modes of the selected items.
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.
Config
We change the case of the token names and the modes to kebabCase. We applyTo the collection level so we transform in kebabCase:
We eventually generate our transformed SDTF graph in a JSON file thanks to the to-sdtf parser.
Copy {
"version": "2",
"repository": "@organization/repository",
// Only use the personalAccessToken when working with the CLI
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "Format all token names and modes to kebabCase and generate tokens in JSON",
"parsers": [
{
"name": "change-case",
"options": {
"change": "names",
"toCase": "kebabCase",
"applyTo": {
"collection": true
}
}
},
{
"name": "change-case",
"options": {
"change": "modes",
"toCase": "kebabCase",
"applyTo": {
"collection": true
}
}
},
{
"name": "to-sdtf",
"output": {
"type": "file",
"filePath": "tokens.json"
}
}
]
}
]
} Output
Copy {
"colors": {
"$collection": { "$modes": ["light", "dark"] },
"core": {
"blue-100": {
"$type": "color",
"$description": "token 1 aliased with n modes within collection within n groups",
"$value": {
"light": {
"red": 255,
"blue": 255,
"alpha": 1,
"green": 255,
"model": "rgb"
},
"dark": {
"red": 229,
"blue": 29,
"alpha": 1,
"green": 29,
"model": "rgb"
}
}
},
"blue-700": {
"$type": "color",
"$description": "token 2 aliased with n modes within collection within n groups",
"$value": {
"light": {
"red": 255,
"blue": 255,
"alpha": 1,
"green": 200,
"model": "rgb"
},
"dark": {
"red": 229,
"blue": 0,
"alpha": 1,
"green": 0,
"model": "rgb"
}
}
}
},
"semantic": {
"background": {
"button": {
"primary": {
"hover": {
"$type": "color",
"$description": "alias token with n modes within collection within n groups",
"$value": {
"dark": {
"$mode": "dark",
"$alias": "colors.core.blue-100"
},
"light": {
"$mode": "light",
"$alias": "colors.core.blue-700"
}
}
}
}
}
}
}
}
}