2

I just installed fancyapp/fancybox@3.5.7 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)
ydaniju
  • 400
  • 4
  • 11
  • Simply do not parse CSS files with Sass preprocessor – Janis May 20 '20 at 06:15
  • I'm not sure how to avoid that in a big project where css files are required/imported in sass files and vice versa. @Janis – ydaniju May 20 '20 at 06:22
  • 1
    And that is the cause of the problem. btw, interesting fact is that Dart Sass has simple workaround for this issue while LibSass and Ruby Sass (currently) does not - https://sass-lang.com/documentation/syntax/special-functions#min-and-max – Janis May 20 '20 at 06:38
  • So anybody knows how to fix this issue? – Alex Feb 22 '22 at 09:31

1 Answers1

0

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

ydaniju
  • 400
  • 4
  • 11