✨ feat(layout.scss): Add min/max height/width util classes, fix error…

… with generate-classes-for-viewport-with-map mixin incorrectly appending the suffix to the style value

internal/_config.scss

@@ -260,6 +260,44 @@ $default-config: (
         auto: auto,
         screen: 100vh,
     ),
+    minmax-heights: (
+        'none': none,
+        $xs: map-get($breakpoints, $xs),
+        $sm: map-get($breakpoints, $sm),
+        $md: map-get($breakpoints, $md),
+        $lg: map-get($breakpoints, $lg),
+        $xl: map-get($breakpoints, $xl),
+        10: 10%,
+        20: 20%,
+        30: 30%,
+        40: 40%,
+        50: 50%,
+        60: 60%,
+        70: 70%,
+        80: 80%,
+        90: 90%,
+        100: 100%,
+        screen: 100vh,
+    ),
+    minmax-widths: (
+        'none': none,
+        $xs: map-get($breakpoints, $xs),
+        $sm: map-get($breakpoints, $sm),
+        $md: map-get($breakpoints, $md),
+        $lg: map-get($breakpoints, $lg),
+        $xl: map-get($breakpoints, $xl),
+        10: 10%,
+        20: 20%,
+        30: 30%,
+        40: 40%,
+        50: 50%,
+        60: 60%,
+        70: 70%,
+        80: 80%,
+        90: 90%,
+        100: 100%,
+        screen: 100vh,
+    ),
     opacity: (
         '0': 0,
         '10': 0.1,
@@ -350,6 +388,8 @@ $absolute: map.get($default-config, absolute);
 
 $heights: map.get($default-config, heights);
 $widths: map.get($default-config, widths);
+$minmax-heights: map.get($default-config, minmax-heights);
+$minmax-widths: map.get($default-config, minmax-widths);
 
 $opacities: map.get($default-config, opacity);
 $shadows: map.get($default-config, shadows);

internal/_flags.scss

@@ -15,4 +15,8 @@ $_VIEWPORT_CLASS_FLAGS: (
     'ZINDEX': false,
     'ABSOLUTE': false,
     'FLEX-GAP': false,
+    'MIN-HEIGHT': false,
+    'MAX-HEIGHT': false,
+    'MIN-WIDTH': false,
+    'MAX-WIDTH': false,
 );

internal/_size.scss

@@ -112,11 +112,11 @@ $breakpoint-pairs: (
 /* Variant of mixin that takes in mapping of class name to value */
 @mixin generate-classes-for-viewport-with-map($class-value-pairs, $property, $prefix: 'u-', $generate-viewports: 'true', $include-important: true) {
 
-    $suffix: if($include-important == true, '!important', '');
+    $important: if($include-important == true, '!important', '');
 
     @each $class, $value in $class-value-pairs {
         .#{$prefix}#{$class} {
-            #{$property}: $value#{$suffix};
+            #{$property}: $value#{$important};
         }
     }
 
@@ -125,7 +125,7 @@ $breakpoint-pairs: (
             @each $class, $value in $class-value-pairs {
                 @include screen-above($limit) {
                     .#{$prefix}#{$class}-#{$suffix} {
-                        #{$property}: $value#{$suffix};
+                        #{$property}: $value#{$important};
                     }
                 }
             }

src/core/layout.scss

@@ -276,6 +276,10 @@ section {
 /* Width/Height CSS */
 @include generate-classes-for-viewport-with-map($heights, 'height', 'h-', #{get-viewport-flag('HEIGHTS')});
 @include generate-classes-for-viewport-with-map($widths, 'width', 'w-', #{get-viewport-flag('WIDTHS')});
+@include generate-classes-for-viewport-with-map($minmax-heights, 'min-height', 'min-h-', #{get-viewport-flag('MIN-HEIGHT')});
+@include generate-classes-for-viewport-with-map($minmax-widths, 'min-width', 'min-w-', #{get-viewport-flag('MIN-WIDTH')});
+@include generate-classes-for-viewport-with-map($minmax-heights, 'max-height', 'max-h-', #{get-viewport-flag('MAX-HEIGHT')});
+@include generate-classes-for-viewport-with-map($minmax-widths, 'max-width', 'max-w-', #{get-viewport-flag('MAX-WIDTH')});
 
 /* Do the actual balancing only on larger screens */
 .level,