Add extraClassAttributes option to match additional class-like attributes in templates (#413)

* feat(no-unused-selector): support customClassAttributes option

* feat: case-insensitive

* feat: rename customClassAttributes to extraClassAttributes

* Create afraid-bikes-smile.md

---------

Co-authored-by: Yosuke Ota <[email protected]>

Author: tofrankie

.changeset/afraid-bikes-smile.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-vue-scoped-css": minor
+---
+
+Add `extraClassAttributes` option to match additional class-like attributes in templates, to `vue-scoped-css/no-unused-selector` rule

docs/rules/no-unused-selector.md

@@ -91,13 +91,15 @@ This is a limitation of this rule. Without this limitation, the root element can
     "ignoreBEMModifier": false,
     "captureClassesFromDoc": [],
     "checkUnscoped": false,
+    "extraClassAttributes": [],
   }]
 }
 ```
 
 - `ignoreBEMModifier` ... Set `true` if you want to ignore the `BEM` modifier. Default is false.
 - `captureClassesFromDoc` ... Specifies the regexp that extracts the class name from the documentation in the comments. Even if there is no matching element, no error is reported if the document of a class name exists in the comments.
 - `checkUnscoped` ... The rule only checks `<style scoped>` by default, but if set to `true` it will also check `<style>` without the scoped attribute. If you set it to `true`, be very careful that the warned CSS may actually be used outside the `.vue` file.
+- `extraClassAttributes` ... Specifies an array of custom attribute names to check for class names in addition to the standard `class` attribute. Useful for frameworks that use custom attributes like `hover-class`, `placeholder-class`, etc. Default is an empty array.
 
 ### `"ignoreBEMModifier": true`
 
@@ -149,6 +151,38 @@ a.button.star {
 
 </eslint-code-block>
 
+### `"extraClassAttributes": ["hover-class", "placeholder-class"]`
+
+<eslint-code-block :rules="{'vue-scoped-css/no-unused-selector': ['error', {extraClassAttributes: ['hover-class', 'placeholder-class']}]}">
+
+```vue
+<template>
+  <div>
+    <!-- These attributes will be checked for class names -->
+    <button class="button" hover-class="button-hover">Button</button>
+    <input placeholder-class="input-placeholder" >
+  </div>
+</template>
+<style scoped>
+/* ✓ GOOD - These selectors are used in custom attributes */
+.button {}
+.button-hover {}
+.input-placeholder {}
+
+/* ✗ BAD - This selector is not used anywhere */
+.unused-class {}
+</style>
+<script>
+export default {
+  data() {
+    return {
+      dynamicHoverClass: 'button-hover',
+    }
+  },
+}
+</script>
+```
+
 ## :books: Further reading
 
 - [vue-scoped-css/require-selector-used-inside]

lib/options.ts

@@ -3,11 +3,13 @@ import { toRegExp } from "./utils/regexp";
 export interface QueryOptions {
   ignoreBEMModifier?: boolean;
   captureClassesFromDoc?: string[];
+  extraClassAttributes?: string[];
 }
 
 export interface ParsedQueryOptions {
   ignoreBEMModifier: boolean;
   captureClassesFromDoc: RegExp[];
+  extraClassAttributes: string[];
 }
 
 /**
@@ -16,11 +18,13 @@ export interface ParsedQueryOptions {
 export function parseQueryOptions(
   options: QueryOptions | undefined,
 ): ParsedQueryOptions {
-  const { ignoreBEMModifier, captureClassesFromDoc } = options || {};
+  const { ignoreBEMModifier, captureClassesFromDoc, extraClassAttributes } =
+    options || {};
 
   return {
     ignoreBEMModifier: ignoreBEMModifier ?? false,
     captureClassesFromDoc:
       captureClassesFromDoc?.map((s) => toRegExp(s, "g")) ?? [],
+    extraClassAttributes: extraClassAttributes ?? [],
   };
 }

lib/rules/no-unused-selector.ts

@@ -123,6 +123,14 @@ export = {
           checkUnscoped: {
             type: "boolean",
           },
+          extraClassAttributes: {
+            type: "array",
+            items: {
+              type: "string",
+            },
+            minItems: 0,
+            uniqueItems: true,
+          },
         },
         additionalProperties: false,
       },

lib/styles/selectors/query/attribute-tracker.ts

@@ -16,14 +16,15 @@ export function getAttributeValueNodes(
   context: RuleContext,
 ): AttributeValueExpressions[] | null {
   const results: AttributeValueExpressions[] = [];
+  const lowedName = name.toLowerCase();
   const { startTag } = element;
   for (const attr of startTag.attributes) {
     if (!isVDirective(attr)) {
       const { key, value } = attr;
       if (value == null) {
         continue;
       }
-      if (key.name === name) {
+      if (key.name === lowedName) {
         results.push(value);
       }
     } else {
@@ -39,7 +40,7 @@ export function getAttributeValueNodes(
         // bind name is unknown.
         return null;
       }
-      if (bindArg !== name) {
+      if (bindArg !== lowedName) {
         continue;
       }
       const { expression } = value;

lib/styles/selectors/query/index.ts

@@ -1,3 +1,4 @@
+import lodash from "lodash";
 import {
   isTypeSelector,
   isIDSelector,
@@ -762,16 +763,13 @@ function matchClassName(
       return true;
     }
   }
-  const nodes = getAttributeValueNodes(element, "class", document.context);
-  if (nodes == null) {
-    return true;
-  }
-  for (const node of nodes) {
-    if (node.type === "VLiteral") {
-      if (includesClassName(node.value, className)) {
-        return true;
-      }
-    } else if (matchClassNameExpression(node, className, document)) {
+
+  const uniquedAttrs = lodash.uniq([
+    "class",
+    ...document.options.extraClassAttributes,
+  ]);
+  for (const attrName of uniquedAttrs) {
+    if (matchClassNameForAttribute(element, attrName, className, document)) {
       return true;
     }
   }
@@ -793,6 +791,31 @@ function matchClassName(
   return false;
 }
 
+/**
+ * Checks whether the given element matches the given class name for a specific attribute.
+ */
+function matchClassNameForAttribute(
+  element: AST.VElement,
+  attrName: string,
+  className: Template,
+  document: VueDocumentQueryContext,
+): boolean {
+  const nodes = getAttributeValueNodes(element, attrName, document.context);
+  if (nodes == null) {
+    return true;
+  }
+  for (const node of nodes) {
+    if (node.type === "VLiteral") {
+      if (includesClassName(node.value, className)) {
+        return true;
+      }
+    } else if (matchClassNameExpression(node, className, document)) {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * Gets the ref name.
  */

tests/lib/rules/no-unused-selector.ts

@@ -326,7 +326,7 @@ tester.run("no-unused-selector", rule as any, {
             </template>
             <style scoped lang="scss">
             /* ✓ GOOD */
-            
+
             // A button suitable for giving a star to someone.
             //
             // :hover             - Subtle hover highlight.
@@ -473,6 +473,106 @@ tester.run("no-unused-selector", rule as any, {
         }
         </style>
         `,
+    // extraClassAttributes option
+    {
+      code: `
+        <template>
+            <div hover-class="foo"></div>
+        </template>
+        <style scoped>
+        .foo {}
+        </style>
+        `,
+      options: [{ extraClassAttributes: ["hover-class"] }],
+    },
+    {
+      code: `
+        <template>
+            <div :hover-class="dynamicClass"></div>
+        </template>
+        <style scoped>
+        .foo {}
+        </style>
+        <script>
+        export default {
+            data () {
+                return {
+                    dynamicClass: 'foo'
+                }
+            }
+        }
+        </script>
+        `,
+      options: [{ extraClassAttributes: ["hover-class"] }],
+    },
+    {
+      code: `
+        <template>
+            <div hover-class="foo" placeholder-class="bar"></div>
+        </template>
+        <style scoped>
+        .foo {}
+        .bar {}
+        </style>
+        `,
+      options: [{ extraClassAttributes: ["hover-class", "placeholder-class"] }],
+    },
+    {
+      code: `
+        <template>
+            <div :hover-class="['foo', 'bar']" :placeholder-class="{baz: true}"></div>
+        </template>
+        <style scoped>
+        .foo {}
+        .bar {}
+        .baz {}
+        </style>
+        `,
+      options: [{ extraClassAttributes: ["hover-class", "placeholder-class"] }],
+    },
+    {
+      code: `
+        <template>
+            <div data-class="foo"></div>
+        </template>
+        <style scoped>
+        .foo {}
+        </style>
+        `,
+      options: [{ extraClassAttributes: ["data-class"] }],
+    },
+    {
+      code: `
+        <template>
+            <div v-bind:data-class="dynamicClass"></div>
+        </template>
+        <style scoped>
+        .foo {}
+        </style>
+        <script>
+        export default {
+            data () {
+                return {
+                    dynamicClass: 'foo'
+                }
+            }
+        }
+        </script>
+        `,
+      options: [{ extraClassAttributes: ["data-class"] }],
+    },
+    {
+      code: `
+        <template>
+            <div class="foo" hover-class="bar"></div>
+        </template>
+        <style scoped>
+        .foo {}
+        .bar {}
+        </style>
+        `,
+      options: [{ extraClassAttributes: ["hover-class"] }],
+    },
   ],
   invalid: [
     {
@@ -756,7 +856,7 @@ tester.run("no-unused-selector", rule as any, {
             </template>
             <style scoped lang="scss">
             /* ✓ GOOD */
-            
+
             // A button suitable for giving a star to someone.
             //
             // :hover             - Subtle hover highlight.