From 4c93b3f1ce2b2eeeeae725cda8daeb4297dfc608 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 3 Aug 2017 11:49:24 -0400
Subject: [PATCH] Add responsive constrain generator

---
 src/generators/constrain.less | 43 +++++++++++++++++++++++++++++++++++
 src/utilities/constrain.less  | 14 +-----------
 2 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/src/generators/constrain.less b/src/generators/constrain.less
index 4428deb3e..1ec671dfa 100644
--- a/src/generators/constrain.less
+++ b/src/generators/constrain.less
@@ -21,6 +21,49 @@
   .generate-constrain-utilities(@size-variants; @i + 1);
 }
 
+.generate-screen-constrain-utility(@variant; @size; @screen-name; @screen-width) {
+  @media (min-width: @screen-width) {
+    .define-selector(~"@{screen-name}\:constrain-@{variant}"; {
+      max-width: @size;
+      flex-basis: @size;
+    });
+  }
+}
+
+.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 1) {
+  @name: extract(@size-variants, 1);
+  @size: extract(@size-variants, 2);
+
+  .generate-screen-constrain-utility(@name; @size; @screen-name; @screen-width);
+}
+
+.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 2) {
+  @variant: extract(@size-variants, @i);
+  @name: extract(@variant, 1);
+  @size: extract(@variant, 2);
+
+  .generate-screen-constrain-utility(@name; @size; @screen-name; @screen-width);
+  .generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i + 1);
+}
+
+.generate-responsive-constrain-utilities(@size-variants; @screens; @i: 1) when (@i <= length(@screens)) {
+  @screen: extract(@screens, @i);
+  @screen-name: extract(@screen, 1);
+  @screen-width: extract(@screen, 2);
+
+  .generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width);
+  .generate-responsive-constrain-utilities(@size-variants; @screens; @i + 1);
+}
+
 .define-constrains(@size-variants) {
     .generate-constrain-utilities(@size-variants);
 }
+
+.define-constrains(@size-variants) when (@screens = none) {
+    .generate-constrain-utilities(@size-variants);
+}
+
+.define-constrains(@size-variants; @screens) {
+    .generate-constrain-utilities(@size-variants);
+    .generate-responsive-constrain-utilities(@size-variants; @screens);
+}
diff --git a/src/utilities/constrain.less b/src/utilities/constrain.less
index c78ddc7b1..5a73426ef 100644
--- a/src/utilities/constrain.less
+++ b/src/utilities/constrain.less
@@ -19,16 +19,4 @@
   '4xl' @constrain-4xl,
   '5xl' @constrain-5xl;
 
-.define-constrains(@constrain-scale);
-
-.responsive({
-  &constrain-xs { .constrain-xs; }
-  &constrain-sm { .constrain-sm; }
-  &constrain-md { .constrain-md; }
-  &constrain-lg { .constrain-lg; }
-  &constrain-xl { .constrain-xl; }
-  &constrain-2xl { .constrain-2xl; }
-  &constrain-3xl { .constrain-3xl; }
-  &constrain-4xl { .constrain-4xl; }
-  &constrain-5xl { .constrain-5xl; }
-});
+.define-constrains(@constrain-scale; @screens);