createKeyedInterpolator.ts

// Convert "translate(10px) rotate(0)" into ["translate", "rotate"]
// This helps interpolate strings of different arity.
const keyRegex = /(?:^| )([\w-]+)\(([^ ,]+(?:(?:,[ ]*|[ ]+)[^ ,)]+)*)\)/g

/**
 * Create a specialized interpolator for strings like:
 *
 *     "translate(...) rotate(...)"
 */
export const createKeyedInterpolator = (config: InterpolatorConfig<string>) => {
  type KeyFrame = { [key: string]: string }

  // Collect the keyframes and from values.
  const fromValues: KeyFrame = {}
  const keyframes = config.output.map((output, i) => {
    // Replace colors with rgba(...)
    output = output
      .replace(colorRegex, colorToRgba)
      .replace(colorNamesRegex, colorToRgba)

    const keyframe: KeyFrame = {}
    keyRegex.lastIndex = 0
    for (let match; (match = keyRegex.exec(output)); ) {
      const key = match[1]
      const value = match[2]
      if (fromValues[key] == null) {
        // Infer 0 as the from value when none exists.
        fromValues[key] = i == 0 ? value : value.replace(numberRegex, '0')
      }
      // Keep the parsed argument list as a string.
      keyframe[key] = value
    }
    return keyframe
  })

  console.log('interpolate:', { config, fromValues, keyframes })

  // Each key has its own interpolator.
  const keys = Object.keys(fromValues)
  const interpolators = keys.map(key => {
    let prev = fromValues[key]
    return createInterpolator({
      ...config,
      output: keyframes.map(keyframe => {
        const value = keyframe[key]
        return value !== void 0 ? (prev = value) : prev
      }),
    })
  })

  return (input: number) =>
    keys.map((key, i) => `${key}(${interpolators[i](input)})`).join(' ')
}