@tamagui/codemod-flat-values 0.0.0-bootstrap.0 → 3.0.0-beta.1093.1

package/src/legacyConditions.ts

@@ -0,0 +1,357 @@
+import {
+  transformFamilyProps,
+  unitlessNumberProperties,
+} from '@tamagui/style-grammar/tooling'
+import type { ModifierRegistryView, ParsedClause } from '@tamagui/style-grammar/tooling'
+
+export const pseudoToModifier: Readonly<Record<string, string>> = Object.freeze({
+  hoverStyle: 'hover',
+  pressStyle: 'press',
+  focusStyle: 'focus',
+  focusVisibleStyle: 'focus-visible',
+  focusWithinStyle: 'focus-within',
+  disabledStyle: 'disabled',
+  enterStyle: 'enter',
+  exitStyle: 'exit',
+})
+
+const transformPartProperties: ReadonlySet<string> = new Set([
+  'scale',
+  'scaleX',
+  'scaleY',
+  'rotate',
+  'rotateX',
+  'rotateY',
+  'rotateZ',
+  'x',
+  'y',
+  'skewX',
+  'skewY',
+  'perspective',
+])
+
+export interface ConvertLegacyConditionOptions {
+  registry: ModifierRegistryView
+}
+
+export interface LegacyConditionContribution {
+  prop: string
+  clause: ParsedClause
+}
+
+export interface LegacyConditionError {
+  code: string
+  path: string
+  message: string
+}
+
+export interface LegacyConditionResult {
+  contributions: LegacyConditionContribution[]
+  errors: LegacyConditionError[]
+}
+
+type ConditionResolution =
+  | { recognized: false }
+  | { recognized: true; modifiers: readonly string[] }
+  | { recognized: true; error: Omit<LegacyConditionError, 'path'> }
+
+function resolveLegacyCondition(
+  propName: string,
+  registry: ModifierRegistryView
+): ConditionResolution {
+  const pseudoModifier = pseudoToModifier[propName]
+  if (pseudoModifier !== undefined) {
+    return registry.get(pseudoModifier) === 'state'
+      ? { recognized: true, modifiers: [pseudoModifier] }
+      : {
+          recognized: true,
+          error: {
+            code: 'unregistered-legacy-condition',
+            message: `legacy condition "${propName}" maps to unregistered state modifier "${pseudoModifier}"`,
+          },
+        }
+  }
+
+  if (propName.startsWith('$theme-')) {
+    const modifier = propName.slice('$theme-'.length)
+    return modifier && registry.get(modifier) === 'theme'
+      ? { recognized: true, modifiers: [modifier] }
+      : {
+          recognized: true,
+          error: {
+            code: 'unregistered-legacy-condition',
+            message: `legacy theme condition "${propName}" does not name a registered theme`,
+          },
+        }
+  }
+
+  if (propName.startsWith('$platform-')) {
+    const modifier = propName.slice('$platform-'.length)
+    return modifier && registry.get(modifier) === 'platform'
+      ? { recognized: true, modifiers: [modifier] }
+      : {
+          recognized: true,
+          error: {
+            code: 'unregistered-legacy-condition',
+            message: `legacy platform condition "${propName}" does not name a registered platform`,
+          },
+        }
+  }
+
+  if (propName.startsWith('$group-')) {
+    const remainder = propName.slice('$group-'.length)
+    const candidates: string[] = []
+    let start = 0
+    while (start < remainder.length) {
+      const state = remainder.slice(start)
+      if (registry.get(state) === 'state') candidates.push(state)
+      const dash = remainder.indexOf('-', start)
+      if (dash === -1) break
+      start = dash + 1
+    }
+
+    const longestLength = candidates.reduce(
+      (length, state) => Math.max(length, state.length),
+      0
+    )
+    const longest = candidates.filter((state) => state.length === longestLength)
+    if (longest.length > 1) {
+      return {
+        recognized: true,
+        error: {
+          code: 'ambiguous-legacy-group',
+          message: `legacy group condition "${propName}" has more than one equally specific state suffix`,
+        },
+      }
+    }
+
+    const state = longest.length === 1 ? longest[0] : null
+    let namePart =
+      state === null
+        ? remainder
+        : state.length === remainder.length
+          ? ''
+          : remainder.slice(0, -(state.length + 1))
+    let media: string | null = null
+
+    if (namePart) {
+      let scanStart = 0
+      while (scanStart < namePart.length) {
+        const suffix = namePart.slice(scanStart)
+        if (registry.get(`@${suffix}`) === 'container') {
+          media = suffix
+          break
+        }
+        const dash = namePart.indexOf('-', scanStart)
+        if (dash === -1) break
+        scanStart = dash + 1
+      }
+      if (media !== null) {
+        namePart =
+          media.length === namePart.length ? '' : namePart.slice(0, -(media.length + 1))
+      } else if (state === null) {
+        return {
+          recognized: true,
+          error: {
+            code: 'unregistered-legacy-condition',
+            message: `legacy group condition "${propName}" has no registered state or container-size suffix`,
+          },
+        }
+      }
+    } else if (state === null) {
+      return {
+        recognized: true,
+        error: {
+          code: 'unregistered-legacy-condition',
+          message: `legacy group condition "${propName}" has no registered state suffix`,
+        },
+      }
+    }
+
+    const suffix = namePart ? `/${namePart}` : ''
+    const modifiers: string[] = []
+    if (media !== null) modifiers.push(`@${media}${suffix}`)
+    if (state !== null) modifiers.push(`group-${state}${suffix}`)
+    return { recognized: true, modifiers }
+  }
+
+  if (propName[0] === '$') {
+    const modifier = propName.slice(1)
+    const kind = registry.get(modifier)
+    if (kind === 'media' || kind === 'container') {
+      return { recognized: true, modifiers: [modifier] }
+    }
+  }
+
+  return { recognized: false }
+}
+
+function isConditionObject(value: unknown): value is Record<string, unknown> {
+  if (value === null || typeof value !== 'object' || Array.isArray(value)) return false
+  const prototype = Object.getPrototypeOf(value)
+  return prototype === Object.prototype || prototype === null
+}
+
+function convertStyleValue(
+  prop: string,
+  value: unknown,
+  path: string,
+  errors: LegacyConditionError[]
+): string | null {
+  if (transformPartProperties.has(prop) && !transformFamilyProps.has(prop)) {
+    errors.push({
+      code: 'legacy-transform-part',
+      path,
+      message: `legacy transform part "${prop}" has no flat spelling; author it inside a flat \`transform\` value (only x, y, scale, scaleX, scaleY, and rotate are first-class)`,
+    })
+    return null
+  }
+
+  if (
+    typeof value === 'number' &&
+    Number.isFinite(value) &&
+    transformFamilyProps.has(prop)
+  ) {
+    if (prop === 'rotate') return value === 0 ? '0deg' : `${value}deg`
+    if (prop === 'x' || prop === 'y') return value === 0 ? '0' : `${value}px`
+    return String(value)
+  }
+
+  if (typeof value === 'string') {
+    // V5 spells a half-step token with a dot ($2.5); V3 spells the same token
+    // with a dash (2-5) and resolves it to the identical value, so a NUMERIC
+    // dot-path is a pure rename rather than a value change. Measured against
+    // both config packs: $0.5/0-5 = 1, $1.5/1-5 = 4, $2.5/2-5 = 10,
+    // $3.5/3-5 = 16.
+    //
+    // Worth converting rather than flagging because it is the single largest
+    // flag category on real corpora: 272 of 497 flagged sites in one mid-size
+    // app. A non-numeric dot-path is a rename nobody can derive, so it stays
+    // flagged below.
+    const text = value.replace(/\$(-?\d+)\.(\d+)\b/g, '$$$1-$2')
+
+    if (!text.length) {
+      errors.push({
+        code: 'unsupported-legacy-value',
+        path,
+        message: 'an empty string cannot become a condition clause payload',
+      })
+      return null
+    }
+    if (text.indexOf('$') === -1) return text
+    if (text.includes('"') || text.includes("'") || text.includes('url(')) {
+      errors.push({
+        code: 'unsupported-legacy-value',
+        path,
+        message: `"${text}" mixes "$" with quoted or url() content; migrate the token spelling by hand`,
+      })
+      return null
+    }
+    if (/\$[\w-]*\./.test(text)) {
+      errors.push({
+        code: 'legacy-token-dot-path',
+        path,
+        message: `legacy token in "${text}" uses dot-path naming; rename it to one configured flat token name before conversion`,
+      })
+      return null
+    }
+    if (/\$-?\d/.test(text) && !/^\$-?[\w-]+$/.test(text)) {
+      errors.push({
+        code: 'legacy-numeric-composite-token',
+        path,
+        message: `numeric token in "${text}" is embedded in a composite value; replace it with its resolved CSS value before conversion`,
+      })
+      return null
+    }
+    if (/\$(?![\w-])/.test(text)) {
+      errors.push({
+        code: 'unsupported-legacy-value',
+        path,
+        message: `"$" in "${text}" is not followed by a token name`,
+      })
+      return null
+    }
+    return text.replace(/\$([\w-]+)/g, '$1')
+  }
+
+  if (typeof value === 'number') {
+    if (Number.isFinite(value)) {
+      return unitlessNumberProperties.has(prop) ? String(value) : `${value}px`
+    }
+    errors.push({
+      code: 'unsupported-legacy-value',
+      path,
+      message: `non-finite number ${String(value)} cannot become a CSS payload`,
+    })
+    return null
+  }
+
+  errors.push({
+    code: 'unsupported-legacy-value',
+    path,
+    message: `legacy condition value for "${prop}" must be a string or finite number`,
+  })
+  return null
+}
+
+export function convertLegacyConditionProp(
+  propName: string,
+  value: unknown,
+  options: ConvertLegacyConditionOptions
+): LegacyConditionResult | null {
+  const root = resolveLegacyCondition(propName, options.registry)
+  if (!root.recognized) return null
+
+  const result: LegacyConditionResult = { contributions: [], errors: [] }
+  if ('error' in root) {
+    result.errors.push({ ...root.error, path: propName })
+    return result
+  }
+  if (!isConditionObject(value)) {
+    result.errors.push({
+      code: 'legacy-condition-object',
+      path: propName,
+      message: `legacy condition "${propName}" must contain a style object`,
+    })
+    return result
+  }
+
+  const modifiers = root.modifiers.slice()
+  const visit = (object: Record<string, unknown>, objectPath: string): void => {
+    for (const childProp in object) {
+      const childValue = object[childProp]
+      const childPath = `${objectPath}.${childProp}`
+      const condition = resolveLegacyCondition(childProp, options.registry)
+
+      if (condition.recognized) {
+        if ('error' in condition) {
+          result.errors.push({ ...condition.error, path: childPath })
+          continue
+        }
+        if (!isConditionObject(childValue)) {
+          result.errors.push({
+            code: 'legacy-condition-object',
+            path: childPath,
+            message: `legacy condition "${childProp}" must contain a style object`,
+          })
+          continue
+        }
+        modifiers.push(...condition.modifiers)
+        visit(childValue, childPath)
+        modifiers.length -= condition.modifiers.length
+        continue
+      }
+
+      const payload = convertStyleValue(childProp, childValue, childPath, result.errors)
+      if (payload !== null) {
+        result.contributions.push({
+          prop: childProp,
+          clause: { modifiers: modifiers.slice(), payload },
+        })
+      }
+    }
+  }
+
+  visit(value, propName)
+  return result
+}

package/src/legacyNames.ts

@@ -0,0 +1,160 @@
+// Legacy condition prop names, normalized to the one spelling the shared
+// converter resolves.
+//
+// Three v1 spellings need normalizing before the shared converter sees them:
+// the platform conditions are written `$web`/`$ios` rather than `$platform-web`;
+// v1 media keys are camelCase where the V6 built-ins are kebab-case (decision
+// 15); and a legacy group condition may carry a container size, which V3 splits
+// into a container query plus a group state (`$group-card-sm-hover` becomes
+// `@sm/card:group-hover/card:`).
+
+import {
+  grammarPlatformNames,
+  pseudoToModifier,
+  type ModifierRegistryView,
+} from './grammar'
+
+export interface ContainerRequest {
+  /** the media key the container measures */
+  size: string
+  /** the group name the query is scoped to, or null for the nearest container */
+  group: string | null
+}
+
+export interface ResolvedLegacyName {
+  /** the spelling handed to the shared converter */
+  canonical: string
+  /** modifiers replacing the converter's root modifier, when the split applies */
+  replaceRoot: readonly string[] | null
+  /** the container the parent group element has to declare */
+  container: ContainerRequest | null
+}
+
+export type LegacyNameResolution =
+  | { ok: true; resolved: ResolvedLegacyName }
+  | { ok: false; code: string; message: string }
+
+export function isLegacyConditionName(name: string): boolean {
+  return name.startsWith('$') || pseudoToModifier[name] !== undefined
+}
+
+function kebab(name: string): string {
+  return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+/** the registered media name for a v1 media key, kebab-cased when v1 spelled it camelCase */
+function mediaName(name: string, registry: ModifierRegistryView): string | null {
+  if (registry.get(name) === 'media') return name
+  const kebabbed = kebab(name)
+  return registry.get(kebabbed) === 'media' ? kebabbed : null
+}
+
+/** the longest suffix of `parts` that resolves through `resolve` */
+function longestSuffix(
+  parts: readonly string[],
+  resolve: (candidate: string) => string | null
+): { value: string; rest: readonly string[] } | null {
+  for (let start = 0; start < parts.length; start++) {
+    const resolved = resolve(parts.slice(start).join('-'))
+    if (resolved !== null) return { value: resolved, rest: parts.slice(0, start) }
+  }
+  return null
+}
+
+function resolveGroupName(
+  name: string,
+  registry: ModifierRegistryView
+): LegacyNameResolution {
+  const parts = name.slice('$group-'.length).split('-')
+  const state = longestSuffix(parts, (candidate) =>
+    registry.get(candidate) === 'state' ? candidate : null
+  )
+  const beforeState = state ? state.rest : parts
+  const size = longestSuffix(beforeState, (candidate) => mediaName(candidate, registry))
+  const group = (size ? size.rest : beforeState).join('-') || null
+  const suffix = group === null ? '' : `/${group}`
+
+  if (!state && !size) {
+    return {
+      ok: false,
+      code: 'legacy-group-presence',
+      message: `"${name}" styles every descendant of the group unconditionally; V3 has no group-presence condition, so move the value to the base program or add a state`,
+    }
+  }
+
+  if (!size) {
+    // the shared converter already splits `$group-[name-]state`
+    return { ok: true, resolved: { canonical: name, replaceRoot: null, container: null } }
+  }
+
+  const modifiers = [`@${size.value}${suffix}`]
+  if (state) modifiers.push(`group-${state.value}${suffix}`)
+  for (const modifier of modifiers) {
+    if (registry.get(modifier) === undefined) {
+      return {
+        ok: false,
+        code: 'unregistered-legacy-condition',
+        message: `"${name}" needs modifier "${modifier}", which is not registered`,
+      }
+    }
+  }
+
+  return {
+    ok: true,
+    resolved: {
+      // any registered root works: `replaceRoot` substitutes the whole chain
+      canonical: state
+        ? `$group-${group === null ? '' : `${group}-`}${state.value}`
+        : `$${size.value}`,
+      replaceRoot: modifiers,
+      container: { size: size.value, group },
+    },
+  }
+}
+
+export function resolveLegacyName(
+  name: string,
+  registry: ModifierRegistryView
+): LegacyNameResolution {
+  if (pseudoToModifier[name] !== undefined || name.startsWith('$theme-')) {
+    return { ok: true, resolved: { canonical: name, replaceRoot: null, container: null } }
+  }
+
+  if (name.startsWith('$platform-')) {
+    return { ok: true, resolved: { canonical: name, replaceRoot: null, container: null } }
+  }
+
+  if (name.startsWith('$group-')) return resolveGroupName(name, registry)
+
+  if (name.startsWith('$')) {
+    const bare = name.slice(1)
+    if (grammarPlatformNames.has(bare)) {
+      return {
+        ok: true,
+        resolved: {
+          canonical: `$platform-${bare}`,
+          replaceRoot: null,
+          container: null,
+        },
+      }
+    }
+    const media = mediaName(bare, registry)
+    if (media !== null) {
+      return {
+        ok: true,
+        resolved: { canonical: `$${media}`, replaceRoot: null, container: null },
+      }
+    }
+    return {
+      ok: false,
+      code: 'unknown-legacy-condition',
+      message: `"${name}" is not a registered legacy condition spelling`,
+    }
+  }
+
+  return {
+    ok: false,
+    code: 'unknown-legacy-condition',
+    message: `"${name}" is not a registered legacy condition spelling`,
+  }
+}