feat: add checkUnscoped option to no-unused-keyframes, no-unused-selector, and require-selector-used-inside rules (#255)

* feat: add `checkUnscoped` option to `no-unused-keyframes`, `no-unused-selector`, and `require-selector-used-inside` rules

* Create thirty-experts-raise.md

Author: ota-meshi

.changeset/thirty-experts-raise.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-vue-scoped-css": minor
+---
+
+feat: add `checkUnscoped` option to `no-unused-keyframes`, `no-unused-selector`, and `require-selector-used-inside` rules

docs/rules/no-unused-keyframes.md

@@ -36,7 +36,15 @@ This rule reports `@keyframes` is not used in Scoped CSS.
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "vue-scoped-css/no-unused-keyframes": ["error", {
+    "checkUnscoped": false
+  }]
+}
+```
+
+- `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.
 
 ## Implementation
 

docs/rules/no-unused-selector.md

@@ -89,13 +89,15 @@ This is a limitation of this rule. Without this limitation, the root element can
 {
   "vue-scoped-css/no-unused-selector": ["error", {
     "ignoreBEMModifier": false,
-    "captureClassesFromDoc": []
+    "captureClassesFromDoc": [],
+    "checkUnscoped": false,
   }]
 }
 ```
 
 - `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.
 
 ### `"ignoreBEMModifier": true`
 

docs/rules/require-selector-used-inside.md

@@ -54,13 +54,15 @@ div {}
 {
   "vue-scoped-css/require-selector-used-inside": ["error", {
     "ignoreBEMModifier": false,
-    "captureClassesFromDoc": []
+    "captureClassesFromDoc": [],
+    "checkUnscoped": false
   }]
 }
 ```
 
 - `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.
 
 ### `"ignoreBEMModifier": true`
 

lib/rules/no-unused-keyframes.ts

@@ -24,13 +24,24 @@ module.exports = {
     messages: {
       unused: "The @keyframes `{{params}}` is unused.",
     },
-    schema: [],
+    schema: [
+      {
+        type: "object",
+        properties: {
+          checkUnscoped: {
+            type: "boolean",
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
     type: "suggestion", // "problem",
   },
   create(context: RuleContext) {
+    const checkUnscoped = Boolean(context.options[0]?.checkUnscoped);
     const styles = getStyleContexts(context)
       .filter(isValidStyleContext)
-      .filter((style) => style.scoped);
+      .filter((style) => style.scoped || checkUnscoped);
     if (!styles.length) {
       return {};
     }

lib/rules/no-unused-selector.ts

@@ -124,6 +124,9 @@ module.exports = {
             minItems: 0,
             uniqueItems: true,
           },
+          checkUnscoped: {
+            type: "boolean",
+          },
         },
         additionalProperties: false,
       },
@@ -134,9 +137,10 @@ module.exports = {
     if (!hasTemplateBlock(context)) {
       return {};
     }
+    const checkUnscoped = Boolean(context.options[0]?.checkUnscoped);
     const styles = getStyleContexts(context)
       .filter(isValidStyleContext)
-      .filter((style) => style.scoped);
+      .filter((style) => style.scoped || checkUnscoped);
     if (!styles.length) {
       return {};
     }

lib/rules/require-selector-used-inside.ts

@@ -102,6 +102,9 @@ module.exports = {
             minItems: 0,
             uniqueItems: true,
           },
+          checkUnscoped: {
+            type: "boolean",
+          },
         },
         additionalProperties: false,
       },
@@ -112,9 +115,10 @@ module.exports = {
     if (!hasTemplateBlock(context)) {
       return {};
     }
+    const checkUnscoped = Boolean(context.options[0]?.checkUnscoped);
     const styles = getStyleContexts(context)
       .filter(isValidStyleContext)
-      .filter((style) => style.scoped);
+      .filter((style) => style.scoped || checkUnscoped);
     if (!styles.length) {
       return {};
     }

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

@@ -109,6 +109,16 @@ tester.run("no-unused-keyframes", rule as any, {
         }
         </style>
         `,
+    `
+    <template><a/></template>
+    <style>
+    .item {
+        animation-name: slidein;
+    }
+    @keyframes unused {
+    }
+    </style>
+    `,
   ],
   invalid: [
     {
@@ -177,5 +187,25 @@ tester.run("no-unused-keyframes", rule as any, {
         },
       ],
     },
+    {
+      code: `
+      <template><a/></template>
+      <style>
+      .item {
+          animation-name: slidein;
+      }
+      @keyframes unused {
+      }
+      </style>
+      `,
+      options: [{ checkUnscoped: true }],
+      errors: [
+        {
+          message: "The @keyframes `unused` is unused.",
+          line: 7,
+          column: 18,
+        },
+      ],
+    },
   ],
 });

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

@@ -385,13 +385,13 @@ tester.run("no-unused-selector", rule as any, {
         `,
     // not scoped
     `
-        <template>
-            <div></div>
-        </template>
-        <style>
-        input {}
-        </style>
-        `,
+    <template>
+        <div></div>
+    </template>
+    <style>
+    input {}
+    </style>
+    `,
 
     // deep
     `
@@ -1111,5 +1111,17 @@ tester.run("no-unused-selector", rule as any, {
             `,
       errors: ["The selector `.bar` is unused."],
     },
+    {
+      code: `
+      <template>
+          <div></div>
+      </template>
+      <style>
+      input {}
+      </style>
+      `,
+      options: [{ checkUnscoped: true }],
+      errors: ["The selector `input` is unused."],
+    },
   ],
 });

tests/lib/rules/require-selector-used-inside.ts

@@ -313,13 +313,13 @@ tester.run("require-selector-used-inside", rule as any, {
         `,
     // not scoped
     `
-        <template>
-            <div></div>
-        </template>
-        <style>
-        input {}
-        </style>
-        `,
+    <template>
+        <div></div>
+    </template>
+    <style>
+    input {}
+    </style>
+    `,
 
     // deep
     `
@@ -909,5 +909,17 @@ tester.run("require-selector-used-inside", rule as any, {
         "The selector `div>h3>` is unused in the template.",
       ],
     },
+    {
+      code: `
+      <template>
+          <div></div>
+      </template>
+      <style>
+      input {}
+      </style>
+      `,
+      options: [{ checkUnscoped: true }],
+      errors: ["The selector `input` is unused in the template."],
+    },
   ],
 });