fix(styles): prevent utility API from creating unwanted classes (#3644)

packages/styles/src/functions/_string.scss

@@ -1,6 +1,11 @@
 @use 'sass:string';
 
-@function replace($string, $term, $replacement: '') {
+@function contains($string, $term) {
+  $index: string.index($string, $term);
+  @return if($index == null, false, true);
+}
+
+@function replace($string, $term, $replacement) {
   $index: string.index($string, $term);
 
   @if $index {

packages/styles/src/utilities/_mixins.scss

@@ -1,22 +1,15 @@
+@use '../functions/string';
 @use '../mixins/media';
 @use '../variables/breakpoints';
 
-@mixin generate-utilities($properties, $value, $prefix, $suffix, $infix: '') {
-  .#{$prefix}#{$infix}#{$suffix} {
-    @each $property in $properties {
-      #{$property}: #{$value};
-    }
-  }
-}
-
-@mixin generate-responsive-utilities($properties, $value, $prefix, $suffix) {
-  @each $breakpoint, $min-width in breakpoints.$grid-breakpoints {
-    @if ($min-width == 0) {
-      @include generate-utilities($properties, $value, $prefix, $suffix);
-    } @else {
-      @include media.min($min-width) {
-        $infix: '-#{$breakpoint}';
-        @include generate-utilities($properties, $value, $prefix, $suffix, $infix);
+@mixin generate-utilities($group, $tokens, $properties, $prefix, $infix: '') {
+  @each $key, $value in $tokens {
+    @if (string.contains($key, 'post-utility-#{$group}')) {
+      $suffix: string.replace($key, 'post-utility-#{$group}', '');
+      .#{$prefix}#{$infix}#{$suffix} {
+        @each $property in $properties {
+          #{$property}: #{$value} !important;
+        }
       }
     }
   }

packages/styles/src/utilities/index.scss

@@ -1,6 +1,8 @@
 @use 'sass:map';
 
 @use '../functions/string';
+@use '../mixins/media';
+@use '../variables/breakpoints';
 
 @use './mixins' as *;
 @use './variables' as *;
@@ -15,15 +17,23 @@
     $responsive: map.get($classesConfig, responsive);
     $prefixes: map.get($classesConfig, prefixes);
 
-    @each $key, $value in $tokens {
-      $suffix: string.replace($key, 'post-utility-#{$group}');
-
-      @each $prefix, $properties in $prefixes {
-        @if $responsive {
-          @include generate-responsive-utilities($properties, $value, $prefix, $suffix);
-        } @else {
-          @include generate-utilities($properties, $value, $prefix, $suffix);
+    @each $prefix, $properties in $prefixes {
+      @if $responsive {
+        @each $breakpoint, $min-width in breakpoints.$grid-breakpoints {
+          @if ($min-width == 0) {
+            // responsive utilities on smaller breakpoint (no breakpoint infix)
+            @include generate-utilities($group, $tokens, $properties, $prefix);
+          } @else {
+            // responsive utilities on all breakpoints that are not the smallest (with breakpoint infix)
+            @include media.min($min-width) {
+              $infix: '-#{$breakpoint}';
+              @include generate-utilities($group, $tokens, $properties, $prefix, $infix);
+            }
+          }
         }
+      } @else {
+        // non-responsive utilities
+        @include generate-utilities($group, $tokens, $properties, $prefix);
       }
     }
   }

packages/styles/tests/functions/string.test.scss

@@ -3,6 +3,18 @@
 
 $paragraph: "I think Ruth's dog is cuter than your dog!";
 
+// it should return true if the term is found
+@include jest.equal(
+    true,
+    string.contains($paragraph, 'dog')
+);
+
+// it should return false if the term is not found
+@include jest.equal(
+    false,
+    string.contains($paragraph, 'cat')
+);
+
 // it should replace a term by another
 @include jest.equal(
     'I think my dog is cuter than your dog!',

packages/styles/tests/utilities/mixins.test.scss

@@ -3,9 +3,26 @@
 @use 'tests/jest';
 @use 'src/utilities/mixins';
 
-
 .test {
-  @include mixins.generate-utilities('font-weight', '400', 'fw', 'normal');
-  @include mixins.generate-utilities('font-size', '1.5rem', 'fs', 'large', 'sm');
-  @include mixins.generate-responsive-utilities('row-gap', '48px', 'rg', '48');
+  @include mixins.generate-utilities(
+    $group: 'font-weight',
+    $tokens: (
+      post-utility-font-weight-normal: 400,
+    ),
+    $properties: font-weight,
+    $prefix: 'fw'
+  );
+
+  @include mixins.generate-utilities(
+    $group: 'gutter',
+    $tokens: (
+      post-utility-gutter-12: 12px,
+    ),
+    $properties: (
+      --gutter-x,
+      --gutter-y,
+    ),
+    $prefix: 'g',
+    $infix: '-lg'
+  );
 }