twIf function to reduce boilerplate with stitches variants

[wottpal]

Hey there,
I just wrote myself a little helper function to reduce boilerplate code when using twin.macro & stitches variants. What do you think? I'm not sure if something like this should be included in the core but maybe somebody finds it useful, too.

// Before (9 lines as i don't find such objects very readable on one line):
const PopoverButton = styled(Popover.Button, {
  ...tw`inline-flex items-center transition-colors font-medium hover:text-gray-100 focus:(outline-none rounded-md ring-2 ring-white ring-opacity-50 ring-offset-dark-gray ring-offset-2)`,
  variants: {
    isOpen: {
      true: tw`text-gray-100`,
      false: tw`text-gray-400`,
    }
  }
})

// After (5 lines):
const PopoverButton = styled(Popover.Button, {
  ...tw`inline-flex items-center transition-colors font-medium hover:text-gray-100 focus:(outline-none rounded-md ring-2 ring-white ring-opacity-50 ring-offset-dark-gray ring-offset-2)`,
  variants: twIf('isOpen', tw`text-gray-100`, tw`text-gray-400`)
})

// Can also be used with multiple variants and saves even more lines:
const PopoverButton = styled(Popover.Button, {
  ...tw`inline-flex items-center transition-colors font-medium hover:text-gray-100 focus:(outline-none rounded-md ring-2 ring-white ring-opacity-50 ring-offset-dark-gray ring-offset-2)`,
  variants: {
    ...twIf('isOpen', tw`text-gray-100`, tw`text-gray-400`),
    ...twIf('isSomething', tw`text-gray-100`, tw`text-gray-400`),
  }
})

This is the function:

/**
 * Helper to generate boolean variants for stitches with twin.macro
 */
export const twIf = (booleanCondition: string, stylesIfTrue: TwStyle, stylesIfFalse: TwStyle) => {
  return {
    [booleanCondition]: {
      true: stylesIfTrue,
      false: stylesIfFalse,
    }
  }
}

[ben-rogerson]

Nice one, I really like the dx on this.

Perhaps it's worth adding the function to the stitches example - I'll see what I can do next time I'm working on the stitches functionality (which is a little overdue now).