How to use the @xstyled/util.num 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 / system / src / style.js View on Github external
const getter = value => props => {
    let res = value
    if (!string(value) && !num(value)) return res
    const cache = getCacheNamespace(props.theme, `__themeGetter${id}`)
    if (cache.has(value)) return cache.get(value)
    let variants = is(key) ? getThemeValue(props, key) : null
    variants = is(variants) ? variants : defaultVariants
    res = is(variants) ? getThemeValue(props, value, variants) : null
    res = is(res) ? res : value
    const transform =
      (name && props.theme && props.theme.transformers
        ? props.theme.transformers[name]
        : null) || defaultTransform
    if (transform) {
      res = transform(res, {
        rawValue: value,
        variants,
        props,
      })
github smooth-code / xstyled / packages / system / src / transformers.js View on Github external
  border: n => (num(n) && n > 0 ? `${remPx(n)} solid` : n),
}
github smooth-code / xstyled / packages / system / src / styles / borders.js View on Github external
  transform: n => (num(n) && n > 0 ? `${px(n)} solid` : n),
})
github smooth-code / xstyled / packages / system / src / unit.js View on Github external
export const unit = unit => value =>
  num(value) && value !== 0 ? `${value}${unit}` : value