🐛 fix(_size.scss): Fix bug where _config class generation flags were …

…not handled correctly
Spiderpig86 · Oct 8, 2021 · 4835bf4 · 4835bf4
1 parent 1a6f8aa
commit 4835bf4
Show file tree

Hide file tree

Showing 5 changed files with 294 additions and 6 deletions.
diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -9924,6 +9924,38 @@ a.tag:hover {
 .u-pull-right {
   float: right !important; }
 
+@media screen and (min-width: 640px) {
+  .u-pull-left-sm {
+    float: left !important; } }
+
+@media screen and (min-width: 640px) {
+  .u-pull-right-sm {
+    float: right !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-pull-left-md {
+    float: left !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-pull-right-md {
+    float: right !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-pull-left-lg {
+    float: left !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-pull-right-lg {
+    float: right !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-pull-left-xl {
+    float: left !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-pull-right-xl {
+    float: right !important; } }
+
 .u-text-justify {
   text-align: justify !important; }
 
@@ -9936,6 +9968,70 @@ a.tag:hover {
 .u-text-center {
   text-align: center !important; }
 
+@media screen and (min-width: 640px) {
+  .u-text-justify-sm {
+    text-align: justify !important; } }
+
+@media screen and (min-width: 640px) {
+  .u-text-left-sm {
+    text-align: left !important; } }
+
+@media screen and (min-width: 640px) {
+  .u-text-right-sm {
+    text-align: right !important; } }
+
+@media screen and (min-width: 640px) {
+  .u-text-center-sm {
+    text-align: center !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-text-justify-md {
+    text-align: justify !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-text-left-md {
+    text-align: left !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-text-right-md {
+    text-align: right !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-text-center-md {
+    text-align: center !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-text-justify-lg {
+    text-align: justify !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-text-left-lg {
+    text-align: left !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-text-right-lg {
+    text-align: right !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-text-center-lg {
+    text-align: center !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-text-justify-xl {
+    text-align: justify !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-text-left-xl {
+    text-align: left !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-text-right-xl {
+    text-align: right !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-text-center-xl {
+    text-align: center !important; } }
+
 .u-text-ellipsis {
   text-overflow: ellipsis;
   overflow: hidden;
@@ -10031,6 +10127,70 @@ a.tag:hover {
 .u-overflow-scroll {
   overflow: scroll !important; }
 
+@media screen and (min-width: 640px) {
+  .u-overflow-auto-sm {
+    overflow: auto !important; } }
+
+@media screen and (min-width: 640px) {
+  .u-overflow-hidden-sm {
+    overflow: hidden !important; } }
+
+@media screen and (min-width: 640px) {
+  .u-overflow-visible-sm {
+    overflow: visible !important; } }
+
+@media screen and (min-width: 640px) {
+  .u-overflow-scroll-sm {
+    overflow: scroll !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-overflow-auto-md {
+    overflow: auto !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-overflow-hidden-md {
+    overflow: hidden !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-overflow-visible-md {
+    overflow: visible !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-overflow-scroll-md {
+    overflow: scroll !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-overflow-auto-lg {
+    overflow: auto !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-overflow-hidden-lg {
+    overflow: hidden !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-overflow-visible-lg {
+    overflow: visible !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-overflow-scroll-lg {
+    overflow: scroll !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-overflow-auto-xl {
+    overflow: auto !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-overflow-hidden-xl {
+    overflow: hidden !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-overflow-visible-xl {
+    overflow: visible !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-overflow-scroll-xl {
+    overflow: scroll !important; } }
+
 .u-overflow-x-auto {
   overflow-x: auto !important; }
 
@@ -10043,6 +10203,70 @@ a.tag:hover {
 .u-overflow-x-scroll {
   overflow-x: scroll !important; }
 
+@media screen and (min-width: 640px) {
+  .u-overflow-x-auto-sm {
+    overflow-x: auto !important; } }
+
+@media screen and (min-width: 640px) {
+  .u-overflow-x-hidden-sm {
+    overflow-x: hidden !important; } }
+
+@media screen and (min-width: 640px) {
+  .u-overflow-x-visible-sm {
+    overflow-x: visible !important; } }
+
+@media screen and (min-width: 640px) {
+  .u-overflow-x-scroll-sm {
+    overflow-x: scroll !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-overflow-x-auto-md {
+    overflow-x: auto !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-overflow-x-hidden-md {
+    overflow-x: hidden !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-overflow-x-visible-md {
+    overflow-x: visible !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-overflow-x-scroll-md {
+    overflow-x: scroll !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-overflow-x-auto-lg {
+    overflow-x: auto !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-overflow-x-hidden-lg {
+    overflow-x: hidden !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-overflow-x-visible-lg {
+    overflow-x: visible !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-overflow-x-scroll-lg {
+    overflow-x: scroll !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-overflow-x-auto-xl {
+    overflow-x: auto !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-overflow-x-hidden-xl {
+    overflow-x: hidden !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-overflow-x-visible-xl {
+    overflow-x: visible !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-overflow-x-scroll-xl {
+    overflow-x: scroll !important; } }
+
 .u-overflow-y-auto {
   overflow-y: auto !important; }
 
@@ -10055,6 +10279,70 @@ a.tag:hover {
 .u-overflow-y-scroll {
   overflow-y: scroll !important; }
 
+@media screen and (min-width: 640px) {
+  .u-overflow-y-auto-sm {
+    overflow-y: auto !important; } }
+
+@media screen and (min-width: 640px) {
+  .u-overflow-y-hidden-sm {
+    overflow-y: hidden !important; } }
+
+@media screen and (min-width: 640px) {
+  .u-overflow-y-visible-sm {
+    overflow-y: visible !important; } }
+
+@media screen and (min-width: 640px) {
+  .u-overflow-y-scroll-sm {
+    overflow-y: scroll !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-overflow-y-auto-md {
+    overflow-y: auto !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-overflow-y-hidden-md {
+    overflow-y: hidden !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-overflow-y-visible-md {
+    overflow-y: visible !important; } }
+
+@media screen and (min-width: 768px) {
+  .u-overflow-y-scroll-md {
+    overflow-y: scroll !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-overflow-y-auto-lg {
+    overflow-y: auto !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-overflow-y-hidden-lg {
+    overflow-y: hidden !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-overflow-y-visible-lg {
+    overflow-y: visible !important; } }
+
+@media screen and (min-width: 1024px) {
+  .u-overflow-y-scroll-lg {
+    overflow-y: scroll !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-overflow-y-auto-xl {
+    overflow-y: auto !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-overflow-y-hidden-xl {
+    overflow-y: hidden !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-overflow-y-visible-xl {
+    overflow-y: visible !important; } }
+
+@media screen and (min-width: 1280px) {
+  .u-overflow-y-scroll-xl {
+    overflow-y: scroll !important; } }
+
 /*
   Functions
 */

diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/helpers/_config.scss b/helpers/_config.scss
@@ -4,9 +4,9 @@ $_VIEWPORT_CLASS_FLAGS: (
     'CLEARFIX': true,
     'DISPLAY': true,
     'FLEX': true,
-    'FLOAT': false,
-    'OVERFLOW': false,
+    'FLOAT': true,
+    'OVERFLOW': true,
     'POSITION': true,
-    'TEXT': false,
+    'TEXT': true,
     'MARGIN_PADDING': true,
 );
diff --git a/helpers/_size.scss b/helpers/_size.scss
@@ -83,7 +83,7 @@ $breakpoint-pairs: (
 }
 
 // TODO: Once we move to dart-sass, look into using content with variables
-@mixin generate-classes-for-viewport($classes, $property, $prefix: '-', $generate-viewports: true) {
+@mixin generate-classes-for-viewport($classes, $property, $prefix: '-', $generate-viewports: '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
 
@@ -93,6 +93,7 @@ $breakpoint-pairs: (
         }
     }
 
+    @debug $generate-viewports;
     @if $generate-viewports == 'true' {
         @each $suffix, $limit in $breakpoint-pairs {
             @each $class in $classes {

diff --git a/src/core/spacing.scss b/src/core/spacing.scss
@@ -69,7 +69,6 @@
     margin-bottom: auto !important;
 }
 
-@debug get-viewport-flag('MARGIN_PADDING');
 @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 {