prepare and cleanup raw candidates

This is used in 2 spots:

1. When handling prefixes
2. When modernizing values

The issues this tries to solve is to ensure that valid v3 candidates but
invalid v4 candidates are migrated correctly. E.g.: `group-[]:flex` is
valid in v3, but not in v4 (it won't parse). With this workaround, it is
parsing correctly.

Author: RobinMalfait

packages/@tailwindcss-upgrade/src/template/candidates.ts

@@ -3,6 +3,28 @@ import type { Candidate, Variant } from '../../../tailwindcss/src/candidate'
 import type { DesignSystem } from '../../../tailwindcss/src/design-system'
 import * as ValueParser from '../../../tailwindcss/src/value-parser'
 
+// Some valid candidates in v3 won't parse in v4. E.g.: `group-[]:flex`
+// Some of these candidates can be migrated, but that means that they should be
+// able to be parsed in v4. This function prepares a raw candidate for parsing
+// by replacing invalid parts with a placeholder.
+export function prepareRawCandidate(input: string) {
+  // Empty arbitrary values don't parse anymore. This is a little bit of a hack
+  // to work around that behavior so we can still perform the migration:
+  input = input.replaceAll('-[]:', '-[--tw-custom-placeholder]:') // End of variant
+  input = input.replaceAll('-[]/', '-[--tw-custom-placeholder]/') // With modifier
+  input = input.replaceAll('/[]:', '/[--tw-custom-placeholder]:') // Empty modifier
+  return input
+}
+
+// This does the cleanup from `prepareRawCandidate` in case we couldn't migrate
+// the candidate.
+export function cleanupCandidate(input: string) {
+  input = input.replaceAll('-[--tw-custom-placeholder]:', '-[]:') // End of variant
+  input = input.replaceAll('-[--tw-custom-placeholder]/', '-[]/') // With modifier
+  input = input.replaceAll('/[--tw-custom-placeholder]:', '/[]:') // Empty modifier
+  return input
+}
+
 export async function extractRawCandidates(
   content: string,
   extension: string = 'html',

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

@@ -3,7 +3,7 @@ import { parseCandidate, type Candidate, type Variant } from '../../../../tailwi
 import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
 import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
 import { isPositiveInteger } from '../../../../tailwindcss/src/utils/infer-data-type'
-import { printCandidate } from '../candidates'
+import { cleanupCandidate, prepareRawCandidate, printCandidate } from '../candidates'
 
 function memcpy<T extends object, U extends object | null>(target: T, source: U): U {
   // Clear out the target object, otherwise inspecting the final object will
@@ -18,13 +18,7 @@ export function modernizeArbitraryValues(
   _userConfig: Config,
   rawCandidate: string,
 ): string {
-  // Empty arbitrary values don't parse anymore. This is a little bit of a hack
-  // to work around that behavior so we can still perform the migration:
-  if (rawCandidate.includes('group-')) {
-    rawCandidate = rawCandidate.replaceAll('-[]:', '-[--tw-custom-placeholder]:') // End of variant
-    rawCandidate = rawCandidate.replaceAll('-[]/', '-[--tw-custom-placeholder]/') // With modifier
-    rawCandidate = rawCandidate.replaceAll('/[]:', '/[--tw-custom-placeholder]:') // Empty modifier
-  }
+  rawCandidate = prepareRawCandidate(rawCandidate)
 
   for (let candidate of parseCandidate(rawCandidate, designSystem)) {
     let clone = structuredClone(candidate)
@@ -386,16 +380,7 @@ export function modernizeArbitraryValues(
       }
     }
 
-    let newCandidate = changed ? printCandidate(designSystem, clone) : rawCandidate
-
-    // Empty arbitrary values don't parse anymore. This is a little bit of a hack
-    // to work around that behavior so we can still perform the migration:
-    if (newCandidate.includes('group-')) {
-      newCandidate = newCandidate.replaceAll('-[--tw-custom-placeholder]:', '-[]:') // End of variant
-      newCandidate = newCandidate.replaceAll('-[--tw-custom-placeholder]/', '-[]/') // With modifier
-      newCandidate = newCandidate.replaceAll('/[--tw-custom-placeholder]:', '/[]:') // Empty modifier
-    }
-    return newCandidate
+    return cleanupCandidate(changed ? printCandidate(designSystem, clone) : rawCandidate)
   }
 
   return rawCandidate

packages/@tailwindcss-upgrade/src/template/codemods/prefix.ts

@@ -2,7 +2,7 @@ import { parseCandidate, type Candidate } from '../../../../tailwindcss/src/cand
 import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
 import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
 import { segment } from '../../../../tailwindcss/src/utils/segment'
-import { printCandidate } from '../candidates'
+import { cleanupCandidate, prepareRawCandidate, printCandidate } from '../candidates'
 
 export function prefix(
   designSystem: DesignSystem,
@@ -11,15 +11,9 @@ export function prefix(
 ): string {
   if (!designSystem.theme.prefix) return rawCandidate
 
-  // Empty arbitrary values don't parse anymore. This is a little bit of a hack
-  // to work around that behavior so we can still perform the migration:
-  if (rawCandidate.includes('group-')) {
-    rawCandidate = rawCandidate.replaceAll('-[]:', '-[--tw-custom-placeholder]:') // End of variant
-    rawCandidate = rawCandidate.replaceAll('-[]/', '-[--tw-custom-placeholder]/') // With modifier
-    rawCandidate = rawCandidate.replaceAll('/[]:', '/[--tw-custom-placeholder]:') // Empty modifier
-  }
+  let cleanedRawCandidate = prepareRawCandidate(rawCandidate)
 
-  let v3Base = extractV3Base(designSystem, userConfig, rawCandidate)
+  let v3Base = extractV3Base(designSystem, userConfig, cleanedRawCandidate)
 
   if (!v3Base) return rawCandidate
 
@@ -30,7 +24,9 @@ export function prefix(
     designSystem.theme.prefix = null
 
     let unprefixedCandidate =
-      rawCandidate.slice(0, v3Base.start) + v3Base.base + rawCandidate.slice(v3Base.end)
+      cleanedRawCandidate.slice(0, v3Base.start) +
+      v3Base.base +
+      cleanedRawCandidate.slice(v3Base.end)
 
     // Note: This is not a valid candidate in the original DesignSystem, so we
     // can not use the `DesignSystem#parseCandidate` API here or otherwise this
@@ -45,7 +41,7 @@ export function prefix(
 
   if (!candidate) return rawCandidate
 
-  return printCandidate(designSystem, candidate)
+  return cleanupCandidate(printCandidate(designSystem, candidate))
 }
 
 // Parses a raw candidate with v3 compatible prefix syntax. This won't match if