Bad css variable name in dev mode

Hello, I have got trouble with how Figma handles the CSS variable name when it ends with a number. Please, look at my screenshot.
Variable “c1 500” must not be “–c-1500”
Am I right ?

1 Like

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

1 Like

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 :sweat_smile:
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.

1 Like