Can't Parse CSS Variables from Svelte File

[jelias]

Describe the bug
I use a Theme.svelte file that includes all of the CSS variables inside of a style tag. This does not get parsed by CSSVar, and thus none of my styles are available for autocomplete.

To Reproduce
Steps to reproduce the behavior:

1. In Settings, add Svelte file to CSSvar: Files
2. Disable and Enable extension
3. Notification pops up: Failed to parse CSS variables in files: xx/Theme.svelte

Expected behavior
Ideally, this would be able to parse the style tag of the Svelte file, which is pure css (or SCSS, if lang is specified).

Screenshots
If applicable, add screenshots to help explain your problem.

Details (please complete the following information):

• OS: MacOS 13.6.4
• VSCode version: v1.86.2
• Extension version: v2.6.4

[phoenisx]

Thanks for raising the issue.

Svelte is not officially supported by this Extension yet. It works in some cases but fails sometimes. I will have to check what's causing the failure in your case.

It would be great if you shared a minimal reproduction repo for me to test this out (once I get free from other tasks).
I am also open to PR contributions 👍🏽

[jelias]

Here is an example Theme component. This is wrapped around the main app, so that each child has access to the css variables. Happy to help contribute, but not sure I understand much about how this extension works at the moment...

Ideally, CSSVar could support a user defined svelte file and build a autocomplete list of the CSS variables within. Even cooler (and more complex) would be for CSSVar to scan all the parent components of a file so you can use any css variable from an active file's parent.

Theme component

<!-- Example: Theme Component with Embedded Styles -->
<div class="theme">
  <slot />
</div>

<style>
  .theme {
    --primary-color: #123456ff; /* Example primary color */
    --secondary-color: #abcdefff; /* Example secondary color */
    --background-color: #000000ff; /* Example background color */
    --text-color: #ffffffff; /* Example text color */
    --border-radius: 4px; /* Example border radius */

    /* Example linear gradient */
    --example-gradient: linear-gradient(
      to right,
      var(--primary-color) 0%,
      var(--secondary-color) 100%
    );

    /* Example typography scale */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;

    /* Example spacing scale */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
  }
</style>

Implementation of Theme:

<Theme>
   <slot /> <!-- Whatever html elements you want -->
</Theme>

[phoenisx]

I checked ur example. Since there's no official parser for svelte yet, the extension just skips parsing svelte files, providing no intellisense.

If u are interested, you can look into how src/pre-processors/template-literals.ts pre-processor works.
We would need a pre-processor for .svelte files as well.

I strictly avoid adding unnecessary libraries; thus try to create pre-processor from scratch.