Compatibility Issue with Bootstrap 5.3.2 and Tabler 1.0.0-beta20

[raj-oeeai]

I've got an Compatibility Issue in my Ember 4.4 project with Bootstrap 5.3.2 and Tabler 1.0.0-beta20.
When attempting to build an Ember project with Bootstrap 5.3.2 and Tabler Beta 20, a syntax error is encountered during the build process. The error specifically points to a conflict in units within the node_modules/bootstrap/scss/vendor/_rfs.scss file, as illustrated below:

0.75em and 100% have incompatible units.
   ╷
70 │     @while ($remainder >= $divisor) {
   │             ^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/bootstrap/scss/vendor/_rfs.scss 70:13                                  divide()
  node_modules/@tabler/core/src/scss/ui/_badges.scss 8:41                             @import
  node_modules/@tabler/core/src/scss/_core.scss 17:9                                  @import
  node_modules/@tabler/core/src/scss/tabler.scss 1:9                                  @import
  ../tmp/broccoli-14iMsHkIbk0vO/out-478-funnel_funnel_styles/app/styles/app.scss 3:9  root stylesheet
        at SassCompiler

Package Versions:
"@tabler/core": "1.0.0-beta20",
"bootstrap": "5.3.2",

Does someone have a solution idea?

[julien-deramond]

Hey @raj-oeeai

IDK the source code of Tabler. I can see in your logs that there's an issue while calling the divide() function in node_modules/bootstrap/scss/vendor/_rfs.scss. In Bootstrap, that means that the 2 parameters have incompatible units.

For example, in Bootstrap, if you do $test: divide(.75em, 100%); you'd have the same error.

In Tabler (https://github.com/tabler/tabler/blob/682eaa88a8c4df1b3a503d8f4090a425a418d6aa/src/scss/ui/_badges.scss#L8), there is: min-width: ($badge-padding-y * 2 ) + (divide($badge-font-size, 100%) * 1em);

So I'd say that probably $badge-font-size is set to .75em within the library or if you override it in your project. And that causes the issue.

Again I'm not familiar with Tabler code so the issue could come from anything else :)

Do you know for example if this is a recent modification on their side, or if it worked with a previous version of Bootstrap?

[raj-oeeai]

Hi @julien-deramond,

Initially, I had a smooth experience using Bootstrap "4.4.1" and Tabler-UI "0.0.34", but with their deprecation, I decided to update.
By implementing a workaround by adjusting the variables with compatible units, the issue is 'fixed' for me.

Hopefully, it might be helpful to others facing a similar situation.
(tabler/tabler#1819 (comment)).