handle [@media_not(…)] variants

Author: RobinMalfait

packages/@tailwindcss-upgrade/src/codemods/template/migrate-modernize-arbitrary-values.test.ts

@@ -83,6 +83,7 @@ test.each([
   // Media queries
   ['[@media(pointer:fine)]:flex', 'pointer-fine:flex'],
   ['[@media_(pointer_:_fine)]:flex', 'pointer-fine:flex'],
+  ['[@media_not_(pointer_:_fine)]:flex', 'not-pointer-fine:flex'],
 
   // Compound arbitrary variants
   ['has-[[data-visible]]:flex', 'has-data-visible:flex'],

packages/@tailwindcss-upgrade/src/codemods/template/migrate-modernize-arbitrary-values.ts

@@ -179,6 +179,12 @@ export function migrateModernizeArbitraryValues(
             }
           })
 
+          let not = false
+          if (parsed[0]?.kind === 'word' && parsed[0].value === 'not') {
+            not = true
+            parsed.shift()
+          }
+
           if (
             parsed.length === 1 &&
             parsed[0].kind === 'function' && // `(` and `)` are considered a function
@@ -218,7 +224,7 @@ export function migrateModernizeArbitraryValues(
 
             if (replacement) {
               changed = true
-              memcpy(variant, designSystem.parseVariant(replacement))
+              memcpy(variant, designSystem.parseVariant(`${not ? 'not-' : ''}${replacement}`))
             }
           }
           continue