css.js

import { mergeProps } from "../helpers"

const tokens = {
  "colors.red.500": {
    value: "#f00",
  },
}
const utilities = {
  bg: {
    transform(value, { token, raw }) {
      return {
        backgroundColor: token.raw(`colors.${raw}`),
      }
    },
  },
}
export function css(styles) {
  let transformedStyles = {}
  Object.keys(styles).forEach((key) => {
    if (utilities[key]) {
      const { transform } = utilities[key]
      const value = styles[key]
      const result = transform(value, {
        token: {
          raw: (path) => tokens[path].value || value,
        },
        raw: value,
      })
      transformedStyles = { ...transformedStyles, ...result }
    } else {
      transformedStyles[key] = styles[key]
    }
  })
  return transformedStyles
}


export function mergeCss(...styles) {
  return mergeProps(...styles)
}

factory.js

import { cva } from "../css"

export function styled(Element, recipe) {
  const styling = cva(recipe)
  return function (props) {
    return <Element style={styling()} {...props} />
  }
}