Add support for negative values in safelist patterns (#6480)

Co-authored-by: Simon Jarrett <simon.jarrett@churchmissionsociety.org>

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
 

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]
 

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;
+      }
+    `)
+  })
+})