Fix Sass deprecation warnings

[elliotlarson]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

After upgrading Sass recently my build started outputting deprecation warnings:

16:26:25 css.1  | DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
16:26:25 css.1  | rules will be changing to match the behavior specified by CSS in an upcoming
16:26:25 css.1  | version. To keep the existing behavior, move the declaration above the nested
16:26:25 css.1  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
16:26:25 css.1  |
16:26:25 css.1  | More info: https://sass-lang.com/d/mixed-decls
16:26:25 css.1  |
16:26:25 css.1  |     ┌──> node_modules/bootstrap/scss/_reboot.scss
16:26:25 css.1  | 503 │     font-weight: $legend-font-weight;
16:26:25 css.1  |     │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
16:26:25 css.1  |     ╵
16:26:25 css.1  |     ┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
16:26:25 css.1  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
16:26:25 css.1  | 137 │ │       @content;
16:26:25 css.1  | 138 │ │     }
16:26:25 css.1  |     │ └─── nested rule
16:26:25 css.1  |     ╵
16:26:25 css.1  |     bootstrap/scss/_reboot.scss 503:3                  @import
16:26:25 css.1  |     app/assets/stylesheets/shared/_bootstrap.scss 9:9  @import
16:26:25 css.1  |     app/assets/stylesheets/application.scss 8:9        root stylesheet
16:26:25 css.1  |
16:26:25 css.1  | DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
16:26:25 css.1  | rules will be changing to match the behavior specified by CSS in an upcoming
16:26:25 css.1  | version. To keep the existing behavior, move the declaration above the nested
16:26:25 css.1  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
16:26:25 css.1  |
16:26:25 css.1  | More info: https://sass-lang.com/d/mixed-decls
16:26:25 css.1  |
16:26:25 css.1  |     ┌──> node_modules/bootstrap/scss/_reboot.scss
16:26:25 css.1  | 504 │     line-height: inherit;
16:26:25 css.1  |     │     ^^^^^^^^^^^^^^^^^^^^ declaration
16:26:25 css.1  |     ╵
16:26:25 css.1  |     ┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
16:26:25 css.1  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
16:26:25 css.1  | 137 │ │       @content;
16:26:25 css.1  | 138 │ │     }
16:26:25 css.1  |     │ └─── nested rule
16:26:25 css.1  |     ╵
16:26:25 css.1  |     bootstrap/scss/_reboot.scss 504:3                  @import
16:26:25 css.1  |     app/assets/stylesheets/shared/_bootstrap.scss 9:9  @import
16:26:25 css.1  |     app/assets/stylesheets/application.scss 8:9        root stylesheet
16:26:25 css.1  |
16:26:25 css.1  | DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
16:26:25 css.1  | rules will be changing to match the behavior specified by CSS in an upcoming
16:26:25 css.1  | version. To keep the existing behavior, move the declaration above the nested
16:26:25 css.1  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
16:26:25 css.1  |
16:26:25 css.1  | More info: https://sass-lang.com/d/mixed-decls
16:26:25 css.1  |
16:26:25 css.1  |     ┌──> node_modules/bootstrap/scss/_type.scss
16:26:25 css.1  | 38  │       font-family: $display-font-family;
16:26:25 css.1  |     │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
16:26:25 css.1  |     ╵
16:26:25 css.1  |     ┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
16:26:25 css.1  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
16:26:25 css.1  | 137 │ │       @content;
16:26:25 css.1  | 138 │ │     }
16:26:25 css.1  |     │ └─── nested rule
16:26:25 css.1  |     ╵
16:26:25 css.1  |     bootstrap/scss/_type.scss 38:5                      @import
16:26:25 css.1  |     app/assets/stylesheets/shared/_bootstrap.scss 10:9  @import
16:26:25 css.1  |     app/assets/stylesheets/application.scss 8:9         root stylesheet
16:26:25 css.1  |
16:26:25 css.1  | DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
16:26:25 css.1  | rules will be changing to match the behavior specified by CSS in an upcoming
16:26:25 css.1  | version. To keep the existing behavior, move the declaration above the nested
16:26:25 css.1  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
16:26:25 css.1  |
16:26:25 css.1  | More info: https://sass-lang.com/d/mixed-decls
16:26:25 css.1  |
16:26:25 css.1  |     ┌──> node_modules/bootstrap/scss/_type.scss
16:26:25 css.1  | 39  │       font-style: $display-font-style;
16:26:25 css.1  |     │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
16:26:25 css.1  |     ╵
16:26:25 css.1  |     ┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
16:26:25 css.1  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
16:26:25 css.1  | 137 │ │       @content;
16:26:25 css.1  | 138 │ │     }
16:26:25 css.1  |     │ └─── nested rule
16:26:25 css.1  |     ╵
16:26:25 css.1  |     bootstrap/scss/_type.scss 39:5                      @import
16:26:25 css.1  |     app/assets/stylesheets/shared/_bootstrap.scss 10:9  @import
16:26:25 css.1  |     app/assets/stylesheets/application.scss 8:9         root stylesheet
16:26:25 css.1  |
16:26:25 css.1  | DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
16:26:25 css.1  | rules will be changing to match the behavior specified by CSS in an upcoming
16:26:25 css.1  | version. To keep the existing behavior, move the declaration above the nested
16:26:25 css.1  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
16:26:25 css.1  |
16:26:25 css.1  | More info: https://sass-lang.com/d/mixed-decls
16:26:25 css.1  |
16:26:25 css.1  |     ┌──> node_modules/bootstrap/scss/_type.scss
16:26:25 css.1  | 40  │       font-weight: $display-font-weight;
16:26:25 css.1  |     │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
16:26:25 css.1  |     ╵
16:26:25 css.1  |     ┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
16:26:25 css.1  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
16:26:25 css.1  | 137 │ │       @content;
16:26:25 css.1  | 138 │ │     }
16:26:25 css.1  |     │ └─── nested rule
16:26:25 css.1  |     ╵
16:26:25 css.1  |     bootstrap/scss/_type.scss 40:5                      @import
16:26:25 css.1  |     app/assets/stylesheets/shared/_bootstrap.scss 10:9  @import
16:26:25 css.1  |     app/assets/stylesheets/application.scss 8:9         root stylesheet
16:26:25 css.1  |
16:26:26 css.1  | WARNING: 23 repetitive deprecation warnings omitted.

Motivation and context

It would be nice to fix the deprecations.

[louismaximepiton]

Duplicate of #40621. A patch has already been merged and will be in the next release, in the mean time, you can have some more information in the linked issue.

[elliotlarson]

Thank you!