eslint-plugin-crisp 1.5.5 → 1.5.7

package/README.md

@@ -221,12 +221,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-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 |  | 🟢 |

package/index.js

@@ -44,6 +44,7 @@ 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";
@@ -53,6 +54,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 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";
@@ -118,6 +120,7 @@ const plugin = {
     "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,
@@ -127,6 +130,7 @@ 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,

package/package.json

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

package/recommended-vue.js

@@ -379,6 +379,7 @@ export default function configRecommendedVue(pluginCrisp) {
         "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",
@@ -388,6 +389,7 @@ 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",

package/recommended.js

@@ -93,7 +93,7 @@ export default function configRecommended(pluginCrisp) {
         "keyword-spacing": "error",
         "linebreak-style": ["error", "unix"],
         "max-len": ["error", {
-          "code": 80,
+          "code": 100,
           "ignorePattern": "^\\/\\*\\* \@import"
         }],
         "no-console": "warn",

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,
+            },
+          });
+        }
+      },
+    });
+  },
+};