From 17b81b41509d7a5bb310f579d8eb652a47f622af Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 1 Sep 2022 12:15:23 -0400
Subject: [PATCH] Allow negating utilities using min/max/clamp (#9237)

* Allow negating utilities using min/max/clamp

* Update changelog
---
 CHANGELOG.md                  |  1 +
 src/util/negateValue.js       | 12 ++++++++++--
 tests/negative-prefix.test.js | 36 +++++++++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e611a5b90219..fd358b6073f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add a standalone CLI build for 32-bit Linux on ARM (`node16-linux-armv7`) ([#9084](https://github.com/tailwindlabs/tailwindcss/pull/9084))
 - Add future flag to disable color opacity utility plugins ([#9088](https://github.com/tailwindlabs/tailwindcss/pull/9088))
 - Add negative value support for `outline-offset` ([#9136](https://github.com/tailwindlabs/tailwindcss/pull/9136))
+- Allow negating utilities using min/max/clamp ([#9237](https://github.com/tailwindlabs/tailwindcss/pull/9237))
 
 ### Fixed
 
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..09b6d3ed0ece 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>` }],