Feature flag generalized modifiers

We’re putting a flag for modifiers in front of matchVariant and matchUtilities

Author: thecrypticace

src/featureFlags.js

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

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()
 
@@ -410,11 +411,13 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
               }
 
               return utilityModifier
-            }
+            },
           }
 
+          let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
+
           let ruleSets = []
-            .concat(rule(value, extras))
+            .concat(modifiersEnabled ? rule(value, extras) : rule(value))
             .filter(Boolean)
             .map((declaration) => ({
               [nameClass(identifier, modifier)]: declaration,
@@ -488,11 +491,13 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
               }
 
               return utilityModifier
-            }
+            },
           }
 
+          let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
+
           let ruleSets = []
-            .concat(rule(value, extras))
+            .concat(modifiersEnabled ? rule(value, extras) : rule(value))
             .filter(Boolean)
             .map((declaration) => ({
               [nameClass(identifier, modifier)]: declaration,
@@ -558,11 +563,17 @@ 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(value, { modifier: args.modifier, container }),
+            ({ args, container }) =>
+              variantFn(
+                value,
+                modifiersEnabled ? { modifier: args.modifier, container } : { container }
+              ),
             {
               [MATCH_VARIANT]: true,
             }
@@ -574,7 +585,11 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
       api.addVariant(
         variant,
         Object.assign(
-          ({ args, container }) => variantFn(args.value, { modifier: args.modifier, container }),
+          ({ args, container }) =>
+            variantFn(
+              args.value,
+              modifiersEnabled ? { modifier: args.modifier, container } : { container }
+            ),
           {
             [MATCH_VARIANT]: true,
           }

src/util/pluginUtils.js

@@ -19,6 +19,7 @@ import {
 } from './dataTypes'
 import negateValue from './negateValue'
 import { backgroundSize } from './validateFormalSyntax'
+import { flagEnabled } from '../featureFlags.js'
 
 export function updateAllClasses(selectors, updateClass) {
   let parser = selectorParser((selectors) => {
@@ -230,9 +231,12 @@ export function coerceValue(types, modifier, options, tailwindConfig) {
  * @returns {Iterator<[value: string, type: string, modifier: string | null]>}
  */
 export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
-  let canUseUtilityModifier = options.modifiers != null && (
-    options.modifiers === 'any' || typeof options.modifiers === 'object'
-  )
+  let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
+
+  let canUseUtilityModifier =
+    modifiersEnabled &&
+    options.modifiers != null &&
+    (options.modifiers === 'any' || typeof options.modifiers === 'object')
 
   let [modifier, utilityModifier] = canUseUtilityModifier
     ? splitUtilityModifier(rawModifier)

tests/arbitrary-variants.test.js

@@ -107,7 +107,7 @@ test('variants without & or an at-rule are ignored', () => {
 
 test('arbitrary variants are sorted after other variants', () => {
   let config = {
-    content: [{ raw: html`<div class="underline lg:underline [&>*]:underline"></div>` }],
+    content: [{ raw: html`<div class="[&>*]:underline underline lg:underline"></div>` }],
     corePlugins: { preflight: false },
   }
 
@@ -709,6 +709,9 @@ it('should support supports', () => {
 
 it('should be possible to use modifiers and arbitrary groups', () => {
   let config = {
+    experimental: {
+      generalizedModifiers: true,
+    },
     content: [
       {
         raw: html`
@@ -810,6 +813,9 @@ it('should be possible to use modifiers and arbitrary groups', () => {
 
 it('should be possible to use modifiers and arbitrary peers', () => {
   let config = {
+    experimental: {
+      generalizedModifiers: true,
+    },
     content: [
       {
         raw: html`

tests/match-utilities.test.js

@@ -2,6 +2,10 @@ import { run, html, css } from './util/run'
 
 test('match utilities with modifiers', async () => {
   let config = {
+    experimental: {
+      generalizedModifiers: true,
+    },
+
     content: [
       {
         raw: html`<div class="test test/foo test-1/foo test-2/foo test/[foo] test-1/[foo]"></div> `,
@@ -62,6 +66,9 @@ test('match utilities with modifiers', async () => {
 
 test('match utilities with modifiers in the config', async () => {
   let config = {
+    experimental: {
+      generalizedModifiers: true,
+    },
     content: [
       {
         raw: html`<div class="test test/foo test-1/foo test/[bar] test-1/[bar]"></div> `,
@@ -119,6 +126,9 @@ test('match utilities with modifiers in the config', async () => {
 
 test('match utilities can omit utilities by returning null', async () => {
   let config = {
+    experimental: {
+      generalizedModifiers: true,
+    },
     content: [
       {
         raw: html`<div class="test test/good test/bad"></div> `,
@@ -130,9 +140,12 @@ test('match utilities can omit utilities by returning null', async () => {
       ({ matchUtilities, theme }) => {
         matchUtilities(
           {
-            test: (value, { modifier }) => (modifier === 'bad' ? null : {
-              color: `${value}_${modifier}`,
-            }),
+            test: (value, { modifier }) =>
+              modifier === 'bad'
+                ? null
+                : {
+                    color: `${value}_${modifier}`,
+                  },
           },
           {
             values: {