search

styled-components / vscode-styled-components

Syntax highlighting for styled-components
MIT License
917 stars 117 forks source link

Add support for `@container` queries by updating the CSS language service #439

Closed marvinroger closed 2 months ago

marvinroger commented 9 months ago

This PR updates the CSS language service in order to support @container queries.

C.f. https://github.com/microsoft/vscode-css-languageservice/pull/365 and https://github.com/microsoft/vscode-css-languageservice/pull/371

The PR is ready to be published to npm 😉

jasonwilliams commented 9 months ago

Thanks @marvinroger We will need to also update this here https://github.com/styled-components/typescript-styled-plugin/blob/main/package.json as that’s where the intellisense is handled.

Testing this is explained here: https://github.com/styled-components/vscode-styled-components/blob/main/CONTRIBUTING.md#intellisense

marvinroger commented 9 months ago

I messed up the link in the description but it's already done https://github.com/styled-components/typescript-styled-plugin/pull/19

This is why this PR is in draft

jasonwilliams commented 9 months ago

Ok great thanks, have you tested these changes locally? I can take a look myself later

marvinroger commented 9 months ago

I did not test locally, but I can confirm that vscode-css-languageservice@6.2.11 does support container queries. I'll let you test if you're OK with that 😉

jasonwilliams commented 9 months ago

https://www.npmjs.com/package/@styled/typescript-styled-plugin has been published

marvinroger commented 9 months ago

Thanks, just updated the PR!

macko911 commented 9 months ago

Thanks for doing this! I tried to test this locally (built the extension and installed to VSCode) but it doesn't seem to have an effect - I still see the following warning.

image

This is the first time I'm building/installing a VSCode extension locally so it's probably just me not doing it right, but wanted to let you know. Hope your own test goes well. I can try and share some small reproduction later if it will be of any help.

It also looks like @container queries should be supported in the latest version of VSCode (1.85) in .css files based on this Stack Overflow answer but that also doesn't seem to be the case for me either. Not sure what's up.

jasonwilliams commented 9 months ago

Yeah I've tested this branch and I'm still getting the warning too, are we sure this has been fixed in the styled plugin? @marvinroger If you could make a fixture and add it to this branch which we can all look at that would help.

Sorry I know you've already done work in this repo but you may need to add a test here so we can be sure this has been fixed in the plugin before we try adding it to the extension.

I've also updated the main branch so you'll need to rebase if you can too

This is the first time I'm building/installing a VSCode extension locally so it's probably just me not doing it right, but wanted to let you know. Hope your own test goes well. I can try and share some small reproduction later if it will be of any help.

@macko911 I don't know how you set up before, but if you want to help fix this, I would say follow https://github.com/styled-components/vscode-styled-components/blob/main/CONTRIBUTING.md#intellisense

Then set some breakpoints in the styled plugin to see why its still warning about the unknown property at rule