Works in css files but not in tsx

[etabard]

Hi,

Thanks for your plugin, I'm using styled component and looking for a css var completion.
It's working well in css files but can't manage to make it work in typescript files as announced in your last commit.

Thanks for your help !

[phoenisx]

Hi!

Thanks for your support and opening this issue. 🙏🏾
I verified the plugin on .tsx files as well, and it's working for me. Check the attached .gif:

Can you share me a repro for your problem, or give some details on what vscode settings you have, and is the location of your cssvar.files correct?

To support .tsx files you will have to add the following settings:

{
  "cssvar.extensions": ["css", "scss", "typescript", "typescriptreact"],
}

If you are using .ts or .tsx, instead of typescript or typescriptreact as extension values,
please change accordingly. Will update the docs as well, for the same

[etabard]

Hi, thanks for your reply !

Here is the config i'm using :

{
  "cssvar.files": ["@app/client/assets/vars.css"],
  "cssvar.extensions": ["ts", "tsx", "css", "less"]
}

I'm using yarn workspaces maybe that's a problem ? I'll try to make a repro !
Thanks

[phoenisx]

Yeah!

Please convert your configs a little bit:

• If @app points to ./src (Since this project is language agnostic, it doesn't support @app from tsconfig.json paths.):

{
  "cssvar.files": ["src/client/assets/vars.css"],
  "cssvar.extensions": ["typescript", "typescriptreact", "css", "less"]
}

Convert ts to typescript and tsx to typescriptreact, as these names are VSCode defaults.

Will add a support for short extensions like: js or tsx in next release. For now, please modify your config as mentioned above.

[etabard]

Thanks a lot for your help @phoenisx

@app is a real path but switching to ["typescript", "typescriptreact", "css", "less"] works !