font-size: max(vw, px) causes internal error

[primiano]

• NPM version (npm -v): 6.4.1
• Node version (node -v): v10.10.0
• Node Process (node -p process.versions):
• Node Platform (node -p process.platform): darwin
• Node architecture (node -p process.arch): x64
• node-sass version (node -p "require('node-sass').info"):

node-sass	4.13.0	(Wrapper)	[JavaScript]
libsass  	3.5.4	(Sass Compiler)	[C/C++]

• npm node-sass versions (npm ls node-sass): [email protected]

Repro CSS:

h1 { font-size: max(1vw, 20px); }

Error:

[0] {
[0]   "status": 3,
[0]   "message": "Incompatible units: 'vw' and 'px'.",
[0]   "formatted": "Internal Error: Incompatible units: 'vw' and 'px'.\n"
[0] }

It seems legit CSS according to https://developer.mozilla.org/en-US/docs/Web/CSS/max

[nschonni]

This is only supported in dart-sass https://sass-lang.com/documentation/syntax/special-functions#min-and-max
You need to use string interpolation (similar to CSS variables) for this to work outside of dart-sass

h1 { font-size: #{"max(1vw, 20px)"}}; 

[primiano]

Ahh I see.
For posterity, it seems that also calc(max(1vw, 20px)) works.
Closing as a workaround is available (maybe the error message could give some better clues though)

[tolumide-ng]

Ahh I see.
For posterity, it seems that also calc(max(1vw, 20px)) works.
Closing as a workaround is available (maybe the error message could give some better clues though)

thank you

[ReganRyanNZ]

Best solution: sass is case sensitive, css is not, so MIN(10px, 5vh) will run as css no problem :)

Other solutions, which didn't work for me because of controller/system tests crashing:

• unquote("min(10px, 5vh)")
• calc(min(10px, 5vh))

For all of the above, any variables need to be wrapped in #{$my-var} brackets

[beyzanur-seyhan]

unquote("min(10px, 5vh)")

Best solution: sass is case sensitive, css is not, so MIN(10px, 5vh) will run as css no problem :)

Other solutions, which didn't work for me because of controller/system tests crashing:

• unquote("min(10px, 5vh)")
• calc(min(10px, 5vh))

For all of the above, any variables need to be wrapped in #{$my-var} brackets

unquote("min(10px, 5vh)") --> solution for me

Thank you!