Add RFS to utility API (#30050)

4 files changed, 40 insertions, 5 deletions

diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index ed72265a4..ff7905c90 100644
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -23,6 +23,8 @@ html {
 @import "mixins/grid";
 @import "mixins/utilities";
 
+@import "vendor/rfs";
+
 @import "containers";
 @import "grid";
 
diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index 0d7fc61f0..cd9f93056 100644
--- a/scss/mixins/_utilities.scss
+++ b/scss/mixins/_utilities.scss
@@ -1,6 +1,6 @@
 // Utility generator
 // Used to generate utilities & print utilities
-@mixin generate-utility($utility, $infix) {
+@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
   $values: map-get($utility, values);
 
   // If the values are a list or string, convert it into a map
@@ -25,10 +25,24 @@
     // Don't prefix if value key is null (eg. with shadow class)
     $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
 
-    .#{$property-class + $infix + $property-class-modifier} {
-      @each $property in $properties {
-        // stylelint-disable-next-line declaration-no-important
-        #{$property}: $value if($enable-important-utilities, !important, null);
+    @if map-get($utility, rfs) {
+      // Inside the media query
+      @if $is-rfs-media-query {
+        $val: rfs-value($value);
+
+        // Do not render anything if fluid and non fluid values are the same
+        $value: if($val == rfs-fluid-value($value), null, $val);
+      }
+      @else {
+        $value: rfs-fluid-value($value);
+      }
+    }
+
+    @if $value != null {
+      .#{$property-class + $infix + $property-class-modifier} {
+        @each $property in $properties {
+          #{$property}: $value if($enable-important-utilities, !important, null);
+        }
       }
     }
   }
diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss
index 5b9b6651c..f1545b951 100644
--- a/scss/utilities/_api.scss
+++ b/scss/utilities/_api.scss
@@ -16,6 +16,24 @@
   }
 }
 
+// RFS rescaling
+@media (min-width: $rfs-mq-value) {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
+      // Loop over each utility property
+      @each $key, $utility in $utilities {
+        // The utility can be disabled with `false`, thus check if the utility is a map first
+        // Only proceed if responsive media queries are enabled or if it's the base media query
+        @if type-of($utility) == "map" and map-get($utility, rfs) {
+          @include generate-utility($utility, $infix, true);
+        }
+      }
+    }
+  }
+}
+
 
 // Print utilities
 @media print {
diff --git a/site/content/docs/4.3/utilities/api.md b/site/content/docs/4.3/utilities/api.md
index 9b4c344cb..e52f52d29 100644
--- a/site/content/docs/4.3/utilities/api.md
+++ b/site/content/docs/4.3/utilities/api.md
@@ -13,6 +13,7 @@ The `$utilities` map contains all utilities and is later merged with your custom
 
 - `property`: Name of the property, this can be a string or an array of strings (needed for eg. horizontal paddings or margins).
 - `responsive` _(optional)_: Boolean indicating if responsive classes need to be generated. `false` by default.
+- `rfs` _(optional)_: Variable to enable fluid rescaling. Have a look at the [RFS]({{< docsref "/getting-started/rfs" >}}) page to find out how this works. `false` by default.
 - `class` _(optional)_: Variable to change the class name if you don't want it to be the same as the property. In case you don't provide the `class` key and `property` key is an array of strings, the class name will be the first element of the `property` array.
 - `values`: This can be a list of values or a map if you don't want the class name to be the same as the value. If null is used as map key, it isn't rendered.
 - `print` _(optional)_: Boolean indicating if print classes need to be generated. `false` by default.