SCSS compiler prevents compilation of valid CSS inside min() and max() functions

[Hyperseeker]

Bug Report

Environment

Zola version: 0.16.1

Expected Behavior

SCSS should correctly compile expressions inside min() and max(). Specifically:

1. min() syntax (effectively replicated in the related max() and clamp()) permits any number of expressions [MDN] (e.g. min(50% - 10px, 3em - 10px))
2. calc() is usable inside min() etc., probably because it supports the same syntax [MDN] but only for a single expression (e.g. min(calc(50% - 10px), calc(3em - 10px)))

Current Behavior

Zola produces errors when using either serve or build commands.

When trying case 1:

Error: Failed to build the site
Error: Error: Incompatible units: 'vw' and '%'.
        on line 110:27 of //?/C:/***/src/sass/stylesheet.scss
>>      margin-inline-start: min(50% - 50vw, 2560px - 50vw);
   --------------------------^

When trying case 2:

Error: Failed to build the site
Error: Error: "calc(50% - 50vw)" is not a number for `min'
        on line 111:23 of //?/C:/***/src/sass/stylesheet.scss, in function `min`
        from line 111:23 of //?/C:/***/src/sass/stylesheet.scss
>>      margin-inline-start: min(calc(50% - 50vw), calc(2560px - 50vw));
   ----------------------^

Note 1: both of these have been tested in Chromium and have produced the same valid outcome.

Note 2: this only applies to SCSS during compilation. Regular CSS, produced independently from the compiler (e.g. /static/test.css), results in no such issues during build.

Note 3: calc(min(50% - 10px, 3em - 10px)) does not produce an error.

(As a sidenote: note the duplicate "Error:" in the second line of the error messages.)

Step to reproduce

Use the following declarations with any selector in SCSS, and have the stylesheet compile:

1. width: min(50% - 50vw, 2560px - 50vw)
2. width: min(calc(50% - 50vw), calc(2560px - 50vw))

[Keats]

It looks like a libsass issue. We are planning to switch to a Rust based implementation as libsass is deprecated (and a huge pain to build): #1535

[focusaurus]

I'm running into this as well. There is another workaround though FYI you can bypass sass using unquote

  width: unquote("min(450px, 95vw)");

[Keats]

That should be fixed in the next branch