reorder generated classes

swisspost · Oct 8, 2024 · 1f3d132 · 1f3d132
1 parent bf11675
commit 1f3d132
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 24 deletions.
diff --git 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
@@ -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);
       }
     }
   }