Props limit

[pekopoikan]

${(props) => (props.dark ? `bg-theme-bgdark` : `bg-theme-bg`)}
${(props) => (props.color ? `${props.color}` : `text-theme-text`)}

The code above works perfectly fine but if I add one 1 prop the last prop wont be added to the className. why ?

ex.

${(props) => (props.dark ? `bg-theme-bgdark` : `bg-theme-bg`)}
${(props) => (props.color ? `${props.color}` : `text-theme-text`)}
${(props) => (props.border? `${props.border}` : ``)} //this wont execute

[jeremy-foreflight]

Had the a similar problem but maybe I can add a little bit extra color for the issue. The only 2 conditionals that work are the top 2. After that it treats them like they don't exist.

${p => p.size === 'large' && `
    py-4
    px-3
    text-6
`}

${p => p.size === 'small' && `
    p-1
    text-xs
`}

${p => p.size === 'medium' && `
    py-1
    px-2
    text-sm
`}

${p => p.buttonType === 'default' && `
    bg-gray-100
    text-gray-800
    hover:bg-gray-50
`}

${p => p.buttonType === 'secondary' && `
    border-blue-600
    border-solid
    text-blue-600
    hover:bg-gray-50
`}

${p => p.buttonType === 'primary' && `
    bg-blue-600
    text-white
    hover:bg-blue-500
`}

;

[AlexMason]

Ran into this issue as well, it appears that TemplateStringsArray is the issue here? Is it converting any values after the first literal to undefined? It looks like it is an open issue with TypeScript?

Reference microsoft/TypeScript#33304

[AlexMason]

I have introduced a PR request that should fix this issue, disregard my previous comment.

#19

[MathiasGilson]

The PR has been merged, thank you @AlexMason 🙌