@saasmakers/eslint 1.0.25 → 1.0.26

package/dist/index.cjs

@@ -810,9 +810,61 @@ const propsPrefixRegex = /\$?props\.(\w+)/g;
 const trueAttributeRegex = /(?<![\w-]):?(?!aria-)([a-z0-9-]+)="true"/gi;
 const eventHandlerRegex = /(?:@|v-on:)[^\s="'<>/]+\s*=\s*"([^"]*)"/g;
 const bareIdentifierRegex = /^[a-z_$][\w$]*$/i;
+const classBindingRegex = /(?<![\w-])(?::|v-bind:)class\s*=\s*"([^"]*)"/g;
+const simpleTernaryRegex = /^([^?]+)\?\s*'([^']*)'\s*:\s*'([^']*)'$/;
 const singleCallRegex = /^([a-z_$][\w$]*)\s*\(.*\)$/is;
 const onPrefixRegex = /^on[A-Z]/;
 const exemptCallees = /* @__PURE__ */ new Set(["$emit", "emit"]);
+function splitClassObjectProperties(body) {
+  const properties = [];
+  let depth = 0;
+  let quote;
+  let current = "";
+  for (let index = 0; index < body.length; index++) {
+    const char = body[index];
+    if (quote !== void 0) {
+      current += char;
+      if (char === quote && body[index - 1] !== "\\") {
+        quote = void 0;
+      }
+      continue;
+    }
+    if (char === "'" || char === '"' || char === "`") {
+      quote = char;
+      current += char;
+      continue;
+    }
+    if (char === "(" || char === "[" || char === "{") {
+      depth++;
+    } else if (char === ")" || char === "]" || char === "}") {
+      depth--;
+    }
+    if (char === "," && depth === 0) {
+      const property2 = current.trim();
+      if (property2 !== "") {
+        properties.push(property2);
+      }
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  const property = current.trim();
+  if (property !== "") {
+    properties.push(property);
+  }
+  return properties;
+}
+function buildClassObjectText(properties, baseIndent) {
+  if (properties.length <= 1) {
+    return `{ ${properties.join(", ")} }`;
+  }
+  const propertyIndent = `${baseIndent}  `;
+  const lines = properties.map((property) => `${propertyIndent}${property},`);
+  return `{
+${lines.join("\n")}
+${baseIndent}}`;
+}
 const dollarTPatterns = [
   {
     pattern: / \$t\(/g,
@@ -838,13 +890,16 @@ const dollarTPatterns = [
 const rule = {
   defaultOptions: [],
   meta: {
-    docs: { description: 'Format Vue templates: strip unnecessary props/$props prefixes, redundant ="true" attributes (except aria- attributes), enforce t() over $t(), require "on" prefix on named event listener handlers, and disallow inline event handler expressions' },
+    docs: { description: 'Format Vue templates: strip unnecessary props/$props prefixes, redundant ="true" attributes (except aria- attributes), enforce t() over $t(), require "on" prefix on named event listener handlers, disallow inline event handler expressions, require object syntax for dynamic :class bindings, and keep single-property :class objects on one line while spreading multi-property objects across lines' },
     fixable: "code",
     messages: {
+      dynamicClassMustBeObject: `Dynamic :class binding must use object syntax (e.g. :class="{ 'foo': condition }"). Ternaries, arrays, strings and bare variables are not allowed.`,
       eventHandlerMustBeFunction: 'Event listener must reference a named handler function (e.g. @click="onClose") or call one (e.g. @click="onClose($event)"). Inline expressions are not allowed.',
+      multilineClassObject: "Dynamic :class object with multiple properties must span multiple lines, one property per line.",
       noPropsPrefix: "Unnecessary props/$props prefix in template. Props are automatically available in template scope.",
       prefixEventHandlerWithOn: 'Event listener handler "{{name}}" must be prefixed with "on" (e.g. @click="onClick").',
       removeTrueAttribute: 'Unnecessary ="true" attribute. Use the attribute name directly instead.',
+      singleLineClassObject: "Dynamic :class object with a single property must stay on one line.",
       useT: "Use t() instead of $t() in Vue templates as it does not work with <i18n> tags."
     },
     schema: [],
@@ -957,6 +1012,68 @@ const rule = {
           }
           eventHandlerMatch = eventHandlerRegex.exec(templateContent);
         }
+        classBindingRegex.lastIndex = 0;
+        let classMatch = classBindingRegex.exec(templateContent);
+        while (classMatch !== null) {
+          const rawValue = classMatch[1];
+          const trimmedValue = rawValue.trim();
+          if (trimmedValue === "") {
+            classMatch = classBindingRegex.exec(templateContent);
+            continue;
+          }
+          const valueStart = templateStartIndex + classMatch.index + classMatch[0].length - 1 - rawValue.length;
+          const lineStart = templateContent.lastIndexOf("\n", classMatch.index) + 1;
+          const baseIndent = (/^[ \t]*/.exec(templateContent.slice(lineStart)) ?? [""])[0];
+          if (trimmedValue.startsWith("{")) {
+            const objectStartInRaw = rawValue.indexOf("{");
+            const objectEndInRaw = rawValue.lastIndexOf("}");
+            if (objectEndInRaw > objectStartInRaw) {
+              const objectText = rawValue.slice(objectStartInRaw, objectEndInRaw + 1);
+              const properties = splitClassObjectProperties(rawValue.slice(objectStartInRaw + 1, objectEndInRaw));
+              const isMultiline = objectText.includes("\n");
+              const shouldBeMultiline = properties.length >= 2;
+              if (properties.length > 0 && shouldBeMultiline !== isMultiline) {
+                const objectStart = valueStart + objectStartInRaw;
+                const objectEnd = valueStart + objectEndInRaw + 1;
+                context.report({
+                  fix: (fixer) => fixer.replaceTextRange([objectStart, objectEnd], buildClassObjectText(properties, baseIndent)),
+                  loc: {
+                    end: sourceCode.getLocFromIndex(objectEnd),
+                    start: sourceCode.getLocFromIndex(objectStart)
+                  },
+                  messageId: shouldBeMultiline ? "multilineClassObject" : "singleLineClassObject"
+                });
+              }
+            }
+            classMatch = classBindingRegex.exec(templateContent);
+            continue;
+          }
+          const valueEnd = valueStart + rawValue.length;
+          const ternaryMatch = simpleTernaryRegex.exec(trimmedValue);
+          let fix;
+          if (ternaryMatch) {
+            const condition = ternaryMatch[1].trim();
+            const truthyClass = ternaryMatch[2];
+            const falsyClass = ternaryMatch[3];
+            const entries = [];
+            if (truthyClass !== "") {
+              entries.push(`'${truthyClass}': ${condition}`);
+            }
+            if (falsyClass !== "") {
+              entries.push(`'${falsyClass}': !(${condition})`);
+            }
+            fix = (fixer) => fixer.replaceTextRange([valueStart, valueEnd], buildClassObjectText(entries, baseIndent));
+          }
+          context.report({
+            ...fix ? { fix } : {},
+            loc: {
+              end: sourceCode.getLocFromIndex(valueEnd),
+              start: sourceCode.getLocFromIndex(valueStart)
+            },
+            messageId: "dynamicClassMustBeObject"
+          });
+          classMatch = classBindingRegex.exec(templateContent);
+        }
       }
     };
   }

package/dist/index.d.cts

@@ -5203,7 +5203,7 @@ declare const _default: {
             locales?: string[];
         } | undefined)?], unknown, RuleListener>;
         'vue-format-script': RuleModule<"multilineComputed" | "untypedEmits", [], unknown, RuleListener>;
-        'vue-format-template': RuleModule<"eventHandlerMustBeFunction" | "noPropsPrefix" | "prefixEventHandlerWithOn" | "removeTrueAttribute" | "useT", [], unknown, RuleListener>;
+        'vue-format-template': RuleModule<"dynamicClassMustBeObject" | "eventHandlerMustBeFunction" | "multilineClassObject" | "noPropsPrefix" | "prefixEventHandlerWithOn" | "removeTrueAttribute" | "singleLineClassObject" | "useT", [], unknown, RuleListener>;
     };
 };
 

package/dist/index.d.mts

@@ -5203,7 +5203,7 @@ declare const _default: {
             locales?: string[];
         } | undefined)?], unknown, RuleListener>;
         'vue-format-script': RuleModule<"multilineComputed" | "untypedEmits", [], unknown, RuleListener>;
-        'vue-format-template': RuleModule<"eventHandlerMustBeFunction" | "noPropsPrefix" | "prefixEventHandlerWithOn" | "removeTrueAttribute" | "useT", [], unknown, RuleListener>;
+        'vue-format-template': RuleModule<"dynamicClassMustBeObject" | "eventHandlerMustBeFunction" | "multilineClassObject" | "noPropsPrefix" | "prefixEventHandlerWithOn" | "removeTrueAttribute" | "singleLineClassObject" | "useT", [], unknown, RuleListener>;
     };
 };
 

package/dist/index.d.ts

@@ -5203,7 +5203,7 @@ declare const _default: {
             locales?: string[];
         } | undefined)?], unknown, RuleListener>;
         'vue-format-script': RuleModule<"multilineComputed" | "untypedEmits", [], unknown, RuleListener>;
-        'vue-format-template': RuleModule<"eventHandlerMustBeFunction" | "noPropsPrefix" | "prefixEventHandlerWithOn" | "removeTrueAttribute" | "useT", [], unknown, RuleListener>;
+        'vue-format-template': RuleModule<"dynamicClassMustBeObject" | "eventHandlerMustBeFunction" | "multilineClassObject" | "noPropsPrefix" | "prefixEventHandlerWithOn" | "removeTrueAttribute" | "singleLineClassObject" | "useT", [], unknown, RuleListener>;
     };
 };
 

package/dist/index.mjs

@@ -808,9 +808,61 @@ const propsPrefixRegex = /\$?props\.(\w+)/g;
 const trueAttributeRegex = /(?<![\w-]):?(?!aria-)([a-z0-9-]+)="true"/gi;
 const eventHandlerRegex = /(?:@|v-on:)[^\s="'<>/]+\s*=\s*"([^"]*)"/g;
 const bareIdentifierRegex = /^[a-z_$][\w$]*$/i;
+const classBindingRegex = /(?<![\w-])(?::|v-bind:)class\s*=\s*"([^"]*)"/g;
+const simpleTernaryRegex = /^([^?]+)\?\s*'([^']*)'\s*:\s*'([^']*)'$/;
 const singleCallRegex = /^([a-z_$][\w$]*)\s*\(.*\)$/is;
 const onPrefixRegex = /^on[A-Z]/;
 const exemptCallees = /* @__PURE__ */ new Set(["$emit", "emit"]);
+function splitClassObjectProperties(body) {
+  const properties = [];
+  let depth = 0;
+  let quote;
+  let current = "";
+  for (let index = 0; index < body.length; index++) {
+    const char = body[index];
+    if (quote !== void 0) {
+      current += char;
+      if (char === quote && body[index - 1] !== "\\") {
+        quote = void 0;
+      }
+      continue;
+    }
+    if (char === "'" || char === '"' || char === "`") {
+      quote = char;
+      current += char;
+      continue;
+    }
+    if (char === "(" || char === "[" || char === "{") {
+      depth++;
+    } else if (char === ")" || char === "]" || char === "}") {
+      depth--;
+    }
+    if (char === "," && depth === 0) {
+      const property2 = current.trim();
+      if (property2 !== "") {
+        properties.push(property2);
+      }
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  const property = current.trim();
+  if (property !== "") {
+    properties.push(property);
+  }
+  return properties;
+}
+function buildClassObjectText(properties, baseIndent) {
+  if (properties.length <= 1) {
+    return `{ ${properties.join(", ")} }`;
+  }
+  const propertyIndent = `${baseIndent}  `;
+  const lines = properties.map((property) => `${propertyIndent}${property},`);
+  return `{
+${lines.join("\n")}
+${baseIndent}}`;
+}
 const dollarTPatterns = [
   {
     pattern: / \$t\(/g,
@@ -836,13 +888,16 @@ const dollarTPatterns = [
 const rule = {
   defaultOptions: [],
   meta: {
-    docs: { description: 'Format Vue templates: strip unnecessary props/$props prefixes, redundant ="true" attributes (except aria- attributes), enforce t() over $t(), require "on" prefix on named event listener handlers, and disallow inline event handler expressions' },
+    docs: { description: 'Format Vue templates: strip unnecessary props/$props prefixes, redundant ="true" attributes (except aria- attributes), enforce t() over $t(), require "on" prefix on named event listener handlers, disallow inline event handler expressions, require object syntax for dynamic :class bindings, and keep single-property :class objects on one line while spreading multi-property objects across lines' },
     fixable: "code",
     messages: {
+      dynamicClassMustBeObject: `Dynamic :class binding must use object syntax (e.g. :class="{ 'foo': condition }"). Ternaries, arrays, strings and bare variables are not allowed.`,
       eventHandlerMustBeFunction: 'Event listener must reference a named handler function (e.g. @click="onClose") or call one (e.g. @click="onClose($event)"). Inline expressions are not allowed.',
+      multilineClassObject: "Dynamic :class object with multiple properties must span multiple lines, one property per line.",
       noPropsPrefix: "Unnecessary props/$props prefix in template. Props are automatically available in template scope.",
       prefixEventHandlerWithOn: 'Event listener handler "{{name}}" must be prefixed with "on" (e.g. @click="onClick").',
       removeTrueAttribute: 'Unnecessary ="true" attribute. Use the attribute name directly instead.',
+      singleLineClassObject: "Dynamic :class object with a single property must stay on one line.",
       useT: "Use t() instead of $t() in Vue templates as it does not work with <i18n> tags."
     },
     schema: [],
@@ -955,6 +1010,68 @@ const rule = {
           }
           eventHandlerMatch = eventHandlerRegex.exec(templateContent);
         }
+        classBindingRegex.lastIndex = 0;
+        let classMatch = classBindingRegex.exec(templateContent);
+        while (classMatch !== null) {
+          const rawValue = classMatch[1];
+          const trimmedValue = rawValue.trim();
+          if (trimmedValue === "") {
+            classMatch = classBindingRegex.exec(templateContent);
+            continue;
+          }
+          const valueStart = templateStartIndex + classMatch.index + classMatch[0].length - 1 - rawValue.length;
+          const lineStart = templateContent.lastIndexOf("\n", classMatch.index) + 1;
+          const baseIndent = (/^[ \t]*/.exec(templateContent.slice(lineStart)) ?? [""])[0];
+          if (trimmedValue.startsWith("{")) {
+            const objectStartInRaw = rawValue.indexOf("{");
+            const objectEndInRaw = rawValue.lastIndexOf("}");
+            if (objectEndInRaw > objectStartInRaw) {
+              const objectText = rawValue.slice(objectStartInRaw, objectEndInRaw + 1);
+              const properties = splitClassObjectProperties(rawValue.slice(objectStartInRaw + 1, objectEndInRaw));
+              const isMultiline = objectText.includes("\n");
+              const shouldBeMultiline = properties.length >= 2;
+              if (properties.length > 0 && shouldBeMultiline !== isMultiline) {
+                const objectStart = valueStart + objectStartInRaw;
+                const objectEnd = valueStart + objectEndInRaw + 1;
+                context.report({
+                  fix: (fixer) => fixer.replaceTextRange([objectStart, objectEnd], buildClassObjectText(properties, baseIndent)),
+                  loc: {
+                    end: sourceCode.getLocFromIndex(objectEnd),
+                    start: sourceCode.getLocFromIndex(objectStart)
+                  },
+                  messageId: shouldBeMultiline ? "multilineClassObject" : "singleLineClassObject"
+                });
+              }
+            }
+            classMatch = classBindingRegex.exec(templateContent);
+            continue;
+          }
+          const valueEnd = valueStart + rawValue.length;
+          const ternaryMatch = simpleTernaryRegex.exec(trimmedValue);
+          let fix;
+          if (ternaryMatch) {
+            const condition = ternaryMatch[1].trim();
+            const truthyClass = ternaryMatch[2];
+            const falsyClass = ternaryMatch[3];
+            const entries = [];
+            if (truthyClass !== "") {
+              entries.push(`'${truthyClass}': ${condition}`);
+            }
+            if (falsyClass !== "") {
+              entries.push(`'${falsyClass}': !(${condition})`);
+            }
+            fix = (fixer) => fixer.replaceTextRange([valueStart, valueEnd], buildClassObjectText(entries, baseIndent));
+          }
+          context.report({
+            ...fix ? { fix } : {},
+            loc: {
+              end: sourceCode.getLocFromIndex(valueEnd),
+              start: sourceCode.getLocFromIndex(valueStart)
+            },
+            messageId: "dynamicClassMustBeObject"
+          });
+          classMatch = classBindingRegex.exec(templateContent);
+        }
       }
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/eslint",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "private": false,
   "description": "Shared ESLint config and rules for SaaS Makers projects",
   "license": "MIT",