Feature flag matchVariant API

src/featureFlags.js

@@ -7,7 +7,7 @@ let defaults = {
 
 let featureFlags = {
   future: ['hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity'],
-  experimental: ['optimizeUniversalDefaults', 'variantGrouping'],
+  experimental: ['optimizeUniversalDefaults', 'variantGrouping', 'matchVariant'],
 }
 
 export function flagEnabled(config, flag) {

src/lib/setupContextUtils.js

@@ -4,6 +4,7 @@ import postcss from 'postcss'
 import dlv from 'dlv'
 import selectorParser from 'postcss-selector-parser'
 
+import { flagEnabled } from '../featureFlags.js'
 import transformThemeValue from '../util/transformThemeValue'
 import parseObjectStyles from '../util/parseObjectStyles'
 import prefixSelector from '../util/prefixSelector'
@@ -484,7 +485,10 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
       insertInto(variantList, variantName, options)
       variantMap.set(variantName, variantFunctions)
     },
-    matchVariant: function (variants, options) {
+  }
+
+  if (flagEnabled(tailwindConfig, 'matchVariant')) {
+    api.matchVariant = function (variants, options) {
       for (let variant in variants) {
         for (let [k, v] of Object.entries(options?.values ?? {})) {
           api.addVariant(`${variant}-${k}`, variants[variant](v))
@@ -496,7 +500,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
           options
         )
       }
-    },
+    }
   }
 
   return api

tests/match-variants.test.js

@@ -2,6 +2,7 @@ import { run, html, css } from './util/run'
 
 test('partial arbitrary variants', () => {
   let config = {
+    experimental: { matchVariant: true },
     content: [
       {
         raw: html`<div class="potato-[yellow]:bg-yellow-200 potato-[baked]:w-3"></div> `,
@@ -37,6 +38,7 @@ test('partial arbitrary variants', () => {
 
 test('partial arbitrary variants with at-rules', () => {
   let config = {
+    experimental: { matchVariant: true },
     content: [
       {
         raw: html`<div class="potato-[yellow]:bg-yellow-200 potato-[baked]:w-3"></div> `,
@@ -75,6 +77,7 @@ test('partial arbitrary variants with at-rules', () => {
 
 test('partial arbitrary variants with at-rules and placeholder', () => {
   let config = {
+    experimental: { matchVariant: true },
     content: [
       {
         raw: html`<div class="potato-[yellow]:bg-yellow-200 potato-[baked]:w-3"></div> `,
@@ -113,6 +116,7 @@ test('partial arbitrary variants with at-rules and placeholder', () => {
 
 test('partial arbitrary variants with default values', () => {
   let config = {
+    experimental: { matchVariant: true },
     content: [
       {
         raw: html`<div class="tooltip-bottom:mt-2 tooltip-top:mb-2"></div>`,
@@ -155,6 +159,7 @@ test('partial arbitrary variants with default values', () => {
 
 test('matched variant values maintain the sort order they are registered in', () => {
   let config = {
+    experimental: { matchVariant: true },
     content: [
       {
         raw: html`<div
@@ -209,6 +214,7 @@ test('matched variant values maintain the sort order they are registered in', ()
 
 test('matchVariant can return an array of format strings from the function', () => {
   let config = {
+    experimental: { matchVariant: true },
     content: [
       {
         raw: html`<div class="test-[a,b,c]:underline"></div>`,