migrate supports-[foo] to supports-foo if we can

Author: RobinMalfait

packages/@tailwindcss-upgrade/src/template/codemods/arbitrary-value-to-bare-value.test.ts

@@ -6,6 +6,9 @@ test.each([
   ['data-[selected]:flex', 'data-selected:flex'],
   ['data-[foo=bar]:flex', 'data-[foo=bar]:flex'],
 
+  ['supports-[gap]:flex', 'supports-gap:flex'],
+  ['supports-[display:grid]:flex', 'supports-[display:grid]:flex'],
+
   ['group-data-[selected]:flex', 'group-data-selected:flex'],
   ['group-data-[foo=bar]:flex', 'group-data-[foo=bar]:flex'],
   ['group-has-data-[selected]:flex', 'group-has-data-selected:flex'],

packages/@tailwindcss-upgrade/src/template/codemods/arbitrary-value-to-bare-value.ts

@@ -58,6 +58,20 @@ export function arbitraryValueToBareValue(
           value: variant.value.value.slice(0, variant.value.value.indexOf('=')),
         }
       }
+
+      // Convert `supports-[gap]` to `supports-gap`
+      else if (
+        variant.kind === 'functional' &&
+        variant.root === 'supports' &&
+        variant.value?.kind === 'arbitrary' &&
+        /^[a-z-][a-z0-9-]*$/i.test(variant.value.value)
+      ) {
+        changed = true
+        variant.value = {
+          kind: 'named',
+          value: variant.value.value,
+        }
+      }
     }
 
     return changed ? printCandidate(designSystem, clone) : rawCandidate