ActionView::Template::Error: Error: "var(--ts-pr-caret)" is not a number for `max'

[atstockland]

After installing via "yarn add tom-select", I'm getting the following error locally and while attempting to push to Heroku. In reviewing the scss files under node_modules, it appears variables in tom-select.scss file are not connecting.

ActionView::Template::Error: Error: "var(--ts-pr-caret)" is not a number for `max'

Line 102 in tom-select.scss file is:
padding-right: Max( var(--ts-pr-min), calc( var(--ts-pr-clear-button) + var(--ts-pr-caret)) ) !important;

Above that on lines 80 through 84, are where the vars are defined. I've been unsuccessful in finding a reason for this...

[atstockland]

As I'm continuing to troubleshoot this, I removed tom-select and re-added it. Now, I'm seeing a new error:
Error: Can't find stylesheet to import. 171 @import 'items'.

I can verify _items.scss is in tom-select/src/scss/_items.scss

[atstockland]

Pushing to Heroku results in

remote:        DEPRECATION WARNING: $weight: Passing a number without unit % (0.8) is deprecated.
remote:
remote:        To preserve current behavior: $weight * 1%
remote:
remote:        More info: https://sass-lang.com/d/function-units
remote:
remote:           ╷
remote:        31 │ $select-color-dropdown-border-top: mix($input-border-color, $input-bg, 0.8) !default;
remote:           │                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
remote:           ╵
remote:            tom-select/dist/scss/tom-select.bootstrap5.scss 31:36  @import
remote:            app/assets/stylesheets/application.bootstrap.scss 9:9  root stylesheet
remote:
remote:        Done in 2.28s.
remote:        rake aborted!
remote:        SassC::SyntaxError: Error: "var(--ts-pr-min)" is not a number for `max'
remote:                on line 10852:18 of stdin, in function `max`
remote:                from line 10852:18 of stdin
remote:        >>   padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-
remote:           -----------------^
remote:        stdin:10852

[archonic]

I'm hitting a similar issue but for this line:
https://github.com/orchidjs/tom-select/blob/master/src/scss/tom-select.scss#L102

The error looks like this:

SassC::SyntaxError: Error: "var(--ts-pr-min)" is not a number for `max'
        on line 11059:18 of stdin, in function `max`
        from line 11059:18 of stdin
>>   padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-
   -----------------^
stdin:11059

I suspect there's a package that's not a stated dependency which allows calling max on numbers with units.

Update:
As it says right in the error message this is because I was using SassC instead of Sass. SassC was a dependency of a gem, so that was injecting itself into my asset pipeline. Running yarn build:css was fine, but rails assets:precompile would expose the incompatibility.

[martinbarilik]

Error occurs also when using older versions of bootstrap ( for examle 5.2.3 ), to avoid the error in production, you need to upgrade to the latest version

works fine with bootstrap@^5.3.2

[wrburgess]

@martinbarilik I'm using bootstrap@5.3.2 and attempting to use tom-select@2.3.1 but still getting this error. How is this working for you?

[martinbarilik]

I was forced to upgrade to bootstrap@5.3.2 in order to work it together.

[wrburgess]

I still get this error with Heroku and tom-select 2.3.1 and bootstrap 5.3.2:

         app/assets/builds/application.js      1.6mb ⚠️
         app/assets/builds/application.js.map  2.9mb
       
       ⚡ Done in 310ms
       rake aborted!
       SassC::SyntaxError: Error: "var(--ts-pr-caret)" is not a number for `max' (SassC::SyntaxError)
               on line 24718:10 of stdin, in function `max`
               from line 24718:10 of stdin
       >>   right: max(var(--ts-pr-caret), 0.75rem);
       
          ---------^
       stdin:24718
       /tmp/build_d22bb9db/vendor/bundle/ruby/3.2.0/gems/sassc-2.4.0/lib/sassc/engine.rb:50:in `render'

[martinbarilik]

weird, it should not be the case. Have you tried to upgrade sassc module ?

[wrburgess]

I'm using sassc-rails 2.1.2

[wrburgess]

Got it to finally work by switching to gem "dartsass-sprockets", "3.0.0"

[martinbarilik]

Happy you got it by yourself. That is exactly what had to be done ;)

[github-actions]

This issue has not been active in 120 days and has been marked "stale". Remove stale label or comment or this will be closed in 15 days