Add modifiers to context.getClassList result

src/lib/setupContextUtils.js

@@ -951,15 +951,24 @@ function registerPlugins(plugins, context) {
         let [utilName, options] = util
         let negativeClasses = []
 
+        let modifiers = Object.keys(options?.modifiers ?? {})
+
+        if (options?.types?.some(({ type }) => type === 'color')) {
+          modifiers.push(...Object.keys(context.tailwindConfig.theme.opacity ?? {}))
+        }
+
         for (let [key, value] of Object.entries(options?.values ?? {})) {
           // Ignore undefined and null values
           if (value == null) {
             continue
           }
 
-          output.push(formatClass(utilName, key))
+          let cls = formatClass(utilName, key)
+          output.push(modifiers.length > 0 ? [cls, { modifiers }] : cls)
+
           if (options?.supportsNegativeValues && negateValue(value)) {
-            negativeClasses.push(formatClass(utilName, `-${key}`))
+            let cls = formatClass(utilName, `-${key}`)
+            negativeClasses.push(modifiers.length > 0 ? [cls, { modifiers }] : cls)
           }
         }
 

tests/getClassList.test.js

@@ -1,4 +1,5 @@
 import resolveConfig from '../src/public/resolve-config'
+import plugin from '../src/public/create-plugin'
 import { createContext } from '../src/lib/setupContextUtils'
 
 it('should generate every possible class, without variants', () => {
@@ -68,6 +69,82 @@ it('should not generate utilities with opacity by default', () => {
   expect(classes).not.toContain('bg-red-500/50')
 })
 
+it('should generate utilities with modifier data', () => {
+  let config = {}
+  let context = createContext(resolveConfig(config))
+  let classes = context.getClassList()
+
+  expect(classes).toContainEqual([
+    'bg-red-500',
+    {
+      modifiers: [
+        '0',
+        '5',
+        '10',
+        '20',
+        '25',
+        '30',
+        '40',
+        '50',
+        '60',
+        '70',
+        '75',
+        '80',
+        '90',
+        '95',
+        '100',
+      ],
+    },
+  ])
+  expect(classes).toContainEqual([
+    'text-2xl',
+    {
+      modifiers: [
+        '3',
+        '4',
+        '5',
+        '6',
+        '7',
+        '8',
+        '9',
+        '10',
+        'none',
+        'tight',
+        'snug',
+        'normal',
+        'relaxed',
+        'loose',
+      ],
+    },
+  ])
+})
+
+it('should generate plugin-defined utilities with modifier data', () => {
+  let config = {
+    plugins: [
+      plugin(function ({ matchUtilities }) {
+        matchUtilities(
+          {
+            foo: (value, { modifier }) => {
+              return { color: `rgb(${value} / ${modifier ?? 1})` }
+            },
+          },
+          { values: { red: '255 0 0' }, modifiers: { bar: '0' } }
+        )
+      }),
+    ],
+  }
+  let context = createContext(resolveConfig(config))
+  let classes = context.getClassList()
+
+  expect(classes).toContainEqual([
+    'foo-red',
+    {
+      modifiers: ['bar'],
+    },
+  ])
+})
+
 it('should not generate utilities with opacity even if safe-listed', () => {
   let config = {
     safelist: [
@@ -114,6 +191,26 @@ it('should not generate utilities that are set to undefined or null to so that t
   expect(classes).not.toContain('bg-blue-100') // Blue.100 is `null`
   expect(classes).not.toContain('bg-blue-200') // Blue.200 is `undefined`
 
-  expect(classes).toContain('bg-blue-50')
-  expect(classes).toContain('bg-blue-300')
+  expect(classes).toContainEqual([
+    'bg-blue-50',
+    {
+      modifiers: [
+        '0',
+        '5',
+        '10',
+        '20',
+        '25',
+        '30',
+        '40',
+        '50',
+        '60',
+        '70',
+        '75',
+        '80',
+        '90',
+        '95',
+        '100',
+      ],
+    },
+  ])
 })