Fix use of declarations after nested rules (deprecated in Sass 1.77.7)

[julien-deramond]

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

---

Description

When using [email protected], 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 [email protected] 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

[simPod]

🚢

[XhmikosR]

@julien-deramond I'll wait until tomorrow for Dependabot. Then this PR should only include the fix.

[apepper]

@julien-deramond Thank you for fixing the deprecation issue of sass!

Is there any ETA when bootstrap version 5.3.4 will be released (which would contain this fix)?

[julien-deramond]

Unfortunately, we don't have a precise release date to communicate, as it'll depend on our availability. But it should be in a few days, hopefully 🙏

[jamesleesaunders]

Unfortunately, we don't have a precise release date to communicate, as it'll depend on our availability. But it should be in a few days, hopefully 🙏

Is there any more news on 5.3.4 ?

[jamesleesaunders]

Unfortunately, we don't have a precise release date to communicate, as it'll depend on our availability. But it should be in a few days, hopefully 🙏

Is there any more news on 5.3.4 ?

Nobody needs it, nobody is in a hurry

To say 'nobody needs it' is a not strictly true? There are a number of people watching this PR and also a number of issues raised for this:

• Fix Sass deprecation warnings #40746
• Sass 1.77.8 produces warning messages #40651
• Deprecation notices with latest Dart Sass 1.77.7 #40622
• SASS deprecation warnings with version 1.77.7 - Mixed declarations #40621
• Numerous sass deprecation warnings #40761
• Deprecation warning- SASS declaration ordering bootstrap-vue-next/bootstrap-vue-next#2161
• Deprecation warning regarding the order of mixed nested declaration rfs#474

This does only affect people building bootstrap Sass and I appreciate this is small fry in the grand scheme of things but it would be useful to know if/when Bootstrap v5.3.4 will be released as there does not appear to have been a release since Feb-24.

[petschki]

We would appreciate a release with this fix very much.

[jamesleesaunders]

Any news on when Release 5.3.4 will be released?

[apepper]

@julien-deramond Any updates on the release of 5.3.4 which would include this bugfix? At least I (and probably many others) are waiting for it to finally upgrade to the latest sass version.

[julien-deramond]

Unfortunately, I don't know. I'm not the release manager. Waiting for it too :)

[apepper]

Who is the release manager then?

[julien-deramond]

You can check #40656