The community member is looking for a way to edit the name of a CSS variable, specifically --space-xl, without losing its usage throughout the codebase. They have replaced the value of --space-xl with a more responsive value, --space-l-xl, but are wondering if there is a way to know where all the CSS variables have been used.
In the comments, another community member suggests that this use case may be possible when the CSS Variable Panel is released, implying that there is currently no explicit solution.
That would be great if we could edit CSS variable name.
Use case :
I use --space-xl : clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem) and it's not enough responsive in mobile format. I don't want to delete --space-xl in Global Root otherwise I will lost every place I set --space-xl. So, I replace value by clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem) which "--space-l-xl".
Or is there a way of knowing where I've placed all my CSS variables?
