less.js icon indicating copy to clipboard operation
less.js copied to clipboard

Less confused about `max() + calc()`

Open mina86 opened this issue 4 years ago • 3 comments

$ lessc --version
lessc 4.1.1 (Less Compiler) [JavaScript]
$ lessc  <(echo 'body { padding: max(1em, calc(50vw - 25rem)); } ')
body {
  padding: 1em;
}

Expected output:

body {
  padding: max(1em, calc(50vw - 25rem));
}

Any subset of the expression (e.g. max(1em, 50vw) or calc(50vw - 25rem)) works fine.

mina86 avatar Feb 22 '21 15:02 mina86

Having the same issue with nested var function in min();

eg.

min(var(--maxWidth, 50rem), 100%)

compiles to

100% instead of expected min(var(--maxWidth, 50rem), 100%)

Seems to execute less-provided min function instead of the one from vanilla CSS.

FreekVR avatar Feb 24 '21 16:02 FreekVR

calc inside max is redundant

max(1em, calc(50vw - 25rem)) can be max(1em, 50vw - 25rem)

However, max(1em, 50vw - 25rem) compiles to max(1em, 25vw) instaed of max(1em, 50vw - 25rem)

Related issue

A workaround is ~"max(1em, 50vw - 25rem)"

oebrab avatar Apr 18 '21 08:04 oebrab

Hi @matthew-dean @iChenLei. Is there any chance the fix for this bug can be merged and published? Thanks.

bugron avatar Jan 12 '23 10:01 bugron