No code autocompletion for @media queries.

[Profesor08]

Describe the bug (including copyable syntax)
No code autocompletion for @media queries. And if you type @media and press ( key, it will replace entire string with @:-moz-user-disabled()

Screenshot

To Reproduce

1. Install VScode if you don't have
2. Install vscode-styled-components
3. Create some .tsx component
4. Type @media or type @media and press (

Expected behavior
I want to see @media in autocomplete list and if I type @media(, it must not be replaced with @:-moz-user-disabled()

Build environment (please complete the following information):

• OS: Windows
• VSCode Version: 1.56.2
• Extension Version: v1.6.4

Additional context
May be I miss some additional configuration or extensions?

[jasonwilliams]

Thanks for raising @Profesor08 that indeed does look like a bug. Would you be interested in working on it?

[jasonwilliams]

Sadly its an upstream issue, you'll need to keep an eye on microsoft/typescript-styled-plugin#141
I don't think the CSS language server offers any auto complete for @media, when i run it in CSS i only get emmet auto complete

It could be as simple as updating vscode-emmet-helper on https://github.com/microsoft/typescript-styled-plugin

[jasonwilliams]

@Profesor08 a nice change would be adding a new auto completion in our completionsProvider that would help with the issue

[jasonwilliams]

@Profesor08 when you hit Enter on @media what do you expect to happen? To have braces open up or something else?

[Profesor08]

@Profesor08 when you hit Enter on @media what do you expect to happen? To have braces open up or something else?

I don't hit Enter, I type @media and then hit (, and expect to have @media() with cursor between brackets. As you can see on image, there is no sugestions for @media query, only some vendor specific things.

Erlier I have tried to figure out why this happens, but no results.

[jasonwilliams]

Erlier I have tried to figure out why this happens, but no results.

because there is no such completion, one would need to be added

[jasonwilliams]

Fixed by: microsoft/typescript-styled-plugin#156

[Profesor08]

Fixed by: microsoft/typescript-styled-plugin#156

Is there an easy way to check if it working, and not broke anything? I don't know what exactly changed in vscode, but now I can't reproduce this bug, popup is the same, but @media is remaining when I type (. The most anoing thing is just gone with time.

[kevincharp]

Since 2018 this problem has not been solved?

Was there any solution/configuration to get autocompletion or suggestions when using media querys in css files?