convert arrays to template literals during transformation

[sastan]

This must not be resolved before the initial release.

Twind recommends using template literal syntax as it allows advanced caching. Is it possible to transform arrays to a template literal call of tw?

<div tw={['bg-gray-200', true && 'rounded', { hover: ['bg-red-500', 'p-3'] }, 'underline']}></div>
// => tw`bg-blue-500 ${true && 'rounded'} ${{ hover: ['bg-red-500', 'p-3'] }} underline`

That would mean all strings are converted to template elements and non-strings are interpolations values (see astexplorer).

This would should work for static strings as well:

<div tw="bg-gray-200 rounded"></div>
// => tw`bg-gray-200 rounded`

If the tw attribute value is already a template literal that could be used as is:

<div tw={`bg-blue-500 ${true && 'rounded'} ${{ hover: ['bg-red-500', 'p-3'] }} underline`}></div>
// => tw`bg-blue-500 ${true && 'rounded'} ${{ hover: ['bg-red-500', 'p-3'] }} underline`

For non-array and non-string tw attribute values i would recommend to call tw with the value as is.

<div tw={{ 'bg-gray-200': true, rounded: false, underline: isTrue() }}></div>
// => tw({ 'bg-gray-200': true, rounded: false, underline: isTrue() })

What to you think @itsMapleLeaf ?

[itsMapleLeaf]

Yep, this can be done. Anyone else is welcome to pick this up before I do. I'll say if/when I can get to it

[itsMapleLeaf]

Most of this is done as of v1.0.1, only missing this case:

<div tw={['bg-gray-200', true && 'rounded', { hover: ['bg-red-500', 'p-3'] }, 'underline']}></div>

// currently:
// => tw`${'bg-blue-500'} ${true && 'rounded'} ${{ hover: ['bg-red-500', 'p-3'] }} ${'underline'}`

// desired:
// => tw`bg-blue-500 ${true && 'rounded'} ${{ hover: ['bg-red-500', 'p-3'] }} underline`