Add possibility to use RFS in utility API

Created by: MartijnCuppens

RFS v9 has launched and with the new version it will be possible to apply the same rescaling technique to any property.

Features:

• Responsive font sizes are now enabled by default
• Utility API integration
  • Fluid rescaling is also applied to the spacing utilities (option can be disabled)
  • New .font-size-sm, .font-size-base, .font-size-lg and .font-size-xl utilities
  • New .text-sm, .text-base, .text-lg and .text-xl utilities
• Documentation page with basic how-to-use examples.

Docs: https://deploy-preview-29152--twbs-bootstrap.netlify.com/docs/4.3/getting-started/rfs/ Responsive displays: https://deploy-preview-29152--twbs-bootstrap.netlify.com/docs/4.3/content/typography/#display-headings

Closes #25832 (closed)

scss/mixins/_utilities.scss

 // 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,25 @@
     // 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 !important;
+    @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 {
+          // stylelint-disable-next-line declaration-no-important
+          #{$property}: $value !important;
+        }
       }
     }
   }

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 {

scss/bootstrap-grid.scss

@@ -23,6 +23,8 @@ html {
 @import "mixins/grid";
 @import "mixins/utilities";
 
+@import "vendor/rfs";
+
 @import "grid";
 
 @import "utilities";

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.