Adding additonal split string to convert variables to Token Studio syntax and remove unwanted characters and pull out specific parts of the output parameters

[mikeysouthwell]

Hi Jake,

I believe this is the section of your code in the "snippets.ts" script that needs to be adjusted to allow this change:

export function transformStringWithFilter(
  string: string,
  rawString: string,
  filter: SnippetStringFilter = "hyphen"
) {
  const splitString = string.split("-");
  const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.substring(1);
  switch (filter) {
    case "camel":
      return splitString
        .map((word, i) => (i === 0 ? word : capitalize(word)))
        .join("");
    case "constant":
      return splitString.join("_").toUpperCase();
    case "hyphen":
      return splitString.join("-").toLowerCase();
    case "pascal":
      return splitString.map(capitalize).join("");
    case "raw":
      return rawString;
    case "snake":
      return splitString.join("_").toLowerCase();
  }
  return splitString.join(" ");
}

Is it just as simple as adding this code below to the section of code above?

    case "tokenstudio":
      return rawString.join("/");

The objective here is to change something like this:

Colours/Surface/button-white

To this:

Colours.Surface.button-white

The custom Code Syntax option for variables is painful as you have to do this for each individual variable and if you change the name or move it you have to rename the custom code syntax!

Could we also use the same string transform filters on things like this to pull out the parts we need or remove the "px" next to the numbers?

"css.border": "var(--Stroke-stroke-2xs, 0.5px) solid Colours.Border.neutral"

"css.boxShadow": 0px 0.5px 1px 0px rgba(0, 0, 0, 0.10)