Inline styles in Svelte trigger false positives

[rgmuna]

Hello,

I'm seeing an issue in Svelte with the following which should not cause a linter error because the variable is defined in my style tags:

<script lang="ts">
    export let test = 'Hello';
</script>

<div style="height: 100px;">{test}</div>

<style lang="scss">
    div {
        --foo: #f00;

        color: var(--foo);
        background-color: var(--color-defined-in-css-file);
    }
</style>

With the inline style tag present, I'm seeing this linter error triggered indicating --foo is undefined. However when I remove the style="...", the error goes away. Variables defined in my CSS file are not an issue (e.g. --color-defined-in-css-file), only the locally defined variables.

Specifications

• Version: v6.0.1
• Stack: Svelte v4.2.19, Stylelint v16.20.0,

[stolinski]

@rgmuna did you find a workaround?

[rgmuna]

Unfortunately I haven't really attempted to debug further after posting this. I was hoping to hear something back but will likely end up forking and attempting to fix myself when I have time.