False positives for computed classes

[Nagell]

As we use Storybook its quite helpful to set up classes based on params of a component, but this one gives me false positives for all of the class variants:

<script setup lang="ts">
    import { computed } from 'vue'

    // ...

    const variantClasses = computed(() => {
        switch (props.variant) {
        case 'primary':
            return 'oh-btn-primary'
        case 'secondary':
            return 'oh-btn-secondary'
        case 'tertiary-blue':
            return 'oh-btn-tertiary-blue'
        case 'tertiary-gray':
            return 'oh-btn-tertiary-gray'
        default:
            return ''
        }
    })
</script>

<template>
    <button class="oh-btn" :class="[variantClasses]">
        <slot />
    </button>
</template>

<style lang="scss" scoped>
@import "../../assets/styles/main.scss";

.oh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;

    &-primary {
        /* The selector `.oh-btn-primary` is unused */
    }

    &-secondary {
        /* The selector `.oh-btn-secondary` is unused */
    }
    /*...*/
</style>

Is it a bug or is there something I've missed in the config?

[ota-meshi]

Thank you for posting this report. It looks like a bug to me.

[neillrobson]

Hi! Would it be helpful for me to try my hand at a PR for this issue?

It is causing a decent amount of inconvenience for some folks on my team, and I'd love to help in any way possible to find a resolution.

[neillrobson]

As I was working on a PR, I realized that my issue is slightly different (although it results in the same undesired result). I created a new issue here for tracking.