styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.27k stars 106 forks source link

Vscode intellisense plugin #347

Open nelsonomuto opened 2 years ago

nelsonomuto commented 2 years ago

🚀 Feature Proposal

Tailwind intellisense autocomplete with your theme would be super useful for xstyled.

The styled components plugin is more basic intellisense for the css`` blocks which is useful as well.

Motivation

Improve developer experience

Examples

This would be used in vscode for adding tailwind values to bg color like in tailwind

Screen Shot 2022-01-19 at 11 49 17 AM

and also for css`` style blocks like in styled components demo-vscode

Pitch

Why does this feature belong in the xstyled ecosystem?

Seeing that xstyled is somewhat of a combination between tailwind (because of its declarative focus) and styled components (it also enables css`` blocks in jsx) I think it would be useful to have a plugin similarly: and most importantly for the xstyled component attributes and values to help improve developer experience when working with xstyled.

gregberge commented 2 years ago

Hello @nelsonomuto,

I totally agree with you, it would be awesome to get it work! In order to do it we should provide a static theme in a xstyled.config.js for an example, but it is an acceptable tradeoff for me.

Actually I don't have time to build it, but feel welcome to work on it!

nelsonomuto commented 2 years ago

I'll take a look this weekend to see if I can add it

shrihari-balasubramani commented 2 years ago

Following https://xstyled.dev/docs/typescript/ seems to add the IntelliSense autocomplete work. Ensure tsconfig.json includes the respective config file. Feel free to close this issue

gregberge commented 2 years ago

Not in styled components, so I let it opened.

quantizor commented 1 year ago

https://github.com/styled-components/vscode-styled-components/issues/422