Tokens in importMap?

[NickTsitlakidis]

Hey everyone,

I'm using the config's importMap to make sure that the build step works correctly in my nx monorepo.
One thing that is not working at the moment is the token function, although my tokens are generated correctly.

The idea was to use this syntax in a style :

fontFamily: token("fonts.doppio")

but it's not compiling the fontFamily rule.

On the other hand, if I do it like this it works :

fontFamily: "token(fonts.doppio)"

I'm guessing that it has to do with tokens mapping capability missing from the importMap. Is this by design? Am I missing something?

[astahmer]

can you make a minimal repro ?

[NickTsitlakidis]

I've made a very basic nx monorepo with one library and one app. No specific framework support, just a web app running with wepback.

The library includes the panda compiled runtime and the compiled css.

In the app there are two css function calls which demonstrate that the token function doesn't work but the token string works.

https://github.com/NickTsitlakidis/panda-nx-issue

[anubra266]

@NickTsitlakidis I took a look at your styles; the js token function call is a runtime function. It's not for use within panda methods. https://panda-css.com/docs/guides/dynamic-styling#using-token

While the token string function is mostly for use in composite values. E.g. border: solid 1px token(colors.red.300).
In your usecase, you should just do color: deepPurple.

In addition you can also define string tokens with curly braces.
border: solid 1px {colors.red.300}, the token string function is mostly so you can assign callbacks if the token does not exist:
border: solid 1px token(colors.red.300, red)
Our eslint plugin will stop you from using undefined tokens and also stop you from using tokens in unnecessary instances like this.

[NickTsitlakidis]

@anubra266 Thanks for the clarification for the token function.

I'll use the color: "deepPurple" syntax for now and I will try to enforce type safety by using the eslint plugin.

[anubra266]

@NickTsitlakidis If you're concerned with typesafety, you might be looking for this config key
https://panda-css.com/docs/references/config#stricttokens

[NickTsitlakidis]

This solves my issue in the best possible way. Thanks.