CSS min and max function calls that hold CSS variables fail with "Operation on an invalid type"
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 17k
- Forks
- 3.4k
- Avg merge
- 7h 42m
- Merged PRs (30d)
- 26
Description
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:
lessversion: 4.1.3nodejsversion: 14operating 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the strict-units case with min/max, then trace where Operation is visited and flattened before the min and max functions receive their arguments. Check the min/max evaluation path and confirm the fix preserves calc-like arguments containing var() without raising the invalid-type error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- compilers
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100