How do I get style values ​​from the theme function?

[lamualfa-client]

Problem

Recently i updated the Twind version from v0.11.2 to v0.14.2. After updating that, i get an error that related to the use of theme function. I think there have been some changes regarding how to use theme functions. Can you explain how to use it?

In v0.11.2 i can use theme function like this:

import { theme } from 'twind'

const paddingLeft = theme('padding', 'l-2')

console.log(paddingLeft)

Output

0.25rem

How do i do this in v0.14.2?

I have tried the following code but it returned a function instead the style value.

const paddingLeft = theme('padding', 'l-2')

console.log(paddingLeft) // Return a function
// (i,l)=>e(t,Array.isArray(i)?l:i)

console.log(paddingLeft()) // Throw an error
// TypeError: Cannot destructure property 'theme' of 'undefined' as it is undefined.

The Real Case

I wan't to use the style value that returned from theme function as the parameter to Third Party Component.

Example

new ExternalComponent({
   paddingLeft: theme('padding', 'l-3')
})

That is the reason why i am not using the css function.

[sastan]

🤦 Sorry. I did change the theme function to be a helper. There is currently no equivalent API but I'm planing to add it back.

For the moment you can use this code to get a theme function as you know it:

let theme
tw((context) => {
  theme = context.theme
  return ''
})

theme('colors.gray.500')
theme('padding', 'l-3')

The idea behind the change was to only provide helper functions that are used with tw. I understand that at least access to the theme is often needed.

In the next release we will have a "native" theme accessor. The following API is on my mind:

tw.theme('colors.gray.500')
tw.theme('padding', 'l-3')

This would make clear which theme values are accessed. There may be other context properties that we can expose this way.

You could try this API using the following snippet:

tw((context) => {
  tw.theme = context.theme
  return ''
})

tw.theme('colors.gray.500')
tw.theme('padding', 'l-3')

@lamualfa-client What do you think?

PS The new theme function can be used like this:

import { theme } from 'twind'

tw(() => ({
  color: theme('colors.blue.500'),
}))

For more examples take a look at the docs

[lamualfa-client]

I used theme as it reads nice and shows the intent. Which function do mean: theme or tw.theme?

I think the theme function is more often used in conjunction with the css function. so it's better to use tw.theme function to get the style value.

[sastan]

Agreed. I create a PR for this

[sastan]

See #101

[lamualfa-client]

Thanks.

[sastan]

Release in v0.14.3