eslint-plugin-vue-scoped-css
eslint-plugin-vue-scoped-css copied to clipboard
False positives for computed classes
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?
Thank you for posting this report. It looks like a bug to me.
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.
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.