microsoft / vscode-webview-ui-toolkit-samples

A collection of sample extensions built with the Webview UI Toolkit for Visual Studio Code.
MIT License
233 stars 51 forks source link

Hello-world-svelte Content Security Policy does not seems to let styles and scripts #136

Closed Askhento closed 1 month ago

Askhento commented 1 year ago

Button not styled

image

Logs :

image
hawkticehurst commented 1 year ago

Hey @Askhento!

Could you provide more context (and code snippets) on how you're trying to style the button?

The hello-svelte sample does actually enable the default script and style CSP rules (see here).

But reading the errors you sent it looks like there's something more going on since it's recommending that you set the script-src-elem rule and either set unsafe-inline or add a hash/nonce to your styles CSP as potential solutions to the errors you're seeing.

Askhento commented 1 year ago

I am just running the example without any changes.

Here is CSP i see :

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
hawkticehurst commented 1 year ago

Ahhh I see, thanks for clarifying.

I installed a fresh copy of the hello-world-svelte sample and was able to partially reproduce the errors you're seeing:

  1. The button styling looks fine on my end –– in fact as I look back at your screenshot that button also looks correct, could you explain a bit more about the styling issue you're seeing?
  2. I did reproduce the style-src error and was reminded this is actually an issue with an upstream dependency of the toolkit but from all my testing it doesn't actually seem to result in any tangible problems when building an extension (just an annoying error that I think can be safely ignored)
  3. I could not reproduce the script-src error –– perhaps you should try to delete node_modules and reinstall (or maybe even delete and reinstall the entire sample?)
Askhento commented 1 year ago

I've updated my launch.json

"args": [
  "--extensionDevelopmentPath=${workspaceFolder}",
  "--disable-extensions"
],

Seems like the color matched my theme, as should) But still with fresh reinstall node_modules I see the same error with livereload.js. Seems like it comes from rollup-plugin-livereload.

hawkticehurst commented 1 month ago

Hi @Askhento!

Back with a final update: I'm very sorry to say that the toolkit is being deprecated and all development on these samples has come to a close.

There was an announcement earlier this week on the main toolkit repo where you can learn more details and leave any questions or comments you may have.

Beyond that, thank you so much filing this issue and apologies for never getting around to addressing it. It means a lot that you contributed to the improvement of this project. I wish you all the best in your future VS Code extension endeavors!