Prefixed Tokens results with extra dash

JoshRosenstein commented 3 years ago

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. https://github.com/dash-ui/styles/blob/2fe6bcbf1a74cef66fdad6520abbfc21a50086d6/src/create-styles.ts#L793

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 commented 3 years ago

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

JoshRosenstein commented 3 years ago

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

dash-ui / styles

Prefixed Tokens results with extra dash #3