From 0971ee1cff1aed169ec87c885008f682f2263c64 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 1 Sep 2022 12:06:43 -0400
Subject: [PATCH] Allow negating utilities using min/max/clamp

---
 src/util/negateValue.js       | 12 ++++++++++--
 tests/negative-prefix.test.js | 36 +++++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/util/negateValue.js b/src/util/negateValue.js
index 105915e03fbc..8dfbfa358cd6 100644
--- a/src/util/negateValue.js
+++ b/src/util/negateValue.js
@@ -10,7 +10,15 @@ export default function (value) {
     return value.replace(/^[+-]?/, (sign) => (sign === '-' ? '' : '-'))
   }
 
-  if (value.includes('var(') || value.includes('calc(')) {
-    return `calc(${value} * -1)`
+  // What functions we support negating numeric values for
+  // var() isn't inherently a numeric function but we support it anyway
+  // The trigonometric functions are omitted because you'll need to use calc(…) with them _anyway_
+  // to produce generally useful results and that will be covered already
+  let numericFunctions = ['var', 'calc', 'min', 'max', 'clamp']
+
+  for (const fn of numericFunctions) {
+    if (value.includes(`${fn}(`)) {
+      return `calc(${value} * -1)`
+    }
   }
 }
diff --git a/tests/negative-prefix.test.js b/tests/negative-prefix.test.js
index 0b232d073f60..a37c55ab9688 100644
--- a/tests/negative-prefix.test.js
+++ b/tests/negative-prefix.test.js
@@ -146,6 +146,42 @@ test('a value that includes a calc', () => {
   })
 })
 
+test('a value that includes min/max/clamp functions', () => {
+  let config = {
+    content: [{ raw: html`<div class="mt-min -mt-min mt-max -mt-max mt-clamp -mt-clamp"></div>` }],
+    theme: {
+      margin: {
+        'min': 'min(100vmin, 3rem)',
+        'max': 'max(100vmax, 3rem)',
+        'clamp': 'clamp(1rem, 100vh, 3rem)',
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchCss(css`
+      .mt-min {
+        margin-top: min(100vmin, 3rem);
+      }
+      .-mt-min {
+        margin-top: calc(min(100vmin, 3rem) * -1);
+      }
+      .mt-max {
+        margin-top: max(100vmax, 3rem);
+      }
+      .-mt-max {
+        margin-top: calc(max(100vmax, 3rem) * -1);
+      }
+      .mt-clamp {
+        margin-top: clamp(1rem, 100vh, 3rem);
+      }
+      .-mt-clamp {
+        margin-top: calc(clamp(1rem, 100vh, 3rem) * -1);
+      }
+    `)
+  })
+})
+
 test('a keyword value', () => {
   let config = {
     content: [{ raw: html`<div class="-mt-auto mt-auto"></div>` }],