How to use the @xstyled/util.string function in @xstyled/util

export function toCustomPropertiesReferences(object, parent, theme = object) {
  const next = Array.isArray(object) ? [] : {}

  for (const key in object) {
    const value = object[key]
    const name = join(parent, key)
    if (obj(value)) {
      next[key] = toCustomPropertiesReferences(value, name, theme)
      continue
    }
    if (string(value)) {
      next[key] = toVarValue(name, value)
      continue
    }
    if (func(value)) {
      next[key] = toVarValue(name, value({ theme }))
      continue
    }
  }

  return next
}

transform: (_, { rawValue, variants, props }) => {
    if (string(rawValue)) {
      const neg = rawValue.startsWith('-')
      const absoluteValue = neg ? rawValue.substr(1) : rawValue
      const variantValue = getThemeValue(props, absoluteValue, variants)
      const value = is(variantValue) ? variantValue : absoluteValue
      return neg ? toNegative(value) : value
    }
    const abs = Math.abs(rawValue)
    const neg = negative(rawValue)
    const value = is(variants[abs]) ? variants[abs] : abs
    return neg ? toNegative(value) : value
  },
})

function toNegative(value) {
  if (string(value)) return `-${value}`
  return value * -1
}

export const rpx = value => {
  if (!string(value) || value.length < 4) return value
  const unit = value.slice(-3)
  if (unit !== 'rpx') return value
  const n = Number(value.slice(0, value.length - 3))
  if (n === 0) return 0
  return `${pxToRem(n)}rem`
}

export function toCustomPropertiesDeclarations(
  object,
  parent,
  theme = object,
  state = { value: '' },
) {
  for (const key in object) {
    const value = object[key]
    const name = join(parent, key)
    if (obj(value)) {
      toCustomPropertiesDeclarations(value, name, theme, state)
      continue
    }
    if (string(value)) {
      state.value += `${toVarName(name)}: ${value};`
      continue
    }
    if (func(value)) {
      state.value += `${toVarName(name)}: ${value({ theme })};`
      continue
    }
  }

  return state.value
}