migrateLegacyClasses() — tailwindcss Function Reference

Source Code

packages/@tailwindcss-upgrade/src/codemods/template/migrate-legacy-classes.ts lines 70–144

export async function migrateLegacyClasses(
  designSystem: DesignSystem,
  _userConfig: Config | null,
  rawCandidate: string,
): Promise<string> {
  // These migrations are only safe when migrating from v3 to v4.
  //
  // Migrating from `rounded` to `rounded-sm` once is fine (v3 -> v4). But if we
  // migrate again (v4 -> v4), then `rounded-sm` would be migrated to
  // `rounded-xs` which is incorrect because we already migrated this.
  if (!version.isMajor(3)) {
    return rawCandidate
  }

  let defaultDesignSystem = await DESIGN_SYSTEMS.get(__dirname)

  function* migrate(rawCandidate: string) {
    for (let candidate of designSystem.parseCandidate(rawCandidate)) {
      // Create a base candidate string from the candidate.
      // E.g.: `hover:blur!` -> `blur`
      let base = baseCandidate(candidate)
      let baseCandidateString = designSystem.printCandidate(base)

      // Find the new base candidate string. `blur` -> `blur-sm`
      let newBaseCandidateString = LEGACY_CLASS_MAP.get(baseCandidateString)
      if (!newBaseCandidateString) continue

      // Parse the new base candidate string into an actual candidate AST.
      let [newBaseCandidate] = designSystem.parseCandidate(newBaseCandidateString)
      if (!newBaseCandidate) continue

      // Re-apply the variants and important flag from the original candidate.
      // E.g.: `hover:blur!` -> `blur` -> `blur-sm` -> `hover:blur-sm!`
      let newCandidate = cloneCandidate(newBaseCandidate) as Candidate
      newCandidate.variants = candidate.variants
      newCandidate.important = candidate.important

      yield [
        newCandidate,
        THEME_KEYS.get(baseCandidateString),
        THEME_KEYS.get(newBaseCandidateString),
      ] as const
    }
  }

  for (let [toCandidate, fromThemeKey, toThemeKey] of migrate(rawCandidate)) {
    if (fromThemeKey && toThemeKey) {
      // Migrating something that resolves to a value in the theme.
      let customFrom = designSystem.resolveThemeValue(fromThemeKey, true)
      let defaultFrom = defaultDesignSystem.resolveThemeValue(fromThemeKey, true)
      let customTo = designSystem.resolveThemeValue(toThemeKey, true)
      let defaultTo = defaultDesignSystem.resolveThemeValue(toThemeKey)

      // The new theme value is not defined, which means we can't safely
      // migrate the utility.
      if (customTo === undefined && defaultTo !== undefined) {
        continue
      }

      // The "from" theme value changed compared to the default theme value.
      if (customFrom !== defaultFrom) {
        continue
      }

      // The "to" theme value changed compared to the default theme value.
      if (customTo !== defaultTo) {
        continue
      }
    }

    return designSystem.printCandidate(toCandidate)
  }

  return rawCandidate
}