Add dynamic negative value opt-in (#5713)

* Add `supportsNegativeValues` plugin option

* Update `getClassList` to support dynamic negative values

* Add test for using a negative scale value with a plugin that does not support dynamic negative values

Author: bradlc

src/corePlugins.js

@@ -529,19 +529,23 @@ export let corePlugins = {
     })
   },
 
-  inset: createUtilityPlugin('inset', [
-    ['inset', ['top', 'right', 'bottom', 'left']],
+  inset: createUtilityPlugin(
+    'inset',
     [
-      ['inset-x', ['left', 'right']],
-      ['inset-y', ['top', 'bottom']],
-    ],
-    [
-      ['top', ['top']],
-      ['right', ['right']],
-      ['bottom', ['bottom']],
-      ['left', ['left']],
+      ['inset', ['top', 'right', 'bottom', 'left']],
+      [
+        ['inset-x', ['left', 'right']],
+        ['inset-y', ['top', 'bottom']],
+      ],
+      [
+        ['top', ['top']],
+        ['right', ['right']],
+        ['bottom', ['bottom']],
+        ['left', ['left']],
+      ],
     ],
-  ]),
+    { supportsNegativeValues: true }
+  ),
 
   isolation: ({ addUtilities }) => {
     addUtilities({
@@ -550,8 +554,8 @@ export let corePlugins = {
     })
   },
 
-  zIndex: createUtilityPlugin('zIndex', [['z', ['zIndex']]]),
-  order: createUtilityPlugin('order'),
+  zIndex: createUtilityPlugin('zIndex', [['z', ['zIndex']]], { supportsNegativeValues: true }),
+  order: createUtilityPlugin('order', undefined, { supportsNegativeValues: true }),
   gridColumn: createUtilityPlugin('gridColumn', [['col', ['gridColumn']]]),
   gridColumnStart: createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]]),
   gridColumnEnd: createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]]),
@@ -576,19 +580,23 @@ export let corePlugins = {
     })
   },
 
-  margin: createUtilityPlugin('margin', [
-    ['m', ['margin']],
-    [
-      ['mx', ['margin-left', 'margin-right']],
-      ['my', ['margin-top', 'margin-bottom']],
-    ],
+  margin: createUtilityPlugin(
+    'margin',
     [
-      ['mt', ['margin-top']],
-      ['mr', ['margin-right']],
-      ['mb', ['margin-bottom']],
-      ['ml', ['margin-left']],
+      ['m', ['margin']],
+      [
+        ['mx', ['margin-left', 'margin-right']],
+        ['my', ['margin-top', 'margin-bottom']],
+      ],
+      [
+        ['mt', ['margin-top']],
+        ['mr', ['margin-right']],
+        ['mb', ['margin-bottom']],
+        ['ml', ['margin-left']],
+      ],
     ],
-  ]),
+    { supportsNegativeValues: true }
+  ),
 
   boxSizing: ({ addUtilities }) => {
     addUtilities({
@@ -653,33 +661,48 @@ export let corePlugins = {
   },
 
   transformOrigin: createUtilityPlugin('transformOrigin', [['origin', ['transformOrigin']]]),
-  translate: createUtilityPlugin('translate', [
+  translate: createUtilityPlugin(
+    'translate',
     [
       [
-        'translate-x',
-        [['@defaults transform', {}], '--tw-translate-x', ['transform', 'var(--tw-transform)']],
-      ],
-      [
-        'translate-y',
-        [['@defaults transform', {}], '--tw-translate-y', ['transform', 'var(--tw-transform)']],
+        [
+          'translate-x',
+          [['@defaults transform', {}], '--tw-translate-x', ['transform', 'var(--tw-transform)']],
+        ],
+        [
+          'translate-y',
+          [['@defaults transform', {}], '--tw-translate-y', ['transform', 'var(--tw-transform)']],
+        ],
       ],
     ],
-  ]),
-  rotate: createUtilityPlugin('rotate', [
-    ['rotate', [['@defaults transform', {}], '--tw-rotate', ['transform', 'var(--tw-transform)']]],
-  ]),
-  skew: createUtilityPlugin('skew', [
+    { supportsNegativeValues: true }
+  ),
+  rotate: createUtilityPlugin(
+    'rotate',
     [
       [
-        'skew-x',
-        [['@defaults transform', {}], '--tw-skew-x', ['transform', 'var(--tw-transform)']],
+        'rotate',
+        [['@defaults transform', {}], '--tw-rotate', ['transform', 'var(--tw-transform)']],
       ],
+    ],
+    { supportsNegativeValues: true }
+  ),
+  skew: createUtilityPlugin(
+    'skew',
+    [
       [
-        'skew-y',
-        [['@defaults transform', {}], '--tw-skew-y', ['transform', 'var(--tw-transform)']],
+        [
+          'skew-x',
+          [['@defaults transform', {}], '--tw-skew-x', ['transform', 'var(--tw-transform)']],
+        ],
+        [
+          'skew-y',
+          [['@defaults transform', {}], '--tw-skew-y', ['transform', 'var(--tw-transform)']],
+        ],
       ],
     ],
-  ]),
+    { supportsNegativeValues: true }
+  ),
   scale: createUtilityPlugin('scale', [
     [
       'scale',
@@ -859,19 +882,23 @@ export let corePlugins = {
     })
   },
 
-  scrollMargin: createUtilityPlugin('scrollMargin', [
-    ['scroll-m', ['scroll-margin']],
-    [
-      ['scroll-mx', ['scroll-margin-left', 'scroll-margin-right']],
-      ['scroll-my', ['scroll-margin-top', 'scroll-margin-bottom']],
-    ],
+  scrollMargin: createUtilityPlugin(
+    'scrollMargin',
     [
-      ['scroll-mt', ['scroll-margin-top']],
-      ['scroll-mr', ['scroll-margin-right']],
-      ['scroll-mb', ['scroll-margin-bottom']],
-      ['scroll-ml', ['scroll-margin-left']],
+      ['scroll-m', ['scroll-margin']],
+      [
+        ['scroll-mx', ['scroll-margin-left', 'scroll-margin-right']],
+        ['scroll-my', ['scroll-margin-top', 'scroll-margin-bottom']],
+      ],
+      [
+        ['scroll-mt', ['scroll-margin-top']],
+        ['scroll-mr', ['scroll-margin-right']],
+        ['scroll-mb', ['scroll-margin-bottom']],
+        ['scroll-ml', ['scroll-margin-left']],
+      ],
     ],
-  ]),
+    { supportsNegativeValues: true }
+  ),
 
   scrollPadding: createUtilityPlugin('scrollPadding', [
     ['scroll-p', ['scroll-padding']],
@@ -1069,7 +1096,7 @@ export let corePlugins = {
           }
         },
       },
-      { values: theme('space') }
+      { values: theme('space'), supportsNegativeValues: true }
     )
 
     addUtilities({
@@ -1641,7 +1668,9 @@ export let corePlugins = {
     })
   },
 
-  textIndent: createUtilityPlugin('textIndent', [['indent', ['text-indent']]]),
+  textIndent: createUtilityPlugin('textIndent', [['indent', ['text-indent']]], {
+    supportsNegativeValues: true,
+  }),
 
   verticalAlign: ({ addUtilities, matchUtilities }) => {
     addUtilities({
@@ -1730,7 +1759,9 @@ export let corePlugins = {
   },
 
   lineHeight: createUtilityPlugin('lineHeight', [['leading', ['lineHeight']]]),
-  letterSpacing: createUtilityPlugin('letterSpacing', [['tracking', ['letterSpacing']]]),
+  letterSpacing: createUtilityPlugin('letterSpacing', [['tracking', ['letterSpacing']]], {
+    supportsNegativeValues: true,
+  }),
 
   textColor: ({ matchUtilities, theme, corePlugins }) => {
     matchUtilities(
@@ -2099,7 +2130,7 @@ export let corePlugins = {
           }
         },
       },
-      { values: theme('hueRotate') }
+      { values: theme('hueRotate'), supportsNegativeValues: true }
     )
   },
 
@@ -2250,7 +2281,7 @@ export let corePlugins = {
           }
         },
       },
-      { values: theme('backdropHueRotate') }
+      { values: theme('backdropHueRotate'), supportsNegativeValues: true }
     )
   },
 

src/lib/setupContextUtils.js

@@ -17,6 +17,7 @@ import * as sharedState from './sharedState'
 import { env } from './sharedState'
 import { toPath } from '../util/toPath'
 import log from '../util/log'
+import negateValue from '../util/negateValue'
 
 function insertInto(list, value, { before = [] } = {}) {
   before = [].concat(before)
@@ -300,7 +301,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         function wrapped(modifier, { isOnlyPlugin }) {
           let { type = 'any' } = options
           type = [].concat(type)
-          let [value, coercedType] = coerceValue(type, modifier, options.values, tailwindConfig)
+          let [value, coercedType] = coerceValue(type, modifier, options, tailwindConfig)
 
           if (value === undefined) {
             return []
@@ -352,7 +353,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         function wrapped(modifier, { isOnlyPlugin }) {
           let { type = 'any' } = options
           type = [].concat(type)
-          let [value, coercedType] = coerceValue(type, modifier, options.values, tailwindConfig)
+          let [value, coercedType] = coerceValue(type, modifier, options, tailwindConfig)
 
           if (value === undefined) {
             return []
@@ -670,10 +671,16 @@ function registerPlugins(plugins, context) {
     for (let util of classList) {
       if (Array.isArray(util)) {
         let [utilName, options] = util
+        let negativeClasses = []
 
-        for (let value of Object.keys(options?.values ?? {})) {
-          output.push(formatClass(utilName, value))
+        for (let [key, value] of Object.entries(options?.values ?? {})) {
+          output.push(formatClass(utilName, key))
+          if (options?.supportsNegativeValues && negateValue(value)) {
+            negativeClasses.push(formatClass(utilName, `-${key}`))
+          }
         }
+
+        output.push(...negativeClasses)
       } else {
         output.push(util)
       }

src/util/createUtilityPlugin.js

@@ -3,7 +3,7 @@ import transformThemeValue from './transformThemeValue'
 export default function createUtilityPlugin(
   themeKey,
   utilityVariations = [[themeKey, [themeKey]]],
-  { filterDefault = false, type = 'any' } = {}
+  { filterDefault = false, ...options } = {}
 ) {
   let transformValue = transformThemeValue(themeKey)
   return function ({ matchUtilities, theme }) {
@@ -24,12 +24,12 @@ export default function createUtilityPlugin(
           })
         }, {}),
         {
+          ...options,
           values: filterDefault
             ? Object.fromEntries(
                 Object.entries(theme(themeKey) ?? {}).filter(([modifier]) => modifier !== 'DEFAULT')
               )
             : theme(themeKey),
-          type,
         }
       )
     }

src/util/pluginUtils.js

@@ -182,7 +182,7 @@ function resolveArbitraryValue(modifier, validate) {
   return normalize(value)
 }
 
-function asNegativeValue(modifier, lookup, validate) {
+function asNegativeValue(modifier, lookup = {}, validate) {
   let positiveValue = lookup[modifier]
 
   if (positiveValue !== undefined) {
@@ -200,15 +200,15 @@ function asNegativeValue(modifier, lookup, validate) {
   }
 }
 
-export function asValue(modifier, lookup = {}, { validate = () => true } = {}) {
-  let value = lookup[modifier]
+export function asValue(modifier, options = {}, { validate = () => true } = {}) {
+  let value = options.values?.[modifier]
 
   if (value !== undefined) {
     return value
   }
 
-  if (modifier.startsWith('-')) {
-    return asNegativeValue(modifier.slice(1), lookup, validate)
+  if (options.supportsNegativeValues && modifier.startsWith('-')) {
+    return asNegativeValue(modifier.slice(1), options.values, validate)
   }
 
   return resolveArbitraryValue(modifier, validate)
@@ -228,16 +228,16 @@ function splitAlpha(modifier) {
   return [modifier.slice(0, slashIdx), modifier.slice(slashIdx + 1)]
 }
 
-export function asColor(modifier, lookup = {}, tailwindConfig = {}) {
-  if (lookup[modifier] !== undefined) {
-    return lookup[modifier]
+export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
+  if (options.values?.[modifier] !== undefined) {
+    return options.values?.[modifier]
   }
 
   let [color, alpha] = splitAlpha(modifier)
 
   if (alpha !== undefined) {
     let normalizedColor =
-      lookup[color] ?? (isArbitraryValue(color) ? color.slice(1, -1) : undefined)
+      options.values?.[color] ?? (isArbitraryValue(color) ? color.slice(1, -1) : undefined)
 
     if (normalizedColor === undefined) {
       return undefined
@@ -254,16 +254,16 @@ export function asColor(modifier, lookup = {}, tailwindConfig = {}) {
     return withAlphaValue(normalizedColor, tailwindConfig.theme.opacity[alpha])
   }
 
-  return asValue(modifier, lookup, { validate: validateColor })
+  return asValue(modifier, options, { validate: validateColor })
 }
 
-export function asLookupValue(modifier, lookup = {}) {
-  return lookup[modifier]
+export function asLookupValue(modifier, options = {}) {
+  return options.values?.[modifier]
 }
 
 function guess(validate) {
-  return (modifier, lookup) => {
-    return asValue(modifier, lookup, { validate })
+  return (modifier, options) => {
+    return asValue(modifier, options, { validate })
   }
 }
 
@@ -292,7 +292,7 @@ function splitAtFirst(input, delim) {
   return [input.slice(0, idx), input.slice(idx + 1)]
 }
 
-export function coerceValue(types, modifier, values, tailwindConfig) {
+export function coerceValue(types, modifier, options, tailwindConfig) {
   if (isArbitraryValue(modifier)) {
     let [explicitType, value] = splitAtFirst(modifier.slice(1, -1), ':')
 
@@ -301,13 +301,13 @@ export function coerceValue(types, modifier, values, tailwindConfig) {
     }
 
     if (value.length > 0 && supportedTypes.includes(explicitType)) {
-      return [asValue(`[${value}]`, values, tailwindConfig), explicitType]
+      return [asValue(`[${value}]`, options), explicitType]
     }
   }
 
   // Find first matching type
   for (let type of [].concat(types)) {
-    let result = typeMap[type](modifier, values, tailwindConfig)
+    let result = typeMap[type](modifier, options, { tailwindConfig })
     if (result) return [result, type]
   }