Support dynamic negation of DEFAULT values (#5718)

Author: bradlc

src/lib/generateRules.js

@@ -185,6 +185,10 @@ function* resolveMatchedPlugins(classCandidate, context) {
     candidatePrefix = twConfigPrefix + candidatePrefix.slice(twConfigPrefixLen + 1)
   }
 
+  if (negative && context.candidateRuleMap.has(candidatePrefix)) {
+    yield [context.candidateRuleMap.get(candidatePrefix), '-DEFAULT']
+  }
+
   for (let [prefix, modifier] of candidatePermutations(candidatePrefix)) {
     if (context.candidateRuleMap.has(prefix)) {
       yield [context.candidateRuleMap.get(prefix), negative ? `-${modifier}` : modifier]
@@ -238,7 +242,7 @@ function* resolveMatches(candidate, context) {
         }
       }
       // Only process static plugins on exact matches
-      else if (modifier === 'DEFAULT') {
+      else if (modifier === 'DEFAULT' || modifier === '-DEFAULT') {
         let ruleSet = plugin
         let [rules, options] = parseRules(ruleSet, context.postCssNodeCache)
         for (let rule of rules) {

src/util/nameClass.js

@@ -14,7 +14,7 @@ export function formatClass(classPrefix, key) {
     return classPrefix
   }
 
-  if (key === '-') {
+  if (key === '-' || key === '-DEFAULT') {
     return `-${classPrefix}`
   }
 

tests/negative-prefix.test.js

@@ -254,6 +254,49 @@ test('negating a default value', () => {
   })
 })
 
+test('using a negative prefix with a negative default scale value', () => {
+  let config = {
+    content: [{ raw: html`<div class="mt -mt"></div>` }],
+    theme: {
+      margin: {
+        DEFAULT: '8px',
+        '-DEFAULT': '-4px',
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchCss(css`
+      .mt {
+        margin-top: 8px;
+      }
+      .-mt {
+        margin-top: -4px;
+      }
+    `)
+  })
+})
+
+test('negating a default value with a configured prefix', () => {
+  let config = {
+    prefix: 'tw-',
+    content: [{ raw: html`<div class="tw--mt"></div>` }],
+    theme: {
+      margin: {
+        DEFAULT: '15px',
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchCss(css`
+      .tw--mt {
+        margin-top: -15px;
+      }
+    `)
+  })
+})
+
 test('arbitrary value keywords should be ignored', () => {
   let config = {
     content: [{ raw: html`<div class="-mt-[auto]"></div>` }],