4.4.0 add function compilation is wrong

[719media]

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});

[ivan-aksamentov]

@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.

[brianroadifer]

I noticed this as well when using the custom-select. Looks like it would affect the subtract function as well. Oddly enough the main Bootstrap website has it working.

[mdo]

/cc @twbs/css-review

[nicolomonili]

Same here,

• macOS
• Dart Sass 1.23.7
• bootstrap 4.4

When compile from sources, the generated css for .form-control, .form-control-sm.... classes is wrong

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem2px); <---
   ....
}

[MartijnCuppens]

I can reproduce this with Dart Sass, by running

sass scss/bootstrap.scss dist/css/bootstrap-sass.css

@twbs/team, we probably need to release a patch for this this week

Gonna look into this this evening.

[XhmikosR]

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.

[ysds]

@twbs/css-review I checked this. #29743 (comment)) is a solution but it doesn't work on ruby-sass - https://www.sassmeister.com/gist/b8f21c26b379106438151b01ffd629ca

Can we ignore the ruby-sass ? because it is already unsupported.

If we concern this, #{$value1} #{'+'} #{$value2} can be used alternative
https://www.sassmeister.com/gist/e4e0a9a44be5abd14b078a254a4d5079.

[XhmikosR]

I think we should keep Ruby Sass support for v4. For v5, and assuming we make it clear in our docs with a huge warning that we only use one Sass implementation and add more info, we can drop support for Ruby Sass.

[ysds]

Sorry,

#29743 (comment)) is a solution but it doesn't work on ruby-sass

is wrong. That support all compiler (dart-dass, libsass and Sass ). I misunderstood the code:
#{$value1} '+' #{$value2}.

[ysds]

OMG! Same issue in the subtract!

dart-sass:

el {
  padding: subtract(1rem, subtract(1em, 1px, false)); // output invalid calc(1rem - 1em-1px);
}

[XhmikosR]

I thought you guys tested it...

Please ping me when there's the final and real fix in a PR because I will need to redo the whole thing.
At least I didn't proceed with releasing 4.4.1 yet :P

[MartijnCuppens]

Damn it, I thought that would work without spaces. Nice catch, @ysds.

[ysds]

I should have confirmed it, but I overlooked something...

[XhmikosR]

All good, let's just make sure everything is fine with all Sass implementations this time and ping me in the PR :)

[Okipa]

Hi guys, sorry to come back to this but it seems there's a regression somewhere.

I'm using Bootstrap with Laravel and its Laravel Mix SASS compiler and the following error is triggered, only when I'm loading the scss/_modal.scss file:

JisonLexerError: Lexical error on line 1: Unrecognized text.
  Erroneous area:
1: 0 - none

Could the subtract method use trigger this ?

[Okipa]

Ok, sorry for the noise, that was a mistake from my behalf => I did set the $modal-content-border-width to none instead of 0. That was causing the error.