[Feature request] Support `<style>` section in Vue single file components

[stefanobartoletti]

Is your feature request related to a problem? Please describe. It would be great if this plugin would automatically accept as valid class names those referenced in the <style> section of Vue single file components.

At the moment, if you have in example this component:

<template>
  <section>
      <div class="custom-class-wrapper">
        <p class="custom-lass">Lorem Ipsum</p>
      </div>
  </section>
</template>

<script setup>
// JS script
</script>

<style scoped>
.custom-class-wrapper {
    background-color: aquamarine;
}

.custom-class {
    color: red;
}
</style>

Currently, custom-class-wrapper and custom-class are reported as non-valid classes, even if they are referenced in the same component and styles are applied to them. These should be considered valid classes, even if not native from TW.

At the moment, only custom classes referenced in external *.css files are considered valid,but in Vue, it is often a best practice to write your custom CSS inside a <style scoped> tag that will be applied only in the said component, without being too generic.

[francoismassart]

👋 hi, I just did a quick check on https://astexplorer.net/ using the Vue example but unfortunately the <style> part of the SFC seems unreachable by vue-eslint-parser...

[SeryiBaran]

👋 hi, I just did a quick check on astexplorer.net using the Vue example but unfortunately the <style> part of the SFC seems unreachable by vue-eslint-parser...

Really?

[francoismassart]

Hi @SeryiBaran thank you for the headsup, I did not see it at the time, usually I'm using vue-eslint-parser which does not go through the <style>.

Yet the @vue/compiler-dom only provide a basic feature for the <style> tag:

It still requires some work to extract all the classNames from there in a efficient manner while adapting the rest (template & script) to this unsupported parser.

You are welcome to contribute to the project if you wish 😉.

[synopss]

@francoismassart Maybe you could take a look at this repo ? https://github.com/future-architect/eslint-plugin-vue-scoped-css

Looks like they managed to parse the <style> section after all.