// just the changed bits
// and definitely not elegant yet

// withCommon: extract the top level CSS properties and magically push them down
// this is probably something you'd want to cache
function withCommon(v, list) {
  const common = list.filter(([k, v]) => !(typeof v == 'object' && v.constructor == Object))
  return {
    ...common.reduce((merged, [k, vPrime]) => {
      merged[k] = vPrime
      return merged
    }, {}),
    ...v,
  }
}

function configToCss(config = {}, { target, className, prefix }) {
  return Object.fromEntries(
    Object.entries(
      merge(
        {},
        ...Object.keys(config)
          .filter((key) => computed[key])
          .map((key) => computed[key](config[key])),
        ...castArray(config.css || {})
      )
    )
      .map(([k, v], idx, list) => {
        if (target === 'legacy') {
          return [k, v]
        }

        if (typeof v == 'object' && v.constructor == Object) {
          return [inWhere(k, { className, prefix }), withCommon(v, list)]
        } else {
          return null // drop all "common" props with our filter
        }
      })
      .filter((v) => !!v)
  )
}