Search code examples
ruby-on-railsrubysassfancybox-3

ActionView::Template::Error: Error: "env(safe-area-inset-right)" is not a number for `max' in Rails Test


I just installed fancyapp/[email protected] in my rails project. I wanted to override some css rules in fancybox, so I required the @fancyapps/fancybox/dist/jquery.fancybox.css and it works well in the browser.

However, ever time I run rails test, I get this error

UsersControllerTest#test_should_get_new:
ActionView::Template::Error: Error: "env(safe-area-inset-right)" is not a number for `max'
        on line 485:23 of node_modules/@fancyapps/fancybox/dist/jquery.fancybox.css, in function `max`
        from line 485:23 of node_modules/@fancyapps/fancybox/dist/jquery.fancybox.css
        from line 2:9 of app/assets/stylesheets/code.scss
>>         padding: 75px max(44px, env(safe-area-inset-right)) max(25px, env(sa
   ----------------------^

Some solutions on the internet and even on SO suggest that one add a sass function definitions as follows:

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

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

But this doesn't seem to work in rails test.

I'm using

  • Rails 6.0.3.1
  • Ruby 2.6.6p146 (2020-03-31 revision 67876) [x86_64-linux]
  • sassc-rails 2.1.2
  • fancybox 3.5.7 (installed as node module. I'm using rails webpacker defaults)

Solution

  • You can now use Dart-Sass Rails instead of Ruby Sass.