Add vue/no-restricted-class rule

docs/rules/no-restricted-class.md

@@ -0,0 +1,104 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-restricted-class
+description: disallow specific classes
+since: v7.19.0
+---
+# vue/no-restricted-classes
+
+> disallow specific classes
+
+## :book: Rule Details
+
+This rule lets you specify a list of classes that you don't want to allow in your templates.
+
+## :wrench: Options
+
+The simplest way to specify a list of forbidden classes is to pass it directly
+in the rule configuration.
+
+```json
+{
+  "vue/no-restricted-props": ["error", { classes: ["forbidden"] }]
+}
+```
+
+<eslint-code-block :rules="{'vue/no-restricted-class': ['error', { classes: ['forbidden'] }]}">
+
+```vue
+<template>
+  <!-- ✗ BAD -->
+  <div class="forbidden" />
+  <div :class="{forbidden: someBoolean}" />
+  <div :class="`forbidden ${someString}`" />
+  <div :class="'forbidden'" />
+  <div :class="'forbidden ' + someString" />
+  <!-- ✗ GOOD -->
+  <div class="allowed-class" />
+</template>
+
+<script>
+export default {
+  props: {
+    someBoolean: Boolean,
+    someString: String,
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+
+Alternatively, you can also specify a list of files that contain forbidden classes. Each file
+must contain a JSON-formatted array of strings.
+
+```json
+{
+  "vue/no-restricted-props": ["error",
+    {
+      files: [".eslint/forbidden-classes.json"]
+    },
+  ]
+}
+```
+
+`.eslint/forbidden-classes.json`:
+
+```
+[
+  "forbidden-class",
+  "another-forbidden-class"
+]
+```
+
+::: warning Note
+This rule will only detect classes that are used as strings in your templates. Passing classes via
+variables, like below, will not be detected by this rule.
+
+```vue
+<template>
+  <div :class="classes" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      classes: "forbidden"
+    }
+  }
+}
+</script>
+```
+:::
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.19.0.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-restricted-class.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-restricted-class.js)

lib/rules/no-restricted-class.js

@@ -0,0 +1,221 @@
+/**
+ * @fileoverview Forbid certain classes from being used
+ * @author Tao Bojlen
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+const fs = require('fs')
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+/**
+ * Report a forbidden class
+ * @param {Set<string>} classes
+ * @param {*} node
+ * @param {RuleContext} context
+ * @param {Set<string>} forbiddenClasses
+ */
+const reportForbiddenClasses = (classes, node, context, forbiddenClasses) => {
+  classes.forEach((className) => {
+    if (forbiddenClasses.has(className)) {
+      context.report({
+        node,
+        loc: node.value.loc,
+        messageId: 'forbiddenClass',
+        data: {
+          class: className
+        }
+      })
+    }
+  })
+}
+
+/**
+ * Recursively flatten a binary Expression into a string
+ * @param {BinaryExpression | Expression} left
+ * @param {BinaryExpression | Expression} right
+ * @returns {string}
+ */
+const flattenBinaryExpression = (left, right) => {
+  const result = []
+  if (left) {
+    if (left.type === 'Literal') {
+      result.push(left.value)
+    } else if (
+      left.type === 'BinaryExpression' &&
+      left.left.type !== 'PrivateIdentifier'
+    ) {
+      result.push(flattenBinaryExpression(left.left, left.right))
+    }
+  }
+
+  if (right) {
+    if (right.type === 'Literal') {
+      result.push(right.value)
+    } else if (
+      right.type === 'BinaryExpression' &&
+      right.left.type !== 'PrivateIdentifier'
+    ) {
+      result.push(flattenBinaryExpression(right.left, right.right))
+    }
+  }
+
+  return result.join(' ')
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow specific classes in Vue components',
+      url: 'https://eslint.vuejs.org/rules/no-restricted-class.html',
+      categories: undefined
+    },
+    fixable: null,
+    messages: {
+      forbiddenClass: "'{{class}}' class is not allowed."
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          classes: {
+            type: 'array',
+            items: {
+              type: 'string'
+            }
+          },
+          files: {
+            type: 'array',
+            items: { type: 'string' }
+          }
+        },
+        additionalProperties: false
+      }
+    ]
+  },
+
+  /** @param {RuleContext} context */
+  create(context) {
+    const config = context.options[0] || {}
+    const forbiddenClasses = new Set(config.classes || [])
+    const forbiddenClassFiles = config.files || []
+
+    forbiddenClassFiles.forEach((/** @type {string} */ filePath) => {
+      if (!fs.existsSync(filePath)) {
+        throw new Error(`File "${filePath}" does not exist.`)
+      }
+      const rawData = fs.readFileSync(filePath, 'utf8')
+      JSON.parse(rawData).forEach((/** @type {string} */ forbiddenClass) => {
+        forbiddenClasses.add(forbiddenClass)
+      })
+    })
+
+    return utils.defineTemplateBodyVisitor(context, {
+      // <Element class="forbidden" />
+      /**
+       * @param {VAttribute & { value: VLiteral } } node
+       */
+      'VAttribute[directive=false][key.name="class"]'(node) {
+        const classes = new Set(node.value.value.split(/\s+/))
+        reportForbiddenClasses(classes, node, context, forbiddenClasses)
+      },
+
+      // <Element :class="{forbidden: someBoolean}" />
+      /**
+       * @param {VAttribute & { value: { expression: ObjectExpression } } } node
+       */
+      'VAttribute[directive=true][key.argument.name="class"][value.expression.type="ObjectExpression"]'(
+        node
+      ) {
+        const classes = node.value.expression.properties
+          .filter(
+            (property) =>
+              property.type === 'Property' &&
+              (property.key.type === 'Literal' ||
+                property.key.type === 'Identifier')
+          )
+          .reduce((acc, property) => {
+            // Ugly early return to make TS happy
+            if (
+              property.type !== 'Property' ||
+              (property.key.type !== 'Literal' &&
+                property.key.type !== 'Identifier')
+            )
+              return acc
+            let value = ''
+            if (property.key.type === 'Literal') {
+              value = (property.key.value || '').toString()
+            } else {
+              value = property.key.name
+            }
+            const values = value.split(/\s+/)
+            values.forEach((/** @type {string} */ className) => {
+              acc.add(className)
+            })
+            return acc
+          }, new Set())
+        reportForbiddenClasses(classes, node, context, forbiddenClasses)
+      },
+
+      // <Element :class="`forbidden ${someVar}`" />
+      /**
+       * @param {VAttribute & { value: { expression: TemplateLiteral } } } node
+       */
+      'VAttribute[directive=true][key.argument.name="class"][value.expression.type="TemplateLiteral"]'(
+        node
+      ) {
+        const strings = node.value.expression.quasis.reduce(
+          (acc, templateElement) => {
+            const classNames = templateElement.value.raw.split(/\s+/)
+            classNames.forEach((className) => {
+              acc.add(className)
+            })
+            return acc
+          },
+          new Set()
+        )
+        reportForbiddenClasses(strings, node, context, forbiddenClasses)
+      },
+
+      // <Element :class="'forbidden'" />
+      /**
+       * @param {VAttribute & { value: { expression: Literal } } } node
+       */
+      'VAttribute[directive=true][key.argument.name="class"][value.expression.type="Literal"]'(
+        node
+      ) {
+        if (!node.value.expression.value) return
+        const classNames = new Set(
+          node.value.expression.value.toString().split(/\s+/)
+        )
+        reportForbiddenClasses(classNames, node, context, forbiddenClasses)
+      },
+
+      // <Element :class="'forbidden' + ' otherClass'" />
+      /**
+       * @param {VAttribute & { value: { expression: BinaryExpression } } } node
+       */
+      'VAttribute[directive=true][key.argument.name="class"][value.expression.type="BinaryExpression"]'(
+        node
+      ) {
+        if (node.value.expression.left.type === 'PrivateIdentifier') return
+        const classNames = new Set(
+          flattenBinaryExpression(
+            node.value.expression.left,
+            node.value.expression.right
+          ).split(/\s+/)
+        )
+        reportForbiddenClasses(classNames, node, context, forbiddenClasses)
+      }
+    })
+  }
+}

tests/fixtures/no-restricted-class/forbidden.json

@@ -0,0 +1 @@
+["forbidden"]