Allow restricting classes by regexp in vue/no-restricted-class (#2013)

vuejs · Oct 19, 2022 · 0d2607f · 0d2607f
1 parent 2479d2f
commit 0d2607f
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 5 deletions.
diff --git a/docs/rules/no-restricted-class.md b/docs/rules/no-restricted-class.md
@@ -20,7 +20,7 @@ in the rule configuration.
 
 ```json
 {
-  "vue/no-restricted-class": ["error", "forbidden", "forbidden-two", "forbidden-three"]
+  "vue/no-restricted-class": ["error", "forbidden", "forbidden-two", "forbidden-three", "/^for(bidden|gotten)/"]
 }
 ```
 

diff --git a/lib/rules/no-restricted-class.js b/lib/rules/no-restricted-class.js
@@ -5,16 +5,27 @@
 'use strict'
 
 const utils = require('../utils')
+const regexp = require('../utils/regexp')
 
 /**
  * Report a forbidden class
  * @param {string} className
  * @param {*} node
  * @param {RuleContext} context
  * @param {Set<string>} forbiddenClasses
+ * @param {Array<RegExp>} forbiddenClassesRegexps
  */
-const reportForbiddenClass = (className, node, context, forbiddenClasses) => {
-  if (forbiddenClasses.has(className)) {
+const reportForbiddenClass = (
+  className,
+  node,
+  context,
+  forbiddenClasses,
+  forbiddenClassesRegexps
+) => {
+  if (
+    forbiddenClasses.has(className) ||
+    forbiddenClassesRegexps.some((re) => re.test(className))
+  ) {
     const loc = node.value ? node.value.loc : node.loc
     context.report({
       node,
@@ -113,14 +124,23 @@ module.exports = {
   /** @param {RuleContext} context */
   create(context) {
     const forbiddenClasses = new Set(context.options || [])
+    const forbiddenClassesRegexps = (context.options || [])
+      .filter((cl) => regexp.isRegExp(cl))
+      .map((cl) => regexp.toRegExp(cl))
 
     return utils.defineTemplateBodyVisitor(context, {
       /**
        * @param {VAttribute & { value: VLiteral } } node
        */
       'VAttribute[directive=false][key.name="class"]'(node) {
         for (const className of node.value.value.split(/\s+/)) {
-          reportForbiddenClass(className, node, context, forbiddenClasses)
+          reportForbiddenClass(
+            className,
+            node,
+            context,
+            forbiddenClasses,
+            forbiddenClassesRegexps
+          )
         }
       },
 
@@ -135,7 +155,13 @@ module.exports = {
         for (const { className, reportNode } of extractClassNames(
           /** @type {Expression} */ (node.expression)
         )) {
-          reportForbiddenClass(className, reportNode, context, forbiddenClasses)
+          reportForbiddenClass(
+            className,
+            reportNode,
+            context,
+            forbiddenClasses,
+            forbiddenClassesRegexps
+          )
         }
       }
     })

diff --git a/tests/lib/rules/no-restricted-class.js b/tests/lib/rules/no-restricted-class.js
@@ -30,6 +30,10 @@ ruleTester.run('no-restricted-class', rule, {
     {
       code: `<template><div :class="'' + {forbidden: true}">Content</div></template>`,
       options: ['forbidden']
+    },
+    {
+      code: `<template><div class="allowed">Content</div></template>`,
+      options: ['/^for(bidden|gotten)/']
     }
   ],
 
@@ -113,6 +117,16 @@ ruleTester.run('no-restricted-class', rule, {
         }
       ],
       options: ['forbidden']
+    },
+    {
+      code: `<template><div class="forbidden allowed" /></template>`,
+      errors: [
+        {
+          message: "'forbidden' class is not allowed.",
+          type: 'VAttribute'
+        }
+      ],
+      options: ['/^for(bidden|gotten)/']
     }
   ]
 })