Prefixed Tokens results with extra dash

[JoshRosenstein]

If the final key of a token path starts with a symbol, the resulting variable returns a extra dash. This causes inconsistent css variable naming conventions when tokens have different depths.

styles/src/create-styles.ts

Line 793 in 2fe6bcb

).replace(cssDisallowedRe, '-')

Not sure if there was a certain reason for replacing special characters with a dash, if there is, would it be an issue if you were to just remove any special character at the beginning of a key?

const cssDisallowedRe = /[^\w-]/g;
const names = ["color", "red"];
const key = "$100";

console.log(names.join("-") + "-" + key.replace(cssDisallowedRe, "-"));
// color-red--100
console.log(
  names.join("-") +
    "-" +
    key.charAt(0).replace(cssDisallowedRe, "") +
    key.slice(1).replace(cssDisallowedRe, "-")
);
// color-red-100

[jaredLunde]

Thank you for filing! This is a good point. Would you want to submit a PR? Otherwise I can do it tonight.

[JoshRosenstein]

@jaredLunde Sorry, didn't see your response till today, PR submitted.