✨ feat(_flags.scss): Add flags for conditionally including/excluding …

…classes to generate, add support for conditional generation for util classes
Spiderpig86 · Dec 24, 2021 · a455e2a · a455e2a
1 parent ec0f511
commit a455e2a
Show file tree

Hide file tree

Showing 18 changed files with 743 additions and 153 deletions.
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
diff --git a/src/base/grid.scss b/src/base/grid.scss
@@ -1,5 +1,6 @@
 @import '../internal/_size.scss';
 @import '../internal/functions';
+@import '../internal/flags';
 
 /* GRID */
 
@@ -26,7 +27,7 @@
     --grid-row-end: auto;
 }
 
-@include generate-styles-with-viewports($generate-viewports: #{get-viewport-flag('GRID')}) using ($viewport) {
+@include generate-styles-with-viewports($generate-viewports: #{get-viewport-flag($GRID)}) using ($viewport) {
     $suffix: if($viewport != '', '-#{$viewport}', '');
 
     .grid#{$suffix} {

diff --git a/src/base/layout.scss b/src/base/layout.scss
@@ -4,6 +4,8 @@
 @import '../internal/size';
 @import '../internal/config';
 @import '../internal/mixins';
+@import '../internal/flags';
+
 /* HEADER */
 
 /* This works well with panel */
@@ -247,12 +249,12 @@ 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')});
+@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,

diff --git a/src/base/spacing.scss b/src/base/spacing.scss
@@ -1,5 +1,6 @@
 @import '../internal/_size';
 @import '../internal/_functions';
+@import '../internal/flags';
 
 @each $size in $spacing-system {
     /* Margin */
@@ -69,7 +70,7 @@
     margin-bottom: auto !important;
 }
 
-@if get-viewport-flag('MARGIN_PADDING') == true {
+@if get-viewport-flag($MARGIN-PADDING) == true {
     // TODO: Maybe in future versions of Sass, we can pass mixins as a parameter to another mixin. For now, we just have to write what we want it to generate
     @each $suffix, $limit in $breakpoint-pairs {
         @each $size in $spacing-system {

diff --git a/src/internal/_flags.scss b/src/internal/_flags.scss
@@ -1,23 +1,78 @@
+@use 'sass:list';
+
+// Flag Constants
+$ALL: 'ALL';
+
+$CLEARFIX: 'CLEARFIX';
+$DISPLAY: 'DISPLAY';
+$FLEX: 'FLEX';
+$FLOAT: 'FLOAT';
+$OVERFLOW: 'OVERFLOW';
+$POSITION: 'POSITION';
+$TEXT: 'TEXT';
+$MARGIN-PADDING: 'MARGIN-PADDING';
+$OPACITY: 'OPACITY';
+$WIDTHS: 'WIDTHS';
+$HEIGHTS: 'HEIGHTS';
+$ZINDEX: 'ZINDEX';
+$ABSOLUTE: 'ABSOLUTE';
+$FLEX-GAP: 'FLEX-GAP';
+$MIN-HEIGHT: 'MIN-HEIGHT';
+$MAX-HEIGHT: 'MAX-HEIGHT';
+$MIN-WIDTH: 'MIN-WIDTH';
+$MAX-WIDTH: 'MAX-WIDTH';
+$GRID: 'GRID';
+$ROUND: 'ROUND';
+$SHADOWS: 'SHADOWS';
 
 // Turn on/off generating viewport classes to save on size.
-$_VIEWPORT_CLASS_FLAGS: (
-    'CLEARFIX': true,
-    'DISPLAY': true,
-    'FLEX': true,
-    'FLOAT': true,
-    'OVERFLOW': true,
-    'POSITION': true,
-    'TEXT': true,
-    'MARGIN_PADDING': true,
-    'OPACITY': true,
-    'WIDTHS': true,
-    'HEIGHTS': true,
-    'ZINDEX': false,
-    'ABSOLUTE': false,
-    'FLEX-GAP': false,
-    'MIN-HEIGHT': false,
-    'MAX-HEIGHT': false,
-    'MIN-WIDTH': false,
-    'MAX-WIDTH': false,
-    'GRID': true,
-);
+// TODO extend to include "!important" option
+$VIEWPORT_CLASS_FLAGS: (
+    $CLEARFIX: true,
+    $DISPLAY: true,
+    $FLEX: true,
+    $FLOAT: true,
+    $OVERFLOW: true,
+    $POSITION: true,
+    $TEXT: true,
+    $MARGIN-PADDING: true,
+    $OPACITY: true,
+    $WIDTHS: true,
+    $HEIGHTS: true,
+    $ZINDEX: false,
+    $ABSOLUTE: false,
+    $FLEX-GAP: false,
+    $MIN-HEIGHT: false,
+    $MAX-HEIGHT: false,
+    $MIN-WIDTH: false,
+    $MAX-WIDTH: false,
+    $GRID: true,
+);
+
+// Turn off certain features from being loaded. If left blank, all components are generated by default.
+$EXCLUDE: (
+
+);
+
+// Enable certain classes to be generated. Takes precedence over $EXCLUDE.
+$INCLUDE: (
+
+);
+
+/*
+  Helper function to determine if a set of classes should be generated based on given include/exclude configuration.
+*/
+@function _should-generate-classes($flag) {
+  $generate-classes: true;
+  @if list.index($EXCLUDE, $ALL) {
+    $generate-classes: false;
+  }
+  @if list.index($EXCLUDE, $ABSOLUTE) {
+    $generate-classes: false;
+  }
+  @if list.index($INCLUDE, $ABSOLUTE) {
+    $generate-classes: true;
+  }
+
+  @return $generate-classes;
+}
diff --git a/src/internal/_functions.scss b/src/internal/_functions.scss
@@ -30,15 +30,15 @@ $DELIMETER: '-';
     Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
 */
 @function get-viewport-flag($name) {
-    @if not map-has-key($_VIEWPORT_CLASS_FLAGS, $name) {
+    @if not map-has-key($VIEWPORT_CLASS_FLAGS, $name) {
         @return throw.error(
             $message: '[get-viewport-flag] Unknown constant `#{$name}`.',
             $source: 'get-viewport-flag()',
             $catch: true
         );
     }
 
-    @return map-get($_VIEWPORT_CLASS_FLAGS, $name);
+    @return map-get($VIEWPORT_CLASS_FLAGS, $name);
 }
 
 @function string-split($string, $delimiter) {

diff --git a/src/utils/absolute.scss b/src/utils/absolute.scss
@@ -1,14 +1,19 @@
 @import '../internal/functions';
 @import '../internal/size';
 @import '../internal/config';
+@import '../internal/flags';
 
-$directions: top, left, right, bottom;
+$generate-utility: _should-generate-classes($ABSOLUTE);
 
-@each $direction in $directions {
-    @include generate-classes-for-viewport-with-map(
-        $absolute,
-        $direction,
-        'u-#{$direction}-',
-        $generate-viewports: #{get-viewport-flag('ABSOLUTE')}
-    );
+@if $generate-utility {
+    $directions: top, left, right, bottom;
+
+    @each $direction in $directions {
+        @include generate-classes-for-viewport-with-map(
+                        $absolute,
+                        $direction,
+                        'u-#{$direction}-',
+                $generate-viewports: #{get-viewport-flag($ABSOLUTE)}
+        );
+    }
 }
diff --git a/src/utils/clearfix.scss b/src/utils/clearfix.scss
@@ -1,16 +1,21 @@
 @import '../internal/functions';
 @import '../internal/size';
+@import '../internal/flags';
 
-$clears: left, right, both;
+$generate-utility: _should-generate-classes($CLEARFIX);
 
-@include generate-classes-for-viewport($clears, 'clear', 'u-clear-', $generate-viewports: #{get-viewport-flag('CLEARFIX')});
+@if $generate-utility {
+    $clears: left, right, both;
 
-/*
-   When using floats, clearfix allows the container to automatically resize so that
-   other elements are not blocked by children.
-*/
-.u-clearfix:after {
-    clear: both !important;
-    content: ' ';
-    display: table !important;
+    @include generate-classes-for-viewport($clears, 'clear', 'u-clear-', $generate-viewports: #{get-viewport-flag($CLEARFIX)});
+
+    /*
+       When using floats, clearfix allows the container to automatically resize so that
+       other elements are not blocked by children.
+    */
+    .u-clearfix:after {
+        clear: both !important;
+        content: ' ';
+        display: table !important;
+    }
 }
diff --git a/src/utils/display.scss b/src/utils/display.scss
@@ -1,6 +1,11 @@
 @import '../internal/functions';
 @import '../internal/size';
+@import '../internal/flags';
 
-$display-utils-config: none, inline, inline-block, block, flex, inline-flex, table, table-row, table-column, table-cell;
+$generate-utility: _should-generate-classes($DISPLAY);
 
-@include generate-classes-for-viewport($display-utils-config, 'display', $generate-viewports: #{get-viewport-flag('DISPLAY')});
+@if $generate-utility {
+  $display-utils-config: none, inline, inline-block, block, flex, inline-flex, table, table-row, table-column, table-cell;
+
+  @include generate-classes-for-viewport($display-utils-config, 'display', $generate-viewports: #{get-viewport-flag($DISPLAY)});
+}
diff --git a/src/utils/flex.scss b/src/utils/flex.scss
@@ -1,51 +1,58 @@
 @import '../internal/functions';
 @import '../internal/size';
+@import '../internal/flags';
 
-$flex-directions: row, row-reverse, column, column-reverse;
-
-$justify-content: flex-start, center, flex-end, space-between, space-around, space-evenly;
-
-$align-items: stretch, flex-start, center, flex-end, baseline;
-
-$flex-grow: 0, 1;
-
-@include generate-classes-for-viewport(
-    $flex-directions,
-    'flex-direction',
-    'u#{delimitize('flex')}',
-    $generate-viewports: #{get-viewport-flag('FLEX')}
-);
-@include generate-classes-for-viewport(
-    $justify-content,
-    'justify-content',
-    'u#{delimitize('justify')}',
-    $generate-viewports: #{get-viewport-flag('FLEX')}
-);
-@include generate-classes-for-viewport(
-    $align-items,
-    'align-items',
-    'u#{delimitize('items')}',
-    $generate-viewports: #{get-viewport-flag('FLEX')}
-);
-
-// Flex grow/shrink utils
-@include generate-classes-for-viewport(
-    $flex-grow,
-    'flex-grow',
-    'u#{delimitize('flex-grow')}',
-    $generate-viewports: #{get-viewport-flag('FLEX')}
-);
-
-// Generate flex gap class map
-$flex-gaps-both: ();
-// TODO: Consider if we need to generate for row and col only
-@each $size in $spacing-system {
-    $flex-gaps-both: map-merge(
-        $flex-gaps-both,
-        (
-            'gap-#{$size}': calc(#{$space-size} * #{$size}),
-        )
+$generate-utility: _should-generate-classes($FLEX);
+
+@if $generate-utility {
+    $flex-directions: row, row-reverse, column, column-reverse;
+    $justify-content: flex-start, center, flex-end, space-between, space-around, space-evenly;
+    $align-items: stretch, flex-start, center, flex-end, baseline;
+    $flex-grow: 0, 1;
+
+    @include generate-classes-for-viewport(
+                    $flex-directions,
+                    'flex-direction',
+                    'u#{delimitize('flex')}',
+            $generate-viewports: #{get-viewport-flag($FLEX)}
+    );
+    @include generate-classes-for-viewport(
+                    $justify-content,
+                    'justify-content',
+                    'u#{delimitize('justify')}',
+            $generate-viewports: #{get-viewport-flag($FLEX)}
+    );
+    @include generate-classes-for-viewport(
+                    $align-items,
+                    'align-items',
+                    'u#{delimitize('items')}',
+            $generate-viewports: #{get-viewport-flag($FLEX)}
+    );
+
+    // Flex grow/shrink utils
+    @include generate-classes-for-viewport(
+                    $flex-grow,
+                    'flex-grow',
+                    'u#{delimitize('flex-grow')}',
+            $generate-viewports: #{get-viewport-flag($FLEX)}
     );
 }
 
-@include generate-classes-for-viewport-with-map($flex-gaps-both, 'gap', $generate-viewports: #{get-viewport-flag('FLEX-GAP')});
+
+$generate-utility: _should-generate-classes($FLEX-GAP);
+
+@if $generate-utility {
+    // Generate flex gap class map
+    $flex-gaps-both: ();
+    // TODO: Consider if we need to generate for row and col only
+    @each $size in $spacing-system {
+        $flex-gaps-both: map-merge(
+                        $flex-gaps-both,
+                        (
+                                'gap-#{$size}': calc(#{$space-size} * #{$size}),
+                        )
+        );
+    }
+
+    @include generate-classes-for-viewport-with-map($flex-gaps-both, 'gap', $generate-viewports: #{get-viewport-flag($FLEX-GAP)});
+}