[Bug]: Error: "var(--ts-pr-min)" is not a number for `max' on line 104:17 of tom-select.scss

[adas172002]

Bug description

May or may not be same as #561, but still present on bs 5.3.2 + tom-select 2.3.1

Bootstrap installed as twbs-gem on rails 7 with importmaps and sassC-rails gems.

Tom Select installed with tom-selec-rails gem.

Error log:

Error: "var(--ts-pr-min)" is not a number for `max'
        on line 104:17 of ../../../../../.rbenv/versions/2.7.3/lib/ruby/gems/2.7.0/gems/tom-select-rails-2.3.1/vendor/assets/stylesheets/tom-select-rails/scss/tom-select.scss, in function `max`
        from line 104:17 of ../../../../../.rbenv/versions/2.7.3/lib/ruby/gems/2.7.0/gems/tom-select-rails-2.3.1/vendor/assets/stylesheets/tom-select-rails/scss/tom-select.scss
        from line 47:9 of ../../../../../.rbenv/versions/2.7.3/lib/ruby/gems/2.7.0/gems/tom-select-rails-2.3.1/vendor/assets/stylesheets/tom-select-rails/scss/tom-select.bootstrap5.scss
        from line 4:9 of app/assets/stylesheets/application.scss
>> 	padding-right:	max( var(--ts-pr-min), calc( var(--ts-pr-clear-button) + var
   ————————^

Expected behavior

Assets compilation being successful.

Steps to reproduce

rails s 😁

Additional context

• OS: macOS 12.7.1
• Browser Safari
• Version 17.1
• Device: iMac M1

[pvh-archifact]

I can add to this that for calculating vars you need to add an unit type to a value:

:root{
--ts-pr-caret: 0;
}

This wil not work:
calc(--ts-pr-caret + 8px);
calc((--ts-pr-caret)px + 8px);

this will:
--ts-pr-caret: 0px;
calc(--ts-pr-caret + 8px);

[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

[javierartero]

This error happens because the sass compiler confuses the native CSS with sass's max() function.

A valid solution would be to generate your own max function that overrides sass's default max function or consider updating the sass compiler it uses.

In new versions of dart sass to use these custom functions, you must add them as a dependency to avoid this type of errors.

The function just needs to be loaded before loading the tom-select styles.

@function max($value, $value2) {
  @return unquote('max(#{$value}, #{$value2})');
}

A similar fix could be made in the tom-select.scss code to solve this problem.

.#{$select-ns}-control:not(.rtl) {
  padding-right: unquote('max(var(--ts-pr-min), calc(var(--ts-pr-clear-button) + var(--ts-pr-caret)))') !important;
}

.#{$select-ns}-control.rtl {
  padding-left: unquote('max(var(--ts-pr-min), calc(var(--ts-pr-clear-button) + var(--ts-pr-caret)))') !important;
}