Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Variables are not recognized inside string interpolation if <style> is part of the string #2104

Closed
sserdyuk opened this issue Jul 20, 2023 · 0 comments
Labels
bug Something isn't working Fixed Fixed in master branch. Pending production release.

Comments

@sserdyuk
Copy link

sserdyuk commented Jul 20, 2023

Describe the bug

I needed to dynamically define CSS variables based on the config, and I used string interpolation to construct an HTML fragment and insert it at svelte:head. While it works, it confuses the VS Code plugin. First, the branding variable is marked as unused, second there's no type information during interpolation. After some experiments, I found that <style> in the string is what triggering the issue.

image

Reproduction

<script lang="ts">
  const config = { branding: { primaryColor: '#012345' } },
    branding = config?.branding;

  const cssString = `<style>:root {--primary-color: ${branding?.primaryColor ?? '#ABCDEF'};}</style>`;
</script>

<svelte:head>
  {@html cssString}
</svelte:head>

Expected behaviour

I was expecting that string interpolation works regardless the content of the string.

System Info

  • OS: [e.g. Windows]
  • IDE: [e.g. VSCode, Atom]

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

No response

@sserdyuk sserdyuk added the bug Something isn't working label Jul 20, 2023
@dummdidumm dummdidumm added the Fixed Fixed in master branch. Pending production release. label Aug 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working Fixed Fixed in master branch. Pending production release.
Projects
None yet
Development

No branches or pull requests

2 participants