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. Learn more about how to query your SDTF graph.

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

{
  "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"
                }
              }
            }
          }
        }
      }
    }  
  }
}

Config

Output