Bad css variable name in dev mode

Hi @Fred_Tinsel thank you for reporting this, I was also able to recreate this and I’ve reported this to our engineering team.

Hi @Fred_Tinsel

I do not think this is a bug but more of a feature: to translate your variable so developers can actually use it.
Variables in CSS :

• have to start with the double hyphen --
• can only be composed of -, _ and alphanumerical character [a-zA-Z0-9]
  So a variable named c1 500 cannot exist in CSS, that’s why Figma replaced it with something close (and valid) --c1-500

Hope it helped

Hello @Haroll
I don’t think so 😅
because the trouble is not between “c1” and “500”
it’s between c and 1. This two character are attached.
And yes, as you said, a good transcription is --c1-500 but Figma send c-1500
If I remove the blank space between c1 and 500 to get a complete string, then I rename my variable by c1-500, right?
But then Figma still convert it by c-1500
That’s a bug because my devs are really using --c1-500

Hey @Fred_Tinsel, Im so sorry - obvioulsy I forget to properly read u.u

I agree…this is a bug. I have my tokens in Figma in a structure like a/b/c and in dev move when using that token it will render the css var as --a-b-c which is correct. However, as mentioned earlier, when you add a number in with a letter, you get an unexpected hyphen so the structure like a/b/c1 should render css var (in dev mode) as --a-b-c1 but instead renders as --a-b-c-1.