From 1f3d13200b3793e64209bd8ce8541dff4a6d8151 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Tue, 8 Oct 2024 16:47:36 +0200
Subject: [PATCH] reorder generated classes

---
 packages/styles/src/utilities/_mixins.scss | 25 ++++++++--------------
 packages/styles/src/utilities/index.scss   | 24 ++++++++++++++-------
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/packages/styles/src/utilities/_mixins.scss b/packages/styles/src/utilities/_mixins.scss
index 01e84ab529..6c98727479 100644
--- a/packages/styles/src/utilities/_mixins.scss
+++ b/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;
+        }
       }
     }
   }
diff --git a/packages/styles/src/utilities/index.scss b/packages/styles/src/utilities/index.scss
index 0f3278d183..84aeed5e0d 100644
--- a/packages/styles/src/utilities/index.scss
+++ b/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,17 +17,23 @@
     $responsive: map.get($classesConfig, responsive);
     $prefixes: map.get($classesConfig, prefixes);
 
-    @each $key, $value in $tokens {
-      @if (string.contains($key, 'post-utility-#{$group}')) {
-        $suffix: string.replace($key, 'post-utility-#{$group}', '');
-
-        @each $prefix, $properties in $prefixes {
-          @if $responsive {
-            @include generate-responsive-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 {
-            @include generate-utilities($properties, $value, $prefix, $suffix);
+            // 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);
       }
     }
   }