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

ParameterRequiredTypeDefaultDescription

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.

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

Last updated