vscode-styled-components
vscode-styled-components copied to clipboard
styled-components
Backticks are always expanded
Describe the bug (including copyable syntax) A clear and concise description of what the bug is. If you're planning on posting a screenshot, please paste the accompanying code here.
Backticks are always expanded, even in comments or other situations where it's not needed, this is really annoying
Screenshot Screenshots are alway useful!
To Reproduce Steps to reproduce the issue, or JavaScript code that causes this failure. If you showed a screenshot, it will help a lot to paste accompanying code which matches
insert a backticks ina. comment or elewhere
Expected behavior Explain what you expected to happen, and what is happening instead.
backticks shoiuld be expanded only when necessary
Build environment (please complete the following information):
- OS: mac os 12.6.1
- VSCode Version: 1.73.1
- Extension Version 1.7.5
Additional context Add any other context about the problem here.
Thanks for raising this @massimo-cassandro We currently always show that option whenever backticks are opened inside a "TypeScript React" or "JavaScript React" file. I don't think there's an easy way to know when you want to use it for styled components vs when you want to use it as normal template string.
One option would be to check the TypeScript AST and see if you're within a CSS declaration but this would take some work, it isn't something I have time to look at right now.
Would you be willing to work on this?
Hi @jasonwilliams, I can have a try, but I'm not very versed in vscode extensions. Let me take a look, and in the next days I'll let you know if I'm able to do it... Thanks
https://github.com/styled-components/vscode-styled-components/blob/main/CONTRIBUTING.md
One option would be to check the TypeScript AST and see if you're within a CSS declaration but this would take some work, it isn't something I have time to look at right now.
I had experience to do it earlier and I see an easy way to do this, but it involves weird workaround and creating another TS plugin within repo. @jasonwilliams just curios, how do you think it should be done? There is no obvious way to send a command to TS plugin from vscode ext host to ask something and also, please, its important to understand that this is not a native snippet, which means it can't be disabled atm, I might not need this snippet at all (probably because user using some other way to expand it). For example I'm using this to get it even quicker (notice TS completion insert text):
if you're within a CSS declaration
Also just curios what does it mean? Can you throw some examples? The only case I see so far:
const foo = css`|
// | - cursor pos, but why don't we check that last char on previous line is `?
HI @jasonwilliams, unfortunately I could not deal with this thing and I do not think I will have much time available in the near future...