castellinosoftware commented 3 years ago

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 https://github.com/twbs/bootstrap/issues/34051#issuecomment-868634798

mdo commented 3 years ago

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

castellinosoftware commented 3 years ago

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

slavede commented 3 years ago

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 commented 3 years ago

So I did this in my forked v4-dev and opened PR here https://github.com/twbs/bootstrap/pull/34386

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

tu4mo commented 3 years ago

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

slavede commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

XhmikosR commented 3 years ago

34571 was merged, it will be in the next 4.x version.

altso commented 2 years ago

@XhmikosR do you have an ETA for 4.6.1 release to npm?

twbs / bootstrap

Sass / deprecation for branch 4 #34353

34571 was merged, it will be in the next 4.x version.