Skip to main content
Question

Bad css variable name in dev mode


Fred_Tinsel

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 ?

5 replies

Ryan_52
Figmate
  • Technical Quality Specialist
  • 382 replies
  • June 24, 2023

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


Haroll
  • Active Member
  • 273 replies
  • August 10, 2023

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


Fred_Tinsel
  • Author
  • Active Member
  • 109 replies
  • August 23, 2023

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


Haroll
  • Active Member
  • 273 replies
  • August 23, 2023

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


Robert_Kever

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.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings