/ deprecation in Dart Sass, fix a few CSS bugs, and make some documentation improvements.
One of the biggest fixes in Bootstrap v5.0.2 patches the deprecation of
/ for performing division in Sass. The Dart Sass team deprecated it due to the use of
/ characters in actual CSS (e.g., separating
background values). The bad news was this shipped with deprecation notices, which in our case heavily polluted the build process for everyone. Our potential solutions included:
- Ignore it entirely and silence the deprecation warnings
- Drop implicit support for LibSass and use the Dart Sass math module
- Figure out a custom fix to keep the widest possible Sass support
We chose the third option—keeping support for both LibSass and Dart Sass, even though the former is deprecated. There are many projects out there that simply haven’t or cannot update to Dart Sass (including Hugo, which we use to build our docs).
Our solution meant rolling a custom
divide() function and replacing division with multiplication wherever possible. We wanted to limit the use of a custom function, so the situations where we used
$value / 2 were replaced with
$value * .5. This custom function has also been added to the RFS project in a new release. While the precision in our compiled CSS has been reduced by two decimal places, the output remains otherwise unchanged.
If you have any ideas or suggestions on further improvements, please don’t hesitate to open an issue.
Here are some highlights from the changelog.
- Fixed deprecation warnings in Sass for
/division. Replaced most
/division with multiplication and added a custom
divide()function to avoid adding Dart Sass modules (as this would negate the usage of LibSass).
.col-*grid classes can now override
line-heightfor floating forms to fix cut-off select menu text.
- Added missing transition to
.dropdowns-menu-*position in RTL.
--bs-table-accent-bgto separate table accent highlights.
- Improved support for complex expressions in
- Fixed horizontal padding for select elements in Firefox.
- Updated border color for popover header to match the outer border.
- Fixed offcanvas header alignment for RTL.
- Popovers now remove titles or content when they’re empty instead of returning empty HTML elements.
- Dropdown items are now automatically selected when using arrow keys.
- We now register only one
DOMContentLoadedevent listener in
- Fixed arrow keys breaking animation when the carousel sliding.
- Fixed handling of transitioned events dispatched by nested elements (e.g., modals didn’t transition when clicking buttons).
- Fixed backdrop errors with stale body cause by unnecessary default and
- Fixed issue where the
show.bs.modalevent with the
.fadeclass prevented modals from being displayed again.
getOrCreateInstancemethod in our base component that is applied to all components.
- Documented how to make utilities responsive using the API. Also added
!importantto the sample output CSS and mentioned the
- Added a mention of the breakpoint mixins changes from v4 to the migration guide.
- Added a new example of positioned badges to the docs.
- Clarified variable overrides in the Customizing > Sass page.
- Replaced Freenode with Libera IRC server.
Get the release
Head to https://getbootstrap.com for the latest. It’s also been pushed to npm:
npm i bootstrap
Review the v5.0.2 release changelog for a complete list of changes.