Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tokens.js a small utility function to make writing custom props a bit easier in js.
/**
* @param {...{}} objs - object containing camelCased style properties or css custom properties
* @returns {<{'--prop': 'value'}>} containing prefixed css custom properties to be inlined.
* @example Simple
* <Textblock style={tokens({
* lineHeight: 1.2,
* fontSize: rem(47.78),
* })} />
* @example Conditional Example
* <Textblock style={tokens(
* inline ? { display: 'inline' } : { display: 'block' },
* {
* lineHeight: 1.2,
* fontSize: rem(47.78),
* },
* )} />
*/
export const tokens = (...objs) => objs
.filter(Boolean)
.map(obj => Object.entries(obj))
.reduce((acc, cur) => acc.concat(cur), [])
.reduce((acc, [key, value]) => ({ ...acc, [`--${key}`]: value }), {});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.