SASS deprecation warnings with version 1.77.7 - Mixed declarations #40621
Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
Using the latest version of the sass package (1.77.7) there are deprecation warnings by sass. The previous sass version 1.77.6 worked fine.
Reduced test cases
- Upgrade sass (
npm i sass@latest) - Execute
npm run css-compile
Expected:
npm run css-compile
> [email protected] css-compile
> sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/
Actual:
npm run css-compile
> [email protected] css-compile
> sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> scss/_reboot.scss
503 │ font-weight: $legend-font-weight;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
scss/_reboot.scss 503:3 @import
scss/bootstrap-reboot.scss 10:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> scss/_reboot.scss
504 │ line-height: inherit;
│ ^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
scss/_reboot.scss 504:3 @import
scss/bootstrap-reboot.scss 10:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> scss/_reboot.scss
503 │ font-weight: $legend-font-weight;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
scss/_reboot.scss 503:3 @import
scss/bootstrap.scss 16:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> scss/_reboot.scss
504 │ line-height: inherit;
│ ^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
scss/_reboot.scss 504:3 @import
scss/bootstrap.scss 16:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> scss/_type.scss
38 │ font-family: $display-font-family;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
scss/_type.scss 38:5 @import
scss/bootstrap.scss 17:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> scss/_type.scss
39 │ font-style: $display-font-style;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
scss/_type.scss 39:5 @import
scss/bootstrap.scss 17:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> scss/_type.scss
40 │ font-weight: $display-font-weight;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
scss/_type.scss 40:5 @import
scss/bootstrap.scss 17:9 root stylesheet
Warning: 22 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
No response
What version of Bootstrap are you using?
Latest main branch