vue/prefer-template tries to apply to style scoped

[sky0matic]

What rule do you want to change?
vue/prefer-template

Does this change cause the rule to produce more or fewer warnings?
Fewer

How will the change be implemented? (New option, new default behavior, etc.)?
The rule doesn't check for style scoped or there's a way to disable it on a per-line basis.

Please provide some example code that this change will affect:

<script setup lang="ts">
  const someWidth = computed(() => 
    // Some computation process
  );
</script>

<style scoped>
.some-element {
  width: v-bind(someWidth + 'px');
}

.some-other-element {
  /* same issue if we try to disable the rule, it doesn't seem to work */
  /* eslint-disable-next-line vue/prefer-template */
  width: v-bind(someWidth + 'px');
}
</style>

What does the rule currently do for this code?
It want us to replace someWidth + 'px' with :

`{someWidth}px`

and this is not valid CSS handled by the IDE (VSCode in this case) so it shows another error.

What will the rule do after it's changed?
Either :

• Not react to style scoped
• Allow to disable the rule on the style somehow or react to the eslint-disable-next-line properly.

Additional context
The only way we are able to skip this issue entirely for now is to create a new computed which does :

const someWidthStr = computed(() => `${someWidth.value}px`);

which makes us need to maintain yet another computed which we would prefer to avoid.

[FloEdelmann]

Oh that's a bug; the rule should only search those patterns in the <template> block. → see below

[FloEdelmann]

I tried reproducing the error in the playground but it always reports Parsing error: t is undefined. @ota-meshi do you know why?

[ota-meshi]

Thank you for letting me know, I fixed the playground 😉

[waynzh]

@sky0matic This seems more like a usage issue, rather than a auto-fix bug in the rule.
According to the Vue docs, "v-bind in CSS must be wrapped in quotes."
This can be addressed by changing width: v-bind(someWidth + 'px'); to width: v-bind("someWidth + 'px'");. After the auto-fix, it will be converted to below, which will then function correctly without any lint errors.

.some-element {
  width: v-bind("`${someWidth}px`");
}

[waynzh]

this is not valid CSS handled by the IDE (VSCode in this case) so it shows another error.

So, this is why it triggers a CSS lint error, and there's also a warning indicating that the variable is declared but its value is never read.

I'm going to close this issue for now, but feel free to continue the discussion if you have further questions.