Simplified syntax of CSS variables and calc in arbitrary values

[Serator]

The most annoying part about CSS for me personally is that variables are unnecessarily verbose. var(--foo) instead of --foo or $foo. Tailwind already supports the short syntax w-[--foo] and perhaps the Tailwind team could consider w-[calc(--foo_+_5px)], or w-[calc($foo_+_5px)], or even w-[$foo_+_5px]?

Briefly:

• w-[calc(var(--foo)_+_5px)] > w-[calc(--foo_+_5px)] > w-[--foo_+_5px]
• w-[calc(var(--foo)_+_5px)] > w-[calc($foo_+_5px)] > w-[$foo_+_5px]

[Serator]

To implement this, it's important to check for the presence of binding arithmetic symbol inside the expression. For example, shadow-[var(--foo)_1px] or shadow-[$foo_-1px] will not be wrapped in implicit calc because there is no binding arithmetic character, but w-[$1px_-_-1px] will be because of _-_.
It also means that the Pr (#11686) should be reversed.

Another solution would be to replace (add?) [] with {}, i.e. w-{$foo_-_-1px}.

[adamwathan]

We were just talking about this yesterday actually, would be cool to figure out something nice. One idea I had was w-[=(var(--foo)+5px)] to at least shorten calc to =. Little nervous to get too carried away and deviate too far from regular CSS stuff though.

[k-nearest-neighbor]

calc() is just one function, there's also clamp(). it would be nice to have a shorthand for that as well.

[Serator]

It makes sense to base it off of statistics and I'm virtually certain that calc (and var) is used many times more often than clamp / min / max and others.