TS errors when referencing tokens in template literals?

[doksara]

I recently set up my NextJS with PandaCSS. Since I come from styled-components, I got used to using template literals syntax to define my styles. In the official docs, it says that I can just reference my token like this:

import { css } from '../styled-system/css'
 
const className = css`
  font-size: {fontSizes.md};
  font-weight: token(fontWeights.bold, 700);
`

and it works just fine. But the problem is, I am getting TS errors everywhere:

How do I fix this? I can't find anything related to TS setup in the official documentation.

[segunadebayo]

This isn't a TS Error, per se. It's an error from the ts-styled-plugin. I would recommend the following:

• Use the {colors.primaryStone} syntax
• Consider switching to vscode-styled-components plugin instead

[doksara]

I am still getting an error from the plugin:

Also, I'm already using the vscode-styled-components plugin.

[segunadebayo]

Panda's token reference syntax is incompatible with styled-components, so I recommend not using that ts-styled plugin or creating an ignore rule.