Fix false positives due to conflicts with other rules in `vue/no-unus…

…ed-properties` rule (#1790)
vuejs · Feb 4, 2022 · bd1fcb5 · bd1fcb5
1 parent d6f0337
commit bd1fcb5
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/lib/rules/no-unused-properties.js b/lib/rules/no-unused-properties.js
@@ -586,8 +586,7 @@ module.exports = {
         }
       }),
       {
-        /** @param {Program} node */
-        'Program:exit'(node) {
+        Program() {
           const styleVars = getStyleVariablesContext(context)
           if (styleVars) {
             templatePropertiesContainer.propertyReferences.push(
@@ -596,6 +595,9 @@ module.exports = {
               )
             )
           }
+        },
+        /** @param {Program} node */
+        'Program:exit'(node) {
           if (!node.templateBody) {
             reportUnusedProperties()
           }

diff --git a/tests/lib/rules/no-unused-properties.js b/tests/lib/rules/no-unused-properties.js
@@ -4,7 +4,8 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const { RuleTester, Linter } = require('eslint')
+const assert = require('assert')
 const rule = require('../../../lib/rules/no-unused-properties')
 
 const tester = new RuleTester({
@@ -2805,3 +2806,42 @@ tester.run('no-unused-properties', rule, {
     }
   ]
 })
+
+// https://github.com/vuejs/eslint-plugin-vue/issues/1789
+describe('`vue/no-unused-properties` and `vue/no-unused-components` should not conflict.', () => {
+  const linter = new Linter()
+  linter.defineParser('vue-eslint-parser', require('vue-eslint-parser'))
+  linter.defineRule(
+    'vue/no-unused-components',
+    require('../../../lib/rules/no-unused-components')
+  )
+  linter.defineRule('vue/no-unused-properties', rule)
+
+  const config = {
+    parser: 'vue-eslint-parser',
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module'
+    },
+    rules: {
+      'vue/no-unused-components': 'error',
+      'vue/no-unused-properties': 'error'
+    }
+  }
+
+  it('should not be a false positive when using CSS v-bind().', () => {
+    const code = `
+      <template></template>
+      <script>
+        export default {
+          props: ['a']
+        };
+      </script>
+      <style>
+      a {
+        color: v-bind(a);
+      }
+      </style>`
+    assert.deepStrictEqual(linter.verify(code, config, 'test.vue'), [])
+  })
+})