arrow-left

All pages
gitbookPowered by GitBook
1 of 1

Loading...

change-case

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

hashtag
Interface

hashtag
Options

Parameter
Required
Type
Default
Description

hashtag
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.

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

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;
  };
}

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.

    change

    optional

    'names'

    Change the names or the modes of the selected items.

    toCase

    required

    The case transformation to apply. Actual transform is done by the change-casearrow-up-right package.

    applyTo

    required

    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.

    tokens.json
    {
      "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"
                    }
                  }
                }
              }
            }
          }
        }  
      }
    }
    'names' | 'modes'
    | 'camelCase'
    | 'capitalCase'
    | 'constantCase'
    | 'kebabCase'
    | 'noCase'
    | 'pascalCase'
    | 'pascalSnakeCase'
    | 'pathCase'
    | 'sentenceCase'
    | 'snakeCase'
    | 'trainCase'
    | { collection: string | true }
    | { group: string | true }
    | { token: string | true }
    | SDTFQuery
    {
      "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"
                    }
                  }
                }
              }
            }
          }
        }  
      }
    }
    .specifyrc.json
    {
      "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"
              }
            }
          ]
        }
      ]
    }