Add generalized modifier support to matchUtilities

CHANGELOG.md

@@ -26,6 +26,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added 'place-items-baseline' utility ([#9507](https://github.com/tailwindlabs/tailwindcss/pull/9507))
 - Added 'content-baseline' utility ([#9507](https://github.com/tailwindlabs/tailwindcss/pull/9507))
 - Prepare for container queries setup ([#9526](https://github.com/tailwindlabs/tailwindcss/pull/9526))
+- Add support for modifiers to `matchUtilities` ([#9541](https://github.com/tailwindlabs/tailwindcss/pull/9541))
+- Switch to positional argument + object for modifiers ([#9541](https://github.com/tailwindlabs/tailwindcss/pull/9541))
 
 ### Fixed
 

src/corePlugins.js

@@ -144,28 +144,27 @@ export let variantPlugins = {
     }
 
     let variants = {
-      group: ({ modifier }) =>
+      group: (_, { modifier }) =>
         modifier ? [`:merge(.group\\/${modifier})`, ' &'] : [`:merge(.group)`, ' &'],
-      peer: ({ modifier }) =>
+      peer: (_, { modifier }) =>
         modifier ? [`:merge(.peer\\/${modifier})`, ' ~ &'] : [`:merge(.peer)`, ' ~ &'],
     }
 
     for (let [name, fn] of Object.entries(variants)) {
       matchVariant(
         name,
-        (ctx = {}) => {
-          let { modifier, value = '' } = ctx
-          if (modifier) {
+        (value = '', extra) => {
+          if (extra.modifier) {
             log.warn(`modifier-${name}-experimental`, [
               `The ${name} variant modifier feature in Tailwind CSS is currently in preview.`,
               'Preview features are not covered by semver, and may be improved in breaking ways at any time.',
             ])
           }
 
-          let result = normalize(typeof value === 'function' ? value(ctx) : value)
+          let result = normalize(typeof value === 'function' ? value(extra) : value)
           if (!result.includes('&')) result = '&' + result
 
-          let [a, b] = fn({ modifier })
+          let [a, b] = fn('', extra)
           return result.replace(/&(\S+)?/g, (_, pseudo = '') => a + pseudo + b)
         },
         { values: Object.fromEntries(pseudoVariants) }
@@ -232,7 +231,7 @@ export let variantPlugins = {
   supportsVariants: ({ matchVariant, theme }) => {
     matchVariant(
       'supports',
-      ({ value = '' }) => {
+      (value = '') => {
         let check = normalize(value)
         let isRaw = /^\w*\s*\(/.test(check)
 

src/featureFlags.js

@@ -14,6 +14,7 @@ let featureFlags = {
   ],
   experimental: [
     'optimizeUniversalDefaults',
+    'generalizedModifiers',
     // 'variantGrouping',
   ],
 }

src/lib/generateRules.js

@@ -3,7 +3,7 @@ import selectorParser from 'postcss-selector-parser'
 import parseObjectStyles from '../util/parseObjectStyles'
 import isPlainObject from '../util/isPlainObject'
 import prefixSelector from '../util/prefixSelector'
-import { updateAllClasses, typeMap } from '../util/pluginUtils'
+import { updateAllClasses, getMatchingTypes } from '../util/pluginUtils'
 import log from '../util/log'
 import * as sharedState from './sharedState'
 import { formatVariantSelector, finalizeSelector } from '../util/formatVariantSelector'
@@ -34,13 +34,24 @@ function* candidatePermutations(candidate) {
 
   while (lastIndex >= 0) {
     let dashIdx
+    let wasSlash = false
 
     if (lastIndex === Infinity && candidate.endsWith(']')) {
       let bracketIdx = candidate.indexOf('[')
 
       // If character before `[` isn't a dash or a slash, this isn't a dynamic class
       // eg. string[]
-      dashIdx = ['-', '/'].includes(candidate[bracketIdx - 1]) ? bracketIdx - 1 : -1
+      if (candidate[bracketIdx - 1] === '-') {
+        dashIdx = bracketIdx - 1
+      } else if (candidate[bracketIdx - 1] === '/') {
+        dashIdx = bracketIdx - 1
+        wasSlash = true
+      } else {
+        dashIdx = -1
+      }
+    } else if (lastIndex === Infinity && candidate.includes('/')) {
+      dashIdx = candidate.lastIndexOf('/')
+      wasSlash = true
     } else {
       dashIdx = candidate.lastIndexOf('-', lastIndex)
     }
@@ -50,11 +61,16 @@ function* candidatePermutations(candidate) {
     }
 
     let prefix = candidate.slice(0, dashIdx)
-    let modifier = candidate.slice(dashIdx + 1)
-
-    yield [prefix, modifier]
+    let modifier = candidate.slice(wasSlash ? dashIdx : dashIdx + 1)
 
     lastIndex = dashIdx - 1
+
+    // TODO: This feels a bit hacky
+    if (prefix === '' || modifier === '/') {
+      continue
+    }
+
+    yield [prefix, modifier]
   }
 }
 
@@ -137,6 +153,10 @@ function applyVariant(variant, matches, context) {
     if (match) {
       variant = match[1]
       args.modifier = match[2]
+
+      if (!flagEnabled(context.tailwindConfig, 'generalizedModifiers')) {
+        return []
+      }
     }
   }
 
@@ -552,16 +572,14 @@ function* resolveMatches(candidate, context, original = candidate) {
       }
 
       if (matchesPerPlugin.length > 0) {
-        let matchingTypes = (sort.options?.types ?? [])
-          .map(({ type }) => type)
-          // Only track the types for this plugin that resulted in some result
-          .filter((type) => {
-            return Boolean(
-              typeMap[type](modifier, sort.options, {
-                tailwindConfig: context.tailwindConfig,
-              })
-            )
-          })
+        let matchingTypes = Array.from(
+          getMatchingTypes(
+            sort.options?.types ?? [],
+            modifier,
+            sort.options ?? {},
+            context.tailwindConfig
+          )
+        ).map(([_, type]) => type)
 
         if (matchingTypes.length > 0) {
           typesByMatches.set(matchesPerPlugin, matchingTypes)

src/lib/setupContextUtils.js

@@ -21,6 +21,7 @@ import isValidArbitraryValue from '../util/isValidArbitraryValue'
 import { generateRules } from './generateRules'
 import { hasContentChanged } from './cacheInvalidation.js'
 import { Offsets } from './offsets.js'
+import { flagEnabled } from '../featureFlags.js'
 
 let MATCH_VARIANT = Symbol()
 
@@ -358,6 +359,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
       let defaultOptions = {
         respectPrefix: true,
         respectImportant: true,
+        modifiers: false,
       }
 
       options = normalizeOptionTypes({ ...defaultOptions, ...options })
@@ -371,7 +373,12 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         classList.add([prefixedIdentifier, options])
 
         function wrapped(modifier, { isOnlyPlugin }) {
-          let [value, coercedType] = coerceValue(options.types, modifier, options, tailwindConfig)
+          let [value, coercedType, utilityModifier] = coerceValue(
+            options.types,
+            modifier,
+            options,
+            tailwindConfig
+          )
 
           if (value === undefined) {
             return []
@@ -395,8 +402,22 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
             return []
           }
 
+          let extras = {
+            get modifier() {
+              if (!options.modifiers) {
+                log.warn(`modifier-used-without-options-for-${identifier}`, [
+                  'Your plugin must set `modifiers: true` in its options to support modifiers.',
+                ])
+              }
+
+              return utilityModifier
+            },
+          }
+
+          let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
+
           let ruleSets = []
-            .concat(rule(value))
+            .concat(modifiersEnabled ? rule(value, extras) : rule(value))
             .filter(Boolean)
             .map((declaration) => ({
               [nameClass(identifier, modifier)]: declaration,
@@ -418,6 +439,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
       let defaultOptions = {
         respectPrefix: true,
         respectImportant: false,
+        modifiers: false,
       }
 
       options = normalizeOptionTypes({ ...defaultOptions, ...options })
@@ -431,7 +453,12 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         classList.add([prefixedIdentifier, options])
 
         function wrapped(modifier, { isOnlyPlugin }) {
-          let [value, coercedType] = coerceValue(options.types, modifier, options, tailwindConfig)
+          let [value, coercedType, utilityModifier] = coerceValue(
+            options.types,
+            modifier,
+            options,
+            tailwindConfig
+          )
 
           if (value === undefined) {
             return []
@@ -455,8 +482,22 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
             return []
           }
 
+          let extras = {
+            get modifier() {
+              if (!options.modifiers) {
+                log.warn(`modifier-used-without-options-for-${identifier}`, [
+                  'Your plugin must set `modifiers: true` in its options to support modifiers.',
+                ])
+              }
+
+              return utilityModifier
+            },
+          }
+
+          let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
+
           let ruleSets = []
-            .concat(rule(value))
+            .concat(modifiersEnabled ? rule(value, extras) : rule(value))
             .filter(Boolean)
             .map((declaration) => ({
               [nameClass(identifier, modifier)]: declaration,
@@ -522,21 +563,37 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
       let id = ++variantIdentifier // A unique identifier that "groups" these variables together.
       let isSpecial = variant === '@'
 
+      let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
+
       for (let [key, value] of Object.entries(options?.values ?? {})) {
         api.addVariant(
           isSpecial ? `${variant}${key}` : `${variant}-${key}`,
-          Object.assign(({ args, container }) => variantFn({ ...args, container, value }), {
-            [MATCH_VARIANT]: true,
-          }),
+          Object.assign(
+            ({ args, container }) =>
+              variantFn(
+                value,
+                modifiersEnabled ? { modifier: args.modifier, container } : { container }
+              ),
+            {
+              [MATCH_VARIANT]: true,
+            }
+          ),
           { ...options, value, id }
         )
       }
 
       api.addVariant(
         variant,
-        Object.assign(({ args, container }) => variantFn({ ...args, container }), {
-          [MATCH_VARIANT]: true,
-        }),
+        Object.assign(
+          ({ args, container }) =>
+            variantFn(
+              args.value,
+              modifiersEnabled ? { modifier: args.modifier, container } : { container }
+            ),
+          {
+            [MATCH_VARIANT]: true,
+          }
+        ),
         { ...options, id }
       )
     },

src/util/nameClass.js

@@ -22,5 +22,9 @@ export function formatClass(classPrefix, key) {
     return `-${classPrefix}${key}`
   }
 
+  if (key.startsWith('/')) {
+    return `${classPrefix}${key}`
+  }
+
   return `${classPrefix}-${key}`
 }