From 37c5f8e09bd80e6f48315d8fc7aa365507faa438 Mon Sep 17 00:00:00 2001
From: Stanley Lim <slim679975@gmail.com>
Date: Tue, 27 Sep 2022 19:28:23 -0700
Subject: [PATCH] :sparkles: feat(_size.scss): generate-classes-for-viewport
 should reuse logic from generate-classes-for-viewport-with-map

---
 dist/cirrus-all.css     |  5 ++++-
 dist/cirrus-core.css    |  5 ++++-
 dist/cirrus.css         |  5 ++++-
 src/internal/_size.scss | 29 +++++++++--------------------
 4 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/dist/cirrus-all.css b/dist/cirrus-all.css
index ee057a8f..76f5007d 100644
--- a/dist/cirrus-all.css
+++ b/dist/cirrus-all.css
@@ -28,7 +28,10 @@
             )
         )
     );
-
+*/
+/*
+    Converts a list of properties to a mapping where the key and value are the property
+    itself.
 */
 /*
     Group selectors that share common styling.
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
index f9b164f4..42e073ba 100644
--- a/dist/cirrus-core.css
+++ b/dist/cirrus-core.css
@@ -27,7 +27,10 @@
             )
         )
     );
-
+*/
+/*
+    Converts a list of properties to a mapping where the key and value are the property
+    itself.
 */
 /*
     Group selectors that share common styling.
diff --git a/dist/cirrus.css b/dist/cirrus.css
index 79ecff28..9eb1f011 100644
--- a/dist/cirrus.css
+++ b/dist/cirrus.css
@@ -28,7 +28,10 @@
             )
         )
     );
-
+*/
+/*
+    Converts a list of properties to a mapping where the key and value are the property
+    itself.
 */
 /*
     Group selectors that share common styling.
diff --git a/src/internal/_size.scss b/src/internal/_size.scss
index 1d3513ea..4ad6d82e 100644
--- a/src/internal/_size.scss
+++ b/src/internal/_size.scss
@@ -1,4 +1,5 @@
 @use 'config';
+@use 'functions';
 
 /* Media Queries */
 // TODO: For viewport mixins, future option to not fail if key not found and to ignore instead?
@@ -43,27 +44,15 @@
     $generate-viewports: 'true',
     $include-important: 'true'
 ) {
-    // We build in this order since we want larger viewports to have higher precedence
-    // so we can write classes like u-none u-block-md u-none-lg
-    $important: if($include-important == 'true', '!important', '');
+    $mapping: functions.to-property-map($classes);
 
-    @each $class in $classes {
-        .#{$prefix}#{$class} {
-            #{$property}: $class#{$important};
-        }
-    }
-
-    @if $generate-viewports == 'true' {
-        @each $suffix, $limit in config.$breakpoint-pairs {
-            @each $class in $classes {
-                @include screen-above($limit) {
-                    .#{$prefix}#{$class}-#{$suffix} {
-                        #{$property}: $class#{$important};
-                    }
-                }
-            }
-        }
-    }
+    @include generate-classes-for-viewport-with-map(
+        $mapping,
+        $property,
+        $prefix,
+        $generate-viewports,
+        $include-important
+    );
 }
 
 /* Variant of mixin that takes in mapping of class name to value */