From a7263a8f6faf989cb98553491d5c456d0b86de9b Mon Sep 17 00:00:00 2001
From: Simon J <mwnciau@gmail.com>
Date: Tue, 14 Dec 2021 20:55:26 +0000
Subject: [PATCH] Add support for negative values in safelist patterns (#6480)

Co-authored-by: Simon Jarrett <simon.jarrett@churchmissionsociety.org>
---
 CHANGELOG.md                 |  1 +
 src/lib/setupContextUtils.js | 10 +++++++++-
 tests/safelist.test.js       | 28 ++++++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dec84f35f096..bb356468d1ef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Don't output unparsable values ([#6469](https://github.com/tailwindlabs/tailwindcss/pull/6469))
 - Fix text decoration utilities from overriding the new text decoration color/style/thickness utilities when used with a modifier ([#6378](https://github.com/tailwindlabs/tailwindcss/pull/6378))
 - Move defaults to their own always-on layer ([#6500](https://github.com/tailwindlabs/tailwindcss/pull/6500))
+- Support negative values in safelist patterns ([6480](https://github.com/tailwindlabs/tailwindcss/pull/6480))
 
 ## [3.0.2] - 2021-12-13
 
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index 721bd738a47c..b51b77477bc4 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -651,7 +651,15 @@ function registerPlugins(plugins, context) {
         let utils = Array.isArray(util)
           ? (() => {
               let [utilName, options] = util
-              return Object.keys(options?.values ?? {}).map((value) => formatClass(utilName, value))
+              let classes = Object.keys(options?.values ?? {}).map((value) =>
+                formatClass(utilName, value)
+              )
+
+              if (options?.supportsNegativeValues) {
+                classes = [...classes, ...classes.map((cls) => '-' + cls)]
+              }
+
+              return classes
             })()
           : [util]
 
diff --git a/tests/safelist.test.js b/tests/safelist.test.js
index 5726274ad66d..d81a6b796ae4 100644
--- a/tests/safelist.test.js
+++ b/tests/safelist.test.js
@@ -194,3 +194,31 @@ it('should not safelist when an sparse/holey list is provided', () => {
     `)
   })
 })
+
+it('should safelist negatives based on a pattern regex', () => {
+  let config = {
+    content: [{ raw: html`<div class="uppercase"></div>` }],
+    safelist: [
+      {
+        pattern: /^-top-1$/,
+        variants: ['hover'],
+      },
+    ],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchCss(css`
+      .-top-1 {
+        top: -0.25rem;
+      }
+
+      .uppercase {
+        text-transform: uppercase;
+      }
+
+      .hover\:-top-1:hover {
+        top: -0.25rem;
+      }
+    `)
+  })
+})