Bump Sass from 1.77.6 to 1.77.7

[julien-deramond]

(Edit: After the creation of this PR, sass@1.77.8 has been released, but it doesn't change anything to this PR that still can be merged as is.)

---

Description

When using sass@1.77.7, we have some warnings when running npm run css. More info at Sass: Breaking Change: Mixed Declarations.

If we simply move some calls to mixins in our code, the warnings are not displayed anymore. The related files are:

• scss/_modal.scss
• scss/_reboot.scss
• scss/_type.scss

A simple way to measure the possible impact is to compare the built bootstrap.css from the main branch, and this branch:

--- dist/css/bootstrap.css	2024-07-10 18:33:12
+++ /tmp/bootstrap.main.css	2024-07-10 18:32:55
@@ -515,12 +515,12 @@
 legend {
   float: left;
   width: 100%;
   padding: 0;
   margin-bottom: 0.5rem;
-  line-height: inherit;
   font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
 }
 @media (min-width: 1200px) {
   legend {
     font-size: 1.5rem;
   }
\ No newline at end of file
@@ -599,68 +599,68 @@
   font-size: 1.25rem;
   font-weight: 300;
 }
 
 .display-1 {
+  font-size: calc(1.625rem + 4.5vw);
   font-weight: 300;
   line-height: 1.2;
-  font-size: calc(1.625rem + 4.5vw);
 }
 @media (min-width: 1200px) {
   .display-1 {
     font-size: 5rem;
   }
 }
 
 .display-2 {
+  font-size: calc(1.575rem + 3.9vw);
   font-weight: 300;
   line-height: 1.2;
-  font-size: calc(1.575rem + 3.9vw);
 }
 @media (min-width: 1200px) {
   .display-2 {
     font-size: 4.5rem;
   }
 }
 
 .display-3 {
+  font-size: calc(1.525rem + 3.3vw);
   font-weight: 300;
   line-height: 1.2;
-  font-size: calc(1.525rem + 3.3vw);
 }
 @media (min-width: 1200px) {
   .display-3 {
     font-size: 4rem;
   }
 }
 
 .display-4 {
+  font-size: calc(1.475rem + 2.7vw);
   font-weight: 300;
   line-height: 1.2;
-  font-size: calc(1.475rem + 2.7vw);
 }
 @media (min-width: 1200px) {
   .display-4 {
     font-size: 3.5rem;
   }
 }
 
 .display-5 {
+  font-size: calc(1.425rem + 2.1vw);
   font-weight: 300;
   line-height: 1.2;
-  font-size: calc(1.425rem + 2.1vw);
 }
 @media (min-width: 1200px) {
   .display-5 {
     font-size: 3rem;
   }
 }
 
 .display-6 {
+  font-size: calc(1.375rem + 1.5vw);
   font-weight: 300;
   line-height: 1.2;
-  font-size: calc(1.375rem + 1.5vw);
 }
 @media (min-width: 1200px) {
   .display-6 {
     font-size: 2.5rem;
   }
\ No newline at end of file
@@ -5504,12 +5504,12 @@
   width: auto;
   margin: var(--bs-modal-margin);
   pointer-events: none;
 }
 .modal.fade .modal-dialog {
-  transform: translate(0, -50px);
   transition: transform 0.3s ease-out;
+  transform: translate(0, -50px);
 }
 @media (prefers-reduced-motion: reduce) {
   .modal.fade .modal-dialog {
     transition: none;
   }
\ No newline at end of file

As it can be seen here, there's no impact as the mixins don't apply values to some siblings CSS rules for the same selector, so the order here is not important and will produce the same CSS bundle in the end.

Target release

This change is retro-compatible as it works with sass@1.77.6 too. However, if we want to help folks, we might envisage to merge this PR, and then maybe release a v5.3.4 rather quickly? What do you think @twbs/css-review?

Type of changes

• Bug fix (non-breaking change which fixes an issue)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• (N/A) My change introduces changes to the documentation
• (N/A) I have updated the documentation accordingly
• (N/A) I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-40623--twbs-bootstrap.netlify.app/docs/5.3/content/typography/#display-headings
• https://deploy-preview-40623--twbs-bootstrap.netlify.app/docs/5.3/components/modal/#live-demo
• https://deploy-preview-40623--twbs-bootstrap.netlify.app/docs/5.3/forms/layout/#horizontal-form

Related issues

Closes #40621

[ffoodd]

LGTM 👌

[francoisdelage]

+1