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

To help you get started, we’ve selected a few @xstyled/util examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github smooth-code / xstyled / packages / system / src / style.js View on Github external
function styleFromValue(cssProperties, value, props, themeGet, cache) {
  if (obj(value)) return null
  if (cache.has(value)) return cache.get(value)
  const computedValue = themeGet(value)(props)
  if (!string(computedValue) && !num(computedValue)) return null
  const style = {}
  for (const key in cssProperties) {
    style[cssProperties[key]] = computedValue
  }
  cache.set(value, style)
  return style
}
github smooth-code / xstyled / packages / core / src / customProperties.js View on Github external
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
}
github smooth-code / xstyled / packages / core / src / customProperties.js View on Github external
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
}
github smooth-code / xstyled / packages / system / src / styles / xgrids.js View on Github external
props => {
    const value = props.col
    const common = {
      boxSizing: 'border-box',
      flexBasis: 0,
      flexGrow: 1,
      maxWidth: '100%',
    }

    if (obj(value)) {
      const breakpointsStyle = reduceBreakpoints(
        props,
        value,
        breakpointValue => getColStyle(props, breakpointValue),
      )

      return {
        ...common,
        ...breakpointsStyle,
      }
    }

    return {
      ...common,
      ...getColStyle(props, value),
    }