fix: don't wrap empty attributes (#8)

* fix: don't wrap empty attributes * fix: collapse empty multiline strings * chore: fix typo
schoero · Mar 10, 2024 · bf4426b · bf4426b
1 parent cc7169f
commit bf4426b
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 1 deletion.
diff --git a/src/parsers/svelte.ts b/src/parsers/svelte.ts
@@ -38,6 +38,11 @@ export function getLiteralsBySvelteClassAttribute(ctx: Rule.RuleContext, attribu
 
   const value = attribute.value[0];
 
+  // eslint-disable-next-line eslint-plugin-typescript/no-unnecessary-condition
+  if(!value){ // empty attribute
+    return [];
+  }
+
   if(isSvelteStringLiteral(value)){
     const stringLiteral = getStringLiteralBySvelteStringLiteral(ctx, value);
 

diff --git a/src/rules/tailwind-multiline.test.ts b/src/rules/tailwind-multiline.test.ts
@@ -7,6 +7,41 @@ import { tailwindMultiline } from "readable-tailwind:rules:tailwind-multiline.js
 
 describe(tailwindMultiline.name, () => {
 
+  it("should not wrap empty strings", () => {
+    expect(void lint(
+      tailwindMultiline,
+      TEST_SYNTAXES,
+      {
+        valid: [
+          {
+            html: "<div class=\"\" />",
+            jsx: "const Test = () => <div class=\"\" />;",
+            svelte: "<div class=\"\" />",
+            vue: "<template><div class=\"\" /></template>"
+          },
+          {
+            html: "<div class='' />",
+            jsx: "const Test = () => <div class='' />;",
+            svelte: "<div class='' />",
+            vue: "<template><div class='' /></template>"
+          },
+          {
+            jsx: "const Test = () => <div class={\"\"} />;",
+            svelte: "<div class={\"\"} />"
+          },
+          {
+            jsx: "const Test = () => <div class={''} />;",
+            svelte: "<div class={''} />"
+          },
+          {
+            jsx: "const Test = () => <div class={``} />;",
+            svelte: "<div class={``} />"
+          }
+        ]
+      }
+    )).toBeUndefined();
+  });
+
   it("should not wrap short lines", () => {
     expect(void lint(
       tailwindMultiline,

diff --git a/src/rules/tailwind-multiline.ts b/src/rules/tailwind-multiline.ts
@@ -397,7 +397,14 @@ function lintLiterals(ctx: Rule.RuleContext, literals: Literal[]) {
 
     }
 
-    // Skip line wrapping if it is not necessary
+    // skip if class string was empty
+    if(lines.length === 2){
+      if(!literal.openingBraces && !literal.closingBraces && literal.content.trim() === ""){
+        continue;
+      }
+    }
+
+    // skip line wrapping if it is not necessary
     skip: if(lines.length === 3){
 
       // disallow skipping for template literals with braces

diff --git a/src/rules/tailwind-no-unnecessary-whitespace.test.ts b/src/rules/tailwind-no-unnecessary-whitespace.test.ts
@@ -24,6 +24,31 @@ describe(tailwindNoUnnecessaryWhitespace.name, () => {
     })
   ).toBeUndefined());
 
+  it("should collapse empty multiline strings", () => {
+    const dirtyEmptyMultilineString = `
+
+    `;
+    const cleanEmptyMultilineString = "";
+
+    expect(
+      void lint(tailwindNoUnnecessaryWhitespace, TEST_SYNTAXES, {
+        invalid: [
+          {
+            errors: 1,
+            html: `<div class="${dirtyEmptyMultilineString}" />`,
+            htmlOutput: `<div class="${cleanEmptyMultilineString}" />`,
+            jsx: `const Test = () => <div class="${dirtyEmptyMultilineString}" />;`,
+            jsxOutput: `const Test = () => <div class="${cleanEmptyMultilineString}" />;`,
+            svelte: `<div class="${dirtyEmptyMultilineString}" />`,
+            svelteOutput: `<div class="${cleanEmptyMultilineString}" />`,
+            vue: `<template><div class="${dirtyEmptyMultilineString}" /></template>`,
+            vueOutput: `<template><div class="${cleanEmptyMultilineString}" /></template>`
+          }
+        ]
+      })
+    ).toBeUndefined();
+  });
+
   it("should keep the quotes as they are", () => expect(
     void lint(tailwindNoUnnecessaryWhitespace, TEST_SYNTAXES, {
       invalid: [

diff --git a/src/rules/tailwind-no-unnecessary-whitespace.ts b/src/rules/tailwind-no-unnecessary-whitespace.ts
@@ -239,6 +239,10 @@ function splitClassesKeepWhitespace(literal: Literal, allowMultiline: boolean):
 
   const mixedChunks: string[] = [];
 
+  if(classChunks.length === 0){
+    return [];
+  }
+
   while(whitespaceChunks.length > 0 || classChunks.length > 0){
 
     const whitespaceChunk = whitespaceChunks.shift();