eslint-plugin-crisp 1.5.4 → 1.5.6

package/README.md

@@ -220,12 +220,16 @@ Each item has emojis denoting:
 | :- | :- | :- | :- | :- |
 | [crisp/vue-attribute-comma](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-attribute-comma.js) | Disallows trailing comma after attribute |  | 🟢 |
 | [crisp/vue-attribute-linebreak](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-attribute-linebreak.js) | Enforces linebreak before first attribute and after last attribute |  | 🟢 |
+| [crisp/vue-class-attribute-last](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-class-attribute-last.js) | Enforces `class` to be the last attribute holding a value, and `:class` to be the last bound attribute |  | 🟢 |
+| [crisp/vue-class-shorthand-max-len](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-class-shorthand-max-len.js) | Requires a multiline `:class` array when Pug class shorthand exceeds 100 characters |  | 🟢 |
 | [crisp/vue-computed-order](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-computed-order.js) | Ensures computed properties are alphabetically ordered |  | 🟢 |
 | [crisp/vue-define-component](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-define-component.js) | Enforces mixins and components to use the `defineComponent` wrapper |  | 🟢 |
 | [crisp/vue-emits-order](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-emits-order.js) | Ensures emits properties are alphabetically ordered |  | 🟢 |
 | [crisp/vue-header-check](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-header-check.js) | Ensures `script`, `template` and `style` tags start with corresponding comment block |  | 🟢 |
 | [crisp/vue-html-indent](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-html-indent.js) | Enforces consistent indentation in `template` (supports for Pug) |  | 🟢 |
 | [crisp/vue-html-quotes](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-html-quotes.js) | Enforces HTML attributes to be enclosed with double quotes |  | 🟢 |
+| [crisp/vue-no-component-class-shorthand](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-no-component-class-shorthand.js) | Disallows Pug class shorthand on Vue components |  | 🟢 |
+| [crisp/vue-no-mixed-class](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-no-mixed-class.js) | Disallows using both `class` and `:class` on the same element |  | 🟢 |
 | [crisp/vue-no-name-option](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-no-name-option.js) | Disallows explicit component names in Vue single-file components |  | 🟢 |
 | [crisp/vue-no-regex-data](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-no-regex-data.js) | Disallows regular expressions to be declared in Vue data object |  | 🟢 |
 | [crisp/vue-props-declaration-line-break](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-props-declaration-line-break.js) | Enforces line break between type and default function in prop definition |  | 🟢 |

package/index.js

@@ -43,6 +43,8 @@ import ruleTwoLinesBetweenClassMembers from "./rules/two-lines-between-class-mem
 import ruleVariableNames from "./rules/variable-names.js";
 import ruleVueAttributeComma from "./rules/vue-attribute-comma.js";
 import ruleVueAttributeLinebreak from "./rules/vue-attribute-linebreak.js";
+import ruleVueClassAttributeLast from "./rules/vue-class-attribute-last.js";
+import ruleVueClassShorthandMaxLen from "./rules/vue-class-shorthand-max-len.js";
 import ruleVueComputedOrder from "./rules/vue-computed-order.js";
 import ruleVueDataComment from "./rules/vue-data-comment.js";
 import ruleVueDefineComponent from "./rules/vue-define-component.js";
@@ -52,6 +54,8 @@ import ruleVueHtmlIndent from "./rules/vue-html-indent.js";
 import ruleVueHtmlQuotes from "./rules/vue-html-quotes.js";
 import ruleVueMethodsSeparator from "./rules/vue-methods-separator.js";
 import ruleVueNameProp from "./rules/vue-name-prop.js";
+import ruleVueNoComponentClassShorthand from "./rules/vue-no-component-class-shorthand.js";
+import ruleVueNoMixedClass from "./rules/vue-no-mixed-class.js";
 import ruleVueNoNameOption from "./rules/vue-no-name-option.js";
 import ruleVueNoRegexData from "./rules/vue-no-regex-data.js";
 import ruleVuePropsDeclarationLineBreak from "./rules/vue-props-declaration-line-break.js";
@@ -115,6 +119,8 @@ const plugin = {
     "variable-names": ruleVariableNames,
     "vue-attribute-comma": ruleVueAttributeComma,
     "vue-attribute-linebreak": ruleVueAttributeLinebreak,
+    "vue-class-attribute-last": ruleVueClassAttributeLast,
+    "vue-class-shorthand-max-len": ruleVueClassShorthandMaxLen,
     "vue-computed-order": ruleVueComputedOrder,
     "vue-data-comment": ruleVueDataComment,
     "vue-define-component": ruleVueDefineComponent,
@@ -124,6 +130,8 @@ const plugin = {
     "vue-html-quotes": ruleVueHtmlQuotes,
     "vue-methods-separator": ruleVueMethodsSeparator,
     "vue-name-prop": ruleVueNameProp,
+    "vue-no-component-class-shorthand": ruleVueNoComponentClassShorthand,
+    "vue-no-mixed-class": ruleVueNoMixedClass,
     "vue-no-name-option": ruleVueNoNameOption,
     "vue-no-regex-data": ruleVueNoRegexData,
     "vue-props-declaration-line-break": ruleVuePropsDeclarationLineBreak,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-crisp",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "description": "Custom ESLint Rules for Crisp",
   "author": "Crisp IM SAS",
   "main": "index.js",

package/recommended-vue.js

@@ -378,6 +378,8 @@ export default function configRecommendedVue(pluginCrisp) {
         // Crisp Vue rules
         "crisp/vue-attribute-comma": "error",
         "crisp/vue-attribute-linebreak": "error",
+        "crisp/vue-class-attribute-last": "error",
+        "crisp/vue-class-shorthand-max-len": "error",
         "crisp/vue-computed-order": "error",
         "crisp/vue-data-comment": "error",
         "crisp/vue-define-component": "error",
@@ -387,6 +389,8 @@ export default function configRecommendedVue(pluginCrisp) {
         "crisp/vue-html-quotes": "error",
         "crisp/vue-methods-separator": "error",
         "crisp/vue-name-prop": "error",
+        "crisp/vue-no-component-class-shorthand": "error",
+        "crisp/vue-no-mixed-class": "error",
         "crisp/vue-no-name-option": "error",
         "crisp/vue-no-regex-data": "error",
         "crisp/vue-props-declaration-line-break": "error",

package/rules/vue-class-attribute-last.js

@@ -0,0 +1,87 @@
+import utils from "eslint-plugin-vue/dist/utils/index.js";
+
+// Checks whether an attribute is a static class attribute
+function isStaticClass(attribute, sourceCode) {
+  if (attribute.directive === true || attribute.key.name !== "class") {
+    return false;
+  }
+
+  // Ignore Pug class shorthands (eg. 'div.foo'), as they cannot be moved
+  return sourceCode.getText(attribute).startsWith("class");
+}
+
+// Checks whether an attribute is a bound attribute (eg. ':prop' or 'v-bind:prop')
+function isBoundAttribute(attribute) {
+  return (
+    attribute.directive === true &&
+    attribute.key.name.name === "bind" &&
+    attribute.key.argument !== null &&
+    attribute.key.argument.type === "VIdentifier"
+  );
+}
+
+// Checks whether an attribute is a bound class attribute
+function isBoundClass(attribute) {
+  return isBoundAttribute(attribute) && attribute.key.argument.name === "class";
+}
+
+// Checks whether an attribute holds a value (ie. not a boolean shorthand prop)
+function hasValue(attribute) {
+  return attribute.value !== null;
+}
+
+export default {
+  meta: {
+    type: "layout",
+    docs: {
+      description: "enforce class attributes to be declared last within their group",
+      category: "Stylistic Issues",
+      recommended: false,
+    },
+    fixable: null,
+    schema: [], // no options
+  },
+
+  create(context) {
+    const sourceCode = context.getSourceCode();
+
+    // Reports attributes declared after the class attribute they should precede
+    function reportAttributesAfter(attributes, classIndex, className, isMisplaced) {
+      if (classIndex === -1) {
+        return;
+      }
+
+      attributes.slice(classIndex + 1).forEach((attribute) => {
+        if (isMisplaced(attribute)) {
+          context.report({
+            node: attribute,
+            message: "Attribute \"{{attributeName}}\" must be declared before the \"{{className}}\" attribute.",
+            data: {
+              attributeName: sourceCode.getText(attribute.key),
+              className,
+            },
+          });
+        }
+      });
+    }
+
+    return utils.default.defineTemplateBodyVisitor(context, {
+      "VStartTag"(node) {
+        const boundClassIndex = node.attributes.findIndex(isBoundClass);
+        const staticClassIndex = node.attributes.findIndex((attribute) => {
+          return isStaticClass(attribute, sourceCode);
+        });
+
+        // Bound class must come last among bound attributes
+        reportAttributesAfter(
+          node.attributes, boundClassIndex, ":class", isBoundAttribute
+        );
+
+        // Static class must come last among attributes holding a value
+        reportAttributesAfter(
+          node.attributes, staticClassIndex, "class", hasValue
+        );
+      },
+    });
+  },
+};

package/rules/vue-class-shorthand-max-len.js

@@ -0,0 +1,71 @@
+import utils from "eslint-plugin-vue/dist/utils/index.js";
+
+const DEFAULT_MAX_LENGTH = 100;
+const PUG_ELEMENT_HEAD_PATTERN =
+  /^(?:[A-Za-z][\w-]*)?(?:[.#][A-Za-z_][\w-]*)+$/;
+const CLASS_SHORTHAND_PATTERN = /\.[A-Za-z_][\w-]*/;
+
+// Checks whether a Pug element name belongs to a Vue component
+function isComponent(node) {
+  return node.name.includes("-") || /^[A-Z]/.test(node.rawName);
+}
+
+export default {
+  meta: {
+    type: "layout",
+    docs: {
+      description: "enforce a maximum length for Pug class shorthand",
+      category: "Stylistic Issues",
+      recommended: false,
+    },
+    fixable: null,
+    schema: [
+      {
+        type: "object",
+        properties: {
+          max: {
+            type: "integer",
+            minimum: 1,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      tooLong:
+        "Pug class shorthand is {{length}} characters long. Move classes to a multiline :class array (maximum: {{max}}).",
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.getSourceCode();
+    const maxLength = context.options[0]?.max ?? DEFAULT_MAX_LENGTH;
+
+    return utils.default.defineTemplateBodyVisitor(context, {
+      VElement(node) {
+        // Component shorthand is handled by vue-no-component-class-shorthand
+        if (isComponent(node)) {
+          return;
+        }
+
+        const startTagText = sourceCode.getText(node.startTag);
+        const elementHead = startTagText.split(/[\s(]/, 1)[0];
+
+        if (
+          PUG_ELEMENT_HEAD_PATTERN.test(elementHead) &&
+          CLASS_SHORTHAND_PATTERN.test(elementHead) &&
+          elementHead.length > maxLength
+        ) {
+          context.report({
+            node: node.startTag,
+            messageId: "tooLong",
+            data: {
+              length: elementHead.length,
+              max: maxLength,
+            },
+          });
+        }
+      },
+    });
+  },
+};

package/rules/vue-no-component-class-shorthand.js

@@ -0,0 +1,50 @@
+import utils from "eslint-plugin-vue/dist/utils/index.js";
+
+const CLASS_SHORTHAND_PATTERN = /\.[A-Za-z_][\w-]*/;
+
+// Checks whether a Pug element name belongs to a Vue component
+function isComponent(node) {
+  return node.name.includes("-") || /^[A-Z]/.test(node.rawName);
+}
+
+export default {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "disallow Pug class shorthand on Vue components",
+      category: "Stylistic Issues",
+      recommended: false,
+    },
+    fixable: null,
+    schema: [], // no options
+    messages: {
+      useClassAttribute:
+        "Use a class attribute instead of Pug class shorthand on component \"{{name}}\".",
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.getSourceCode();
+
+    return utils.default.defineTemplateBodyVisitor(context, {
+      VElement(node) {
+        if (!isComponent(node)) {
+          return;
+        }
+
+        const startTagText = sourceCode.getText(node.startTag);
+        const elementHead = startTagText.split(/[\s(]/, 1)[0];
+
+        if (CLASS_SHORTHAND_PATTERN.test(elementHead)) {
+          context.report({
+            node: node.startTag,
+            messageId: "useClassAttribute",
+            data: {
+              name: node.rawName,
+            },
+          });
+        }
+      },
+    });
+  },
+};

package/rules/vue-no-mixed-class.js

@@ -0,0 +1,49 @@
+import utils from "eslint-plugin-vue/dist/utils/index.js";
+
+// Checks whether an attribute is a static class attribute
+function isStaticClass(attribute) {
+  return (
+    attribute.directive === false &&
+    attribute.key.name === "class"
+  );
+}
+
+// Checks whether an attribute is a bound class directive
+function isBoundClass(attribute) {
+  return (
+    attribute.directive === true &&
+    attribute.key.name.name === "bind" &&
+    attribute.key.argument !== null &&
+    attribute.key.argument.type === "VIdentifier" &&
+    attribute.key.argument.name === "class"
+  );
+}
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "disallow using both static and bound class attributes on the same element",
+      category: "Possible Errors",
+      recommended: false,
+    },
+    fixable: null,
+    schema: [], // no options
+  },
+
+  create(context) {
+    return utils.default.defineTemplateBodyVisitor(context, {
+      "VStartTag"(node) {
+        const staticClass = node.attributes.find(isStaticClass);
+        const boundClass = node.attributes.find(isBoundClass);
+
+        if (staticClass && boundClass) {
+          context.report({
+            node: boundClass,
+            message: "Cannot use both \"class\" and \":class\" on the same element, merge them into \":class\".",
+          });
+        }
+      },
+    });
+  },
+};