How to use the @xstyled/util.is 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.
smooth-code / xstyled / packages / system / src / styles / space.js View on Github 
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
},
})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,
})
}
res = compose ? compose(res)(props) : res
cache.set(value, res)
return resreturn function getStyle(props) {
const value = props[prop]
if (!is(value)) return null
const cache = getCacheNamespace(props.theme, prop)
if (obj(value)) {
return reduceBreakpoints(
props,
value,
breakpointValue =>
styleFromValue(
cssProperties,
breakpointValue,
props,
themeGet,
cache,
),
cache,
)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,
})
}
res = compose ? compose(res)(props) : res
cache.set(value, res)
return res
}
getter.meta = { name, transform: defaultTransform }export function getBreakpoints(props) {
const themeBreakpoints = getThemeValue(props, 'breakpoints')
if (is(themeBreakpoints)) return themeBreakpoints
return DEFAULT_BREAKPOINTS
}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
},
})
