eslint-plugin-crisp 1.5.3 → 1.5.5

package/README.md

@@ -220,12 +220,14 @@ 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-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-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,7 @@ 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 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 +53,7 @@ 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 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 +117,7 @@ const plugin = {
     "variable-names": ruleVariableNames,
     "vue-attribute-comma": ruleVueAttributeComma,
     "vue-attribute-linebreak": ruleVueAttributeLinebreak,
+    "vue-class-attribute-last": ruleVueClassAttributeLast,
     "vue-computed-order": ruleVueComputedOrder,
     "vue-data-comment": ruleVueDataComment,
     "vue-define-component": ruleVueDefineComponent,
@@ -124,6 +127,7 @@ const plugin = {
     "vue-html-quotes": ruleVueHtmlQuotes,
     "vue-methods-separator": ruleVueMethodsSeparator,
     "vue-name-prop": ruleVueNameProp,
+    "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.3",
+  "version": "1.5.5",
   "description": "Custom ESLint Rules for Crisp",
   "author": "Crisp IM SAS",
   "main": "index.js",

package/recommended-vue.js

@@ -378,6 +378,7 @@ 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-computed-order": "error",
         "crisp/vue-data-comment": "error",
         "crisp/vue-define-component": "error",
@@ -387,6 +388,7 @@ export default function configRecommendedVue(pluginCrisp) {
         "crisp/vue-html-quotes": "error",
         "crisp/vue-methods-separator": "error",
         "crisp/vue-name-prop": "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-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\".",
+          });
+        }
+      },
+    });
+  },
+};

package/rules/vue-watch-handler.js

@@ -1,7 +1,6 @@
 const VALID_SIGNATURES = [
   [],
   ["value"],
-  ["newValue"],
   ["newValue", "oldValue"]
 ];
 
@@ -47,8 +46,7 @@ export default {
       invalidHandler: "Watcher `handler` must be a function.",
       invalidSignature:
         "Watcher `handler` must use one of these signatures: " +
-        "`handler()`, `handler(value)`, `handler(newValue)`, or " +
-        "`handler(newValue, oldValue)`."
+        "`handler()`, `handler(value)`, or `handler(newValue, oldValue)`."
     }
   },