Fixed false positives when there is no template block in no-unused-selector and require-selector-used-inside. (#22)

Author: ota-meshi

lib/rules/no-unused-selector.ts

@@ -21,6 +21,7 @@ import {
     StyleContext,
     getCommentDirectivesReporter,
 } from "../styles/context"
+import { hasTemplateBlock } from "../utils/utils"
 
 /**
  * Gets scoped selectors.
@@ -100,6 +101,9 @@ module.exports = {
         type: "suggestion", // "problem",
     },
     create(context: RuleContext) {
+        if (!hasTemplateBlock(context)) {
+            return {}
+        }
         const styles = getStyleContexts(context)
             .filter(StyleContext.isValid)
             .filter(style => style.scoped)

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

@@ -17,6 +17,7 @@ import {
     StyleContext,
     getCommentDirectivesReporter,
 } from "../styles/context"
+import { hasTemplateBlock } from "../utils/utils"
 
 /**
  * Gets scoped selectors.
@@ -79,6 +80,9 @@ module.exports = {
         type: "suggestion",
     },
     create(context: RuleContext) {
+        if (!hasTemplateBlock(context)) {
+            return {}
+        }
         const styles = getStyleContexts(context)
             .filter(StyleContext.isValid)
             .filter(style => style.scoped)

lib/utils/utils.ts

@@ -0,0 +1,10 @@
+import { RuleContext } from "../types"
+
+/**
+ * Checks whether the given context has template block
+ */
+export function hasTemplateBlock(context: RuleContext): boolean {
+    const sourceCode = context.getSourceCode()
+    const { ast } = sourceCode
+    return Boolean(ast.templateBody)
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-vue-scoped-css",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "ESLint plugin for Scoped CSS in Vue.js",
   "main": "dist/index.js",
   "scripts": {

package.json

@@ -253,7 +253,14 @@ tester.run("no-unused-selector", rule, {
         .foo-leave-active {}
         </style>
         `,
-
+        `
+        <script></script>
+        <style scoped lang="scss">
+        .no-template {
+            color: red;
+        }
+        </style>
+        `,
         // options
         // ignoreBEMModifier
         {

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

@@ -215,6 +215,14 @@ tester.run("require-selector-used-inside", rule, {
         .foo-leave-active {}
         </style>
         `,
+        `
+        <script></script>
+        <style scoped lang="scss">
+        .no-template {
+            color: red;
+        }
+        </style>
+        `,
         // options
         // ignoreBEMModifier
         {