Summary

This PR adds a new configuration option to the vue-scoped-css/no-unused-selector rule that allows matching "class-like" attributes in addition to the standard class. This is useful for ecosystems derived from the Web, such as MiniApp platforms, where non-standard attributes like hover-class are commonly used. Frameworks like DCloud's uni-app make it possible to write Vue once and target multiple platforms (MiniApp, Web, Native), hence the need for this option.

Motivation

MiniApps (a Web-derived application form popular in China) diverge from the standard Web in certain template attributes. For example, they support attributes such as hover-class. On top of these ecosystems, frameworks like DCloud’s uni-app help developers write cross-platform apps using Vue syntax for MiniApp, standard Web, and Native. To better support such Web-derived ecosystems, this rule should be able to treat specific non-standard attributes as class-like when checking unused selectors.

Changes

• Add new option: extraClassAttributes: string[]
  • Purpose: Specify attribute names (besides class) that should be treated as class-like and included in matching (e.g., hover-class, hoverClass, placeholder-class).
  • Default: [] (no behavior change unless configured)
  • Semantics: class is always checked; this option adds "extra" attributes to check in addition.
• Documentation
  • Update docs/rules/no-unused-selector.md to document the option and provide usage examples.
• Tests
  • Add valid and invalid cases for extraClassAttributes, covering static, dynamic, array, and object binding syntaxes.

Usage

Flat config:

import eslintPluginVueScopedCSS from 'eslint-plugin-vue-scoped-css'
export default [
 ...eslintPluginVueScopedCSS.configs['flat/recommended'],
 {
 rules: {
 'vue-scoped-css/no-unused-selector': ['error', {
 extraClassAttributes: ['hover-class'],
 }],
 },
 },
]

Legacy config:

module.exports = {
 parser: 'vue-eslint-parser',
 extends: ['plugin:vue-scoped-css/vue3-recommended'],
 rules: {
 'vue-scoped-css/no-unused-selector': ['error', {
 extraClassAttributes: ['hover-class'],
 }],
 },
}

Template example (e.g., MiniApp/uni-app):

<template>
 <view
 class="btn"
 :hover-class="disabled ? '' : 'btn-hover'"
 />
</template>
<style scoped>
.btn {}

.btn-hover {}
</style>

Impact

• No change when the option is not configured.
• Projects targeting MiniApp / uni-app and similar platforms can avoid false positives (e.g., .btn-hover combined with :hover-class) in no-unused-selector.