Fix false positives for CSS v-bind() in vue/no-extra-parens rule (#1775)

Author: ota-meshi

lib/rules/no-extra-parens.js

@@ -5,6 +5,7 @@
 
 const { isParenthesized } = require('eslint-utils')
 const { wrapCoreRule } = require('../utils')
+const { getStyleVariablesContext } = require('../utils/style-variables')
 
 // eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
 module.exports = wrapCoreRule('no-extra-parens', {
@@ -116,6 +117,22 @@ function createForVueSyntax(context) {
     }
     return false
   }
+  /**
+   * Checks if the given node is CSS v-bind() without quote.
+   * @param {VExpressionContainer} node
+   * @param {Expression} expression
+   */
+  function isStyleVariableWithoutQuote(node, expression) {
+    const styleVars = getStyleVariablesContext(context)
+    if (!styleVars || !styleVars.vBinds.includes(node)) {
+      return false
+    }
+
+    const vBindToken = tokenStore.getFirstToken(node)
+    const tokens = tokenStore.getTokensBetween(vBindToken, expression)
+
+    return tokens.every(isLeftParen)
+  }
   /**
    * @param {VExpressionContainer & { expression: Expression | VFilterSequenceExpression | null }} node
    */
@@ -143,6 +160,9 @@ function createForVueSyntax(context) {
       if (isUnwrapChangeToFilter(expression)) {
         return
       }
+      if (isStyleVariableWithoutQuote(node, expression)) {
+        return
+      }
     }
     report(expression)
   }

tests/lib/rules/no-extra-parens.js

@@ -48,6 +48,12 @@ tester.run('no-extra-parens', rule, {
     .text {
       color: v-bind('a')
     }
+    </style>`,
+    `
+    <style>
+    .text {
+      color: v-bind(a)
+    }
     </style>`
   ],
   invalid: [