From fe351f9dc3c0384fa2bbd0fc3ce38973e5d65b9b Mon Sep 17 00:00:00 2001
From: Larry Botha <lawrenceguy@gmail.com>
Date: Mon, 18 Apr 2022 10:38:01 +0200
Subject: [PATCH] fix(wraps): create base wrap before modifiers

---
 scss/custom/app/components/_wraps.scss        | 26 +++++++-----
 .../tools/mixins/components/_wraps.scss       | 40 ++++++++++---------
 2 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/scss/custom/app/components/_wraps.scss b/scss/custom/app/components/_wraps.scss
index 5edb8534..9c23094b 100644
--- a/scss/custom/app/components/_wraps.scss
+++ b/scss/custom/app/components/_wraps.scss
@@ -1,6 +1,7 @@
 /*------------------------------------*\
     WRAPS
 \*------------------------------------*/
+@use "sass:map";
 /**
  * Generates classes for wraps defined in mixins/components/layout/_wraps.scss
  * e.g.
@@ -9,16 +10,19 @@
   .wrap { ... }
   .wrap--small { ... }
  */
-@each $wrap-name, $wrap-width in $wrap-widths {
-  @if $wrap-name == 'base' {
-    .wrap {
-      @include wrap-width($wrap-name);
-      @include wrap-base;
-    }
-  } @else {
-    .wrap--#{$wrap-name} {
-      @include wrap-width($wrap-name);
-      @include wrap-base;
-    }
+
+@each $config in $wrap-base-configs {
+  .wrap {
+    @include wrap-base;
+    max-width: map-get($config, 'width');
+  }
+}
+
+@each $config in $wrap-modifier-configs {
+  $name: map-get($config, 'name');
+  $width: map-get($config, 'width');
+
+  .wrap--#{$name} {
+    max-width: $width;
   }
 }
diff --git a/scss/custom/tools/mixins/components/_wraps.scss b/scss/custom/tools/mixins/components/_wraps.scss
index 98c76f0f..eda09c4f 100644
--- a/scss/custom/tools/mixins/components/_wraps.scss
+++ b/scss/custom/tools/mixins/components/_wraps.scss
@@ -1,12 +1,29 @@
 /*------------------------------------*\
     WRAP MIXINS
 \*------------------------------------*/
-$wrap-widths: (
-  large: 1200px,
-  base: 960px,
-  small: 720px,
+@use "sass:map";
+
+$wrap-configs: (
+  ("name": large, "width": 1200px, "type": modifier),
+  ("name": base, "width": 960px, "type": base),
+  ("name": small, "width": 720px, "type": modifier),
 );
 
+$wrap-base-configs: ();
+$wrap-modifier-configs: ();
+
+@each $config in $wrap-configs {
+  @if map-get($config, "type") == "base" {
+    $wrap-base-configs: append($wrap-base-configs, $config);
+  }
+}
+
+@each $config in $wrap-configs {
+  @if map-get($config, "type") == "modifier" {
+    $wrap-modifier-configs: append($wrap-modifier-configs, $config);
+  }
+}
+
 @mixin wrap-margin {
   margin-inline-end: auto;
   margin-inline-start: auto;
@@ -23,18 +40,3 @@ $wrap-widths: (
   @include wrap-margin;
   @include wrap-padding;
 }
-
-@mixin wrap-width($name){
-  $has-key: map-has-key($wrap-widths, $name);
-
-  @if $has-key == true {
-    max-width: map-get($wrap-widths, $name);
-  } @else {
-    @error "no key #{$name} in #{$wrap-widths}";
-  }
-}
-
-@mixin wrap($name) {
-  @include wrap-base;
-  @include wrap-width($name);
-}