less / less/less.js

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

Open
#3,777 23 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug good first issue
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:

  • 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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.