@const variables used in style directives give "no-unused-vars"

[johnnysprinkles]

I have code like this:

        {#each items as item}
          {@const left = (<some expression>) * 100 + '%'}
          {@const width = (<some expression>) * 100 + '%'}
          {#if !item.secondary}
            <div class="item-container" style:left style:width>
              <Item {item} />
            </div>
          {/if}
        {/each}

But eslint with eslint-plugin-svelte3 report no-unused-vars, apparently not accounting for "left" and "width" being referenced in the style directives.

[johnnysprinkles]

Note that I'm not seeing the same issue when used in a class directive. Also this is version 3.4.1.

[kling90]

Was about to create an issue about the same problem, though I was using @const with destructuring. A silly example but eslint outputs a no-unused-vars error:

<script>
  const images = [
    { src: 'https://placeimg.com/500/500/any', width: '250px' },
    { src: 'https://placeimg.com/500/500/any', width: '250px' },
    { src: 'https://placeimg.com/500/500/any', width: '250px' },
  ];
</script>

{#each images as image}
  {@const { src, width } = image}
  <img {src} style:width alt />
{/each}

[stephane-vanraes]

To note that this does not give errors:

<script>
  const images = [
    { src: 'https://placeimg.com/500/500/any', w: '250px' },
    { src: 'https://placeimg.com/500/500/any', w: '250px' },
    { src: 'https://placeimg.com/500/500/any', w: '250px' }
  ];
</script>

{#each images as image}
  {@const { src, w } = image}
  <img {src} style:width={w} alt />
{/each}

So the problem seems to be with the shorthand

[molily]

<svelte:element this={variable}> triggers this problem as well:

<script>
const numbers = [1, 2, 3, 4];
</script>

{#each numbers as number}
  {@const tag = number === 1 ? 'h1' : 'p'}
  <svelte:element this={tag}>{number}</svelte:element>
{/each}

Error message: 'tag' is assigned a value but never used. eslint(no-unused-vars)

Workaround:

{@const tag = /* eslint-disable-line no-unused-vars */ number === 1 ? 'h1' : 'p'}