Как устранить ошибку Error: «env(safe-area-inset-right)» is not a number for `max' в Fancybox3?

Question

[uRoot]

Подключил Fancybox3 в проект. JS подхватился и работает, CSS как бы тоже, но webpack выдаёт ошибку:

[12:43:16] gulp-notify: [Gulp] Error: "env(safe-area-inset-right)" is not a number for `max'Line: 485
File: node_modules/@fancyapps/fancybox/dist/jquery.fancybox.css
Line: 485
Error: "env(safe-area-inset-right)" is not a number for `max'

На github.com есть тикет, но что-то я не могу натянуть решение на свою проблему, может дело не в этом: https://github.com/fancyapps/fancybox/issues/2153

В сборке используется scss, если что

Если подключить css по CDN-у, то проблема исчезнет, но webpack будет просто сыпать ворнингами

Answer 1

[tyzberd]

https://github.com/fancyapps/fancybox/pull/2252
https://github.com/fancyapps/fancybox/pull/2252/co...
или это
https://github.com/sass/sass/issues/2378#issuecomm...

Comments

[uRoot]

Я даже не знаю, что и сказать

Если оставить эмоции: а фикса для npm и yarn не будет, я правильно понял? А то я немного не могу въехать.

[tyzberd]

Это проблема scss

[uRoot]

tyzberd, а что и к чему? А то я не совсем могу въехать: почему происходит и т.д.

[tyzberd]

в css есть max https://developer.mozilla.org/en-US/docs/Web/CSS/max
и в sass была min() and max()
для Dart Sass как я вижу поправили

LibSass and Ruby Sass currently always parse min() and max() as Sass functions. To create a plain CSS min() or max() call for those implementations, you can write something like unquote("min(#{$padding}, env(safe-area-inset-left))") instead.

Answer 2

[Anton]

Добавьте 2 миксина

@function max($numbers...) {
  @return m#{a}x(#{$numbers});
}

@function min($numbers...) {
  @return m#{i}n(#{$numbers});
}

Comments

[uRoot]

Спасибо. Нужно будет попробовать

[Andrey_Sivak]

Благодарю! отличное решение!