✨ feat(flex.scss): Add default percentages to flex basis util classes…

…, minor refactoring
Spiderpig86 · Oct 10, 2022 · b070926 · b070926
1 parent 7dfa71f
commit b070926
Show file tree

Hide file tree

Showing 10 changed files with 991 additions and 314 deletions.
diff --git a/dist/cirrus-all.css b/dist/cirrus-all.css
diff --git a/dist/cirrus-all.min.css b/dist/cirrus-all.min.css
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
diff --git a/dist/cirrus-core.min.css b/dist/cirrus-core.min.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/src/internal/_config.scss b/src/internal/_config.scss
@@ -649,75 +649,25 @@ $default-config: (
             grid-columns: 12,
         ),
     ),
-    heights: map.merge(defaults.$default-sizing-system, (
+    heights: functions.map-multi-merge(defaults.$default-sizing-system, defaults.$default-percentages, (
         0: 0,
-        10p: 10%,
-        20p: 20%,
-        30p: 30%,
-        40p: 40%,
-        50p: 50%,
-        60p: 60%,
-        70p: 70%,
-        80p: 80%,
-        90p: 90%,
-        100p: 100%,
         auto: auto,
         screen: 100vh,
     )),
-    min-heights: map.merge(defaults.$default-sizing-system, (
+    min-heights: functions.map-multi-merge(defaults.$default-sizing-system, defaults.$default-percentages, (
         0: 0,
-        10p: 10%,
-        20p: 20%,
-        30p: 30%,
-        40p: 40%,
-        50p: 50%,
-        60p: 60%,
-        70p: 70%,
-        80p: 80%,
-        90p: 90%,
-        100p: 100%,
         screen: 100vh,
     )),
-    max-heights: (
+    max-heights: functions.map-multi-merge(defaults.$default-percentages, (
         'none': none,
-        10p: 10%,
-        20p: 20%,
-        30p: 30%,
-        40p: 40%,
-        50p: 50%,
-        60p: 60%,
-        70p: 70%,
-        80p: 80%,
-        90p: 90%,
-        100p: 100%,
         screen: 100vh,
-    ),
-    min-widths: map.merge(defaults.$default-breakpoints, (
+    )),
+    min-widths: functions.map-multi-merge(defaults.$default-breakpoints, defaults.$default-percentages, (
         0: 0,
-        10p: 10%,
-        20p: 20%,
-        30p: 30%,
-        40p: 40%,
-        50p: 50%,
-        60p: 60%,
-        70p: 70%,
-        80p: 80%,
-        90p: 90%,
-        100p: 100%,
         screen: 100vw,
     )),
-    max-widths: map.merge(defaults.$default-breakpoints, (
+    max-widths: functions.map-multi-merge(defaults.$default-breakpoints, defaults.$default-percentages, (
         'none': none,
-        10p: 10%,
-        20p: 20%,
-        30p: 30%,
-        40p: 40%,
-        50p: 50%,
-        60p: 60%,
-        70p: 70%,
-        80p: 80%,
-        90p: 90%,
-        100p: 100%,
         screen: 100vw,
     )),
     opacity: (
@@ -789,21 +739,11 @@ $default-config: (
             1000: 1000ms,
         ),
     ),
-    widths: map.merge((
+    widths: functions.map-multi-merge((
         0: 0,
-        10p: 10%,
-        20p: 20%,
-        30p: 30%,
-        40p: 40%,
-        50p: 50%,
-        60p: 60%,
-        70p: 70%,
-        80p: 80%,
-        90p: 90%,
-        100p: 100%,
         auto: auto,
         screen: 100vw,
-    ), defaults.$default-sizing-system),
+    ), defaults.$default-percentages, defaults.$default-sizing-system),
     z-index: (
         'n1': -1,
         0: 0,

diff --git a/src/internal/_defaults.scss b/src/internal/_defaults.scss
@@ -35,3 +35,16 @@ $default-quartile-percentages: (
     75p: 75%,
     100p: 100%,
 );
+
+$default-percentages: (
+    10p: 10%,
+    20p: 20%,
+    30p: 30%,
+    40p: 40%,
+    50p: 50%,
+    60p: 60%,
+    70p: 70%,
+    80p: 80%,
+    90p: 90%,
+    100p: 100%,
+);
diff --git a/src/internal/_index.scss b/src/internal/_index.scss
@@ -7,4 +7,5 @@
 @forward './config';
 @forward './size';
 @forward './constants';
-@forward './api';
+@forward './api';
+@forward './defaults';
diff --git a/src/utils/flex.scss b/src/utils/flex.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 @use '../internal' as *;
 
 $generate-utility: should-generate-classes($FLEX);
@@ -8,7 +10,8 @@ $generate-utility: should-generate-classes($FLEX);
     $align-items: stretch, flex-start, center, flex-end, baseline;
     $flex-grow: 0, 1;
     $flex-wrap: wrap, wrap-reverse, nowrap;
-    $flex-basis: auto, max-content, min-content, fit-content, content, revert, revert-layer;
+    $flex-basis: map.merge(to-property-map((auto, max-content, min-content, fit-content, content, revert, revert-layer)),
+        $default-percentages);
 
     @include generate-classes-for-viewport(
                     $flex-directions,
@@ -53,7 +56,7 @@ $generate-utility: should-generate-classes($FLEX);
     );
 
     // Flex basis
-    @include generate-classes-for-viewport(
+    @include generate-classes-for-viewport-with-map(
             $flex-basis,
             'flex-basis',
             'u#{delimitize('basis')}',