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.
|
).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
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
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?