bootstrap: 4.4.0 add function compilation is wrong

The bootstrap 4.4 add function doesn’t quite work right with sass compilation.

As an example, paste the following

@function add($value1, $value2, $return-calc: true) {
  @if $value1 == null {
    @return $value2;
  }

  @if $value2 == null {
    @return $value1;
  }

  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
    @return $value1 + $value2;
  }

  @return if($return-calc == true, calc(#{$value1} + #{$value2}), #{$value1} + #{$value2});
}

$line-height-base:            1.5 !default;
$input-btn-padding-y:         .375rem !default;
$border-width:                1px !default;
$test-height: add($line-height-base * 1em, add($input-btn-padding-y * 2, $border-width, false)) !default;

.test-height {
  height: $test-height;
}

into https://www.sassmeister.com/

You’ll notice that the compiled css has some wonkiness:

.test-height {
  height: calc(1.5em + 0.75rem1px);
}

One option is to interpolate the plus sign in the function, like so: @return if($return-calc == true, calc(#{$value1} + #{$value2}), #{$value1 '+' $value2});

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 31
Comments: 16 (11 by maintainers)

Most upvoted comments

@719media I can reproduce that with both sass and node-sass. In my case webpack PostCSS loader (following after sass loader) receives malformed CSS and errors out the build:

ERROR in ./src/styles/global.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
JisonLexerError: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: 1.5em + 0.75rem2px
^...........^

Rolling back to 4.3.1 cancels the issue.

P.S. out of curiosity: what words “Erroneous area” could mean in my case? P.P.S. update: ah, I got it. “Erroneous area” is what is shown between arrows. This rem2 made me think that maybe CSS have recently gotten a way to express surface area somehow.

ivan-aksamentov on Nov 26, 2019

I can release 4.4.1 when ready, just ping me.

Now, even if we did have a dart sass build test, we wouldn’t have noticed this either since compilation didn’t fail.

I think we should add a note in the docs as a warning about the Sass implementation we use, and if people use another one issues might arise.

XhmikosR on Nov 27, 2019