Update breakpoint Sass mixins to use range media query syntax

Co-authored-by: mdo <98681+mdo@users.noreply.github.com>

Author: Copilot

scss/mixins/_breakpoints.scss

@@ -17,7 +17,7 @@
 @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
   $n: index($breakpoint-names, $name);
   @if not $n {
-    @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+    @error "breakpoint `#{$name}` not found in `#{$breakpoint-names}`";
   }
   @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
 }
@@ -31,18 +31,19 @@
   @return if($min != 0, $min, null);
 }
 
-// Maximum breakpoint width.
-// The maximum value is reduced by 0.02px to work around the limitations of
-// `min-` and `max-` prefixes and viewports with fractional widths.
-// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
-// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
-// See https://bugs.webkit.org/show_bug.cgi?id=178261
+// Maximum breakpoint width for range media queries.
+// Returns the breakpoint value to use as an upper bound in range queries.
 //
-//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
-//    767.98px
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
+//    576px
+//    >> breakpoint-max(xxl, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
+//    null
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  @if $name == null {
+    @return null;
+  }
   $max: map-get($breakpoints, $name);
-  @return if($max and $max > 0, $max - .02, null);
+  @return if($max and $max > 0, $max, null);
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@@ -61,7 +62,7 @@
 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
   @if $min {
-    @media (min-width: $min) {
+    @media (width >= $min) {
       @content;
     }
   } @else {
@@ -74,7 +75,7 @@
 @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
   $max: breakpoint-max($name, $breakpoints);
   @if $max {
-    @media (max-width: $max) {
+    @media (width < $max) {
       @content;
     }
   } @else {
@@ -89,7 +90,7 @@
   $max: breakpoint-max($upper, $breakpoints);
 
   @if $min != null and $max != null {
-    @media (min-width: $min) and (max-width: $max) {
+    @media (width >= $min) and (width < $max) {
       @content;
     }
   } @else if $max == null {
@@ -112,7 +113,7 @@
   $max:  breakpoint-max($next, $breakpoints);
 
   @if $min != null and $max != null {
-    @media (min-width: $min) and (max-width: $max) {
+    @media (width >= $min) and (width < $max) {
       @content;
     }
   } @else if $max == null {

scss/tests/mixins/_breakpoints.test.scss

@@ -0,0 +1,95 @@
+@import 'true';
+@import '../../mixins/breakpoints';
+
+// Test breakpoint functions and mixins for range media query syntax
+
+@include test-module('Breakpoint Functions') {
+  $test-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px
+  );
+
+  @include test('breakpoint-max with range syntax') {
+    @include assert-equal(breakpoint-max(xs, $test-breakpoints), null);
+    @include assert-equal(breakpoint-max(sm, $test-breakpoints), 576px);
+    @include assert-equal(breakpoint-max(md, $test-breakpoints), 768px);
+    @include assert-equal(breakpoint-max(lg, $test-breakpoints), 992px);
+    @include assert-equal(breakpoint-max(xl, $test-breakpoints), 1200px);
+    @include assert-equal(breakpoint-max(xxl, $test-breakpoints), 1400px);
+  }
+}
+
+@include test-module('Media Query Mixins - Range Syntax') {
+  $test-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px
+  );
+
+  @include test('media-breakpoint-up generates range syntax') {
+    @include assert {
+      @include output {
+        @include media-breakpoint-up(sm, $test-breakpoints) {
+          .test { color: red; }
+        }
+      }
+      @include expect {
+        @media (width >= 576px) {
+          .test { color: red; }
+        }
+      }
+    }
+  }
+
+  @include test('media-breakpoint-down generates range syntax') {
+    @include assert {
+      @include output {
+        @include media-breakpoint-down(md, $test-breakpoints) {
+          .test { color: blue; }
+        }
+      }
+      @include expect {
+        @media (width < 768px) {
+          .test { color: blue; }
+        }
+      }
+    }
+  }
+
+  @include test('media-breakpoint-between generates range syntax') {
+    @include assert {
+      @include output {
+        @include media-breakpoint-between(sm, lg, $test-breakpoints) {
+          .test { color: green; }
+        }
+      }
+      @include expect {
+        @media (width >= 576px) and (width < 992px) {
+          .test { color: green; }
+        }
+      }
+    }
+  }
+
+  @include test('media-breakpoint-only generates range syntax') {
+    @include assert {
+      @include output {
+        @include media-breakpoint-only(md, $test-breakpoints) {
+          .test { color: yellow; }
+        }
+      }
+      @include expect {
+        @media (width >= 768px) and (width < 992px) {
+          .test { color: yellow; }
+        }
+      }
+    }
+  }
+}

scss/tests/utilities/_api.test.scss

@@ -51,13 +51,13 @@ $utilities: ();
           font-size: 1.25rem !important;
         }
 
-        @media (min-width: 333px) {
+        @media (width >= 333px) {
           .padding-sm-1rem {
             padding: 1rem !important;
           }
         }
 
-        @media (min-width: 666px) {
+        @media (width >= 666px) {
           .padding-md-1rem {
             padding: 1rem !important;
           }

site/src/content/callouts/info-mediaqueries-breakpoints.md

@@ -1 +1 @@
-**Why subtract .02px?** Browsers don’t currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), so we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
+**Using range context queries:** Bootstrap now uses [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context) for improved precision and modern CSS media query syntax. The range syntax like `(width >= 768px)` eliminates the need for fractional pixel adjustments that were previously required with `min-` and `max-` prefixes.

site/src/content/docs/layout/breakpoints.mdx

@@ -75,19 +75,19 @@ These Sass mixins translate in our compiled CSS using the values declared in our
 // No media query for `xs` since this is the default in Bootstrap
 
 // Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) { ... }
+@media (width >= 576px) { ... }
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) { ... }
+@media (width >= 768px) { ... }
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) { ... }
+@media (width >= 992px) { ... }
 
 // X-Large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) { ... }
+@media (width >= 1200px) { ... }
 
 // XX-Large devices (larger desktops, 1400px and up)
-@media (min-width: 1400px) { ... }
+@media (width >= 1400px) { ... }
 ```
 
 ### Max-width
@@ -110,26 +110,26 @@ We occasionally use media queries that go in the other direction (the given scre
 }
 ```
 
-These mixins take those declared breakpoints, subtract `.02px` from them, and use them as our `max-width` values. For example:
+These mixins use the breakpoint values to create `max-width` media queries using modern range syntax. For example:
 
 ```scss
 // `xs` returns only a ruleset and no media query
 // ... { ... }
 
 // `sm` applies to x-small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) { ... }
+@media (width < 576px) { ... }
 
 // `md` applies to small devices (landscape phones, less than 768px)
-@media (max-width: 767.98px) { ... }
+@media (width < 768px) { ... }
 
 // `lg` applies to medium devices (tablets, less than 992px)
-@media (max-width: 991.98px) { ... }
+@media (width < 992px) { ... }
 
 // `xl` applies to large devices (desktops, less than 1200px)
-@media (max-width: 1199.98px) { ... }
+@media (width < 1200px) { ... }
 
 // `xxl` applies to x-large devices (large desktops, less than 1400px)
-@media (max-width: 1399.98px) { ... }
+@media (width < 1400px) { ... }
 ```
 
 <Callout name="info-mediaqueries-breakpoints" type="warning" />
@@ -150,7 +150,7 @@ There are also media queries and mixins for targeting a single segment of screen
 For example the `@include media-breakpoint-only(md) { ... }` will result in :
 
 ```scss
-@media (min-width: 768px) and (max-width: 991.98px) { ... }
+@media (width >= 768px) and (width < 992px) { ... }
 ```
 
 ### Between breakpoints
@@ -166,5 +166,5 @@ Which results in:
 ```scss
 // Example
 // Apply styles starting from medium devices and up to extra large devices
-@media (min-width: 768px) and (max-width: 1199.98px) { ... }
+@media (width >= 768px) and (width < 1200px) { ... }
 ```