CSS min and max function calls that hold CSS variables fail with "Operation on an invalid type"

[rjgotten]

To reproduce:

With strict units enabled, perform a calc-like expression inside a min or max function
and use a CSS variable. E.g.

prop : min(100% - var(--some-var), 10px);

Current behavior:
Compiler will throw "Operation on an invalid type" error.

Expected behavior:
Compiler knows the arguments to min and max can be calc-like and doesn't throw, but retains the arguments as-is.

Environment information:

• less version: 4.1.3
• nodejs version: 14
• operating system: any

---

Having dug around a bit, it appears that the root of the issue is the fact that Operation is visited and flattened before passing to min and max, which means the var() node trips the compiler error as it afaict does not implement an operate method.

This problem can be avoided by setting evalArgs : false for both functions and performing custom lazy evaluation inside the functions themselves, where it can be wrapped in a try-catch and cause the function to go inert (and be treated as the CSS function proper) when incompatible types are present.

[shindodkar]

can i work on this bug?

[matthew-dean]

@shindodkar I don't see why not!

[debmalya37]

can I contribute to it ??

[matthew-dean]

@GitsOfVivek @debmalya37 Anyone can do this at any time. @shindodkar asked about it March 31st, but nothing has been produced yet.

[matthew-dean]

One way to prevent having to do this several times in several places would be to, rather than creating a try / catch block within each function, would be to create an abstraction that outputs certain functions as-is.

In other words, a number of functions have had try / catch blocks added within the function statement, and outputs the nodes as-is instead of throwing an error if it can't evaluate something, but that gets repetitive to add per function.

A downside of doing this is that if the stylesheet author intended Less to evaluate the statement, and there is an error in the expression, rather than showing an error, it will just output the function.

[matthew-dean]

@GitsOfVivek I'm not sure what more can be said about it. min / max are Less functions. They are also CSS functions. So, passing a var() into it is invalid if you intended it to be evaluated as a Less function at compile time, but valid if you intended it to be evaluated as a CSS function at runtime.

[VIRAT9358]

Can I be assigned this @matthew-dean

[VIRAT9358]

prop: clamp(10px, calc(100% - var(--some-var)), 100%);
Can we use clamp() function has relatively good browser support but may not work in older or less commonly used browsers

[Cyddharth-Gupta]

I have been pretty active on github for the last few days, I'll be quick in fixing this.
@matthew-dean can I take up this issue? There hasn't been any progress since the last 2 assignments

[matthew-dean]

@Cyddharth-Gupta 👍