Sass / deprecation for branch 4

[castellinosoftware]

Sass / deprecation was fixed in branch 5.
Is the the deprecation expected to be resolved in branch 4 as well?

I know this means switching from libsass to dart, but there are projects that directly import bootstrap4 scss sources

Originally posted by @castellinosoftware in #34051 (comment)

[mdo]

We don't have to switch to Dart Sass for v4—we made the changes in v5 without requiring Dart Sass.

[castellinosoftware]

Sorry, my bad.
I thought this due to libsass deprecation.
So , there is a work in progress on branch 4 for this issue?

[slavede]

Yeah, it would be very nice to fix deprecation warnings for branch 4 as well...

I found these issues:

Recommendation: math.div($spacer, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
302 │ $headings-margin-bottom:      $spacer / 2 !default;
    │                               ^^^^^^^^^^^
    ╵
    node_modules\bootstrap-scss\_variables.scss 302:31    @import
    node_modules\bootstrap-scss\bootstrap.scss 9:9        @import
    src\app\mnc\components\root\app.component.scss 25:13  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($input-padding-y, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
498 │ $input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y / 2) !default;
    │                                                                         ^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules\bootstrap-scss\_variables.scss 498:73    @import
    node_modules\bootstrap-scss\bootstrap.scss 9:9        @import
    src\app\mnc\components\root\app.component.scss 25:13  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($custom-control-indicator-size, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
568 │ $custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
    │                                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules\bootstrap-scss\_variables.scss 568:49    @import
    node_modules\bootstrap-scss\bootstrap.scss 9:9        @import
    src\app\mnc\components\root\app.component.scss 25:13  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
713 │ $nav-divider-margin-y:              $spacer / 2 !default;
    │                                     ^^^^^^^^^^^
    ╵
    node_modules\bootstrap-scss\_variables.scss 713:37    @import
    node_modules\bootstrap-scss\bootstrap.scss 9:9        @import
    src\app\mnc\components\root\app.component.scss 25:13  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
718 │ $navbar-padding-y:                  $spacer / 2 !default;
    │                                     ^^^^^^^^^^^
    ╵
    node_modules\bootstrap-scss\_variables.scss 718:37    @import
    node_modules\bootstrap-scss\bootstrap.scss 9:9        @import
    src\app\mnc\components\root\app.component.scss 25:13  root stylesheet

Easy fix for mine .scss files was running:

npm install -g sass-migrator
sass-migrator division */.scss

which converted $val/2 with $val * 0.5

Could this be done on v4?

Thanks

[slavede]

So I did this in my forked v4-dev and opened PR here #34386

It fails for some reason, can someone assist on it?

[tu4mo]

You can't use sass:math with LibSass. You probably could copy the divide-function which was added to v5.

[slavede]

Ok, I've replaced it, but PR still fails....not sure about the check that causes that....are there some tests I should look into?

[tu4mo]

There's still a couple of sass:math and one sass:list there. You can click the deploy/netlify workflow's details to see where the error happens.

[slavede]

Yeah, thanks for the tip! Fixed that....