From a39646483d0708405ff1867689bb08939624b138 Mon Sep 17 00:00:00 2001
From: Brad Cornes <bradlc41@gmail.com>
Date: Tue, 25 Jan 2022 13:16:28 +0000
Subject: [PATCH 1/2] Handle empty class attributes

---
 src/index.js  | 7 +++++++
 tests/test.js | 6 +++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 1f68b3c8..00e05ecd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -41,6 +41,10 @@ function sortClasses(
   classStr,
   { env, ignoreFirst = false, ignoreLast = false }
 ) {
+  if (typeof classStr !== 'string' || classStr === '') {
+    return classStr
+  }
+
   // Ignore class attributes containing `{{`, to match Prettier behaviour:
   // https://github.com/prettier/prettier/blob/main/src/language-html/embed.js#L83-L88
   if (classStr.includes('{{')) {
@@ -268,6 +272,9 @@ function sortTemplateLiteral(node, { env }) {
 function transformJavaScript(ast, { env }) {
   visit(ast, {
     JSXAttribute(node) {
+      if (!node.value) {
+        return
+      }
       if (['class', 'className'].includes(node.name.name)) {
         if (isStringLiteral(node.value)) {
           sortStringLiteral(node.value, { env })
diff --git a/tests/test.js b/tests/test.js
index b85c46e6..8e2ba4de 100644
--- a/tests/test.js
+++ b/tests/test.js
@@ -50,6 +50,7 @@ let html = [
   t`<div class="${no} {{ 'p-0 sm:p-0 m-0' }}"></div>`,
   t`<div not-class="${no}"></div>`,
   ['<div class="  sm:p-0   p-0 "></div>', '<div class="p-0 sm:p-0"></div>'],
+  t`<div class></div>`,
 ]
 
 let css = [
@@ -72,6 +73,7 @@ let javascript = [
   t`;<div class={clsx('${yes}', ['${yes}'])} />`,
   t`;<div class={clsx({ '${yes}': '${yes}' })} />`,
   t`;<div class={{ '${yes}': '${yes}' }['${yes}']} />`,
+  t`;<div class />`,
   [
     `;<div class={\`sm:block inline flex\${someVar}\`} />`,
     `;<div class={\`inline sm:block flex\${someVar}\`} />`,
@@ -86,13 +88,14 @@ let javascript = [
   ],
 ]
 javascript = javascript.concat(
-  javascript.map((test) => test.map((t) => t.replace(/class=/g, 'className=')))
+  javascript.map((test) => test.map((t) => t.replace(/class/g, 'className')))
 )
 
 let vue = [
   ...html,
   t`<div :class="'${yes}'"></div>`,
   t`<!-- <div :class="'${no}'"></div> -->`,
+  t`<div :class></div>`,
   t`<div :class="'${yes}' + '${yes}'"></div>`,
   t`<div :class="['${yes}', '${yes}']"></div>`,
   t`<div :class="[cond ? '${yes}' : '${yes}']"></div>`,
@@ -138,6 +141,7 @@ let tests = {
   meriyah: javascript,
   svelte: [
     t`<div class="${yes}" />`,
+    t`<div class />`,
     t`<div class="${yes} {someVar}" />`,
     t`<div class="{someVar} ${yes}" />`,
     t`<div class="${yes} {someVar} ${yes}" />`,

From 2ae230568f4772e4ebde5975de1983a3fc3ea264 Mon Sep 17 00:00:00 2001
From: Brad Cornes <bradlc41@gmail.com>
Date: Tue, 25 Jan 2022 13:20:04 +0000
Subject: [PATCH 2/2] Add test cases

---
 tests/test.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/tests/test.js b/tests/test.js
index 8e2ba4de..aa5efa8e 100644
--- a/tests/test.js
+++ b/tests/test.js
@@ -51,6 +51,7 @@ let html = [
   t`<div not-class="${no}"></div>`,
   ['<div class="  sm:p-0   p-0 "></div>', '<div class="p-0 sm:p-0"></div>'],
   t`<div class></div>`,
+  t`<div class=""></div>`,
 ]
 
 let css = [
@@ -74,6 +75,7 @@ let javascript = [
   t`;<div class={clsx({ '${yes}': '${yes}' })} />`,
   t`;<div class={{ '${yes}': '${yes}' }['${yes}']} />`,
   t`;<div class />`,
+  t`;<div class="" />`,
   [
     `;<div class={\`sm:block inline flex\${someVar}\`} />`,
     `;<div class={\`inline sm:block flex\${someVar}\`} />`,
@@ -96,6 +98,7 @@ let vue = [
   t`<div :class="'${yes}'"></div>`,
   t`<!-- <div :class="'${no}'"></div> -->`,
   t`<div :class></div>`,
+  t`<div :class=""></div>`,
   t`<div :class="'${yes}' + '${yes}'"></div>`,
   t`<div :class="['${yes}', '${yes}']"></div>`,
   t`<div :class="[cond ? '${yes}' : '${yes}']"></div>`,
@@ -142,6 +145,7 @@ let tests = {
   svelte: [
     t`<div class="${yes}" />`,
     t`<div class />`,
+    t`<div class="" />`,
     t`<div class="${yes} {someVar}" />`,
     t`<div class="{someVar} ${yes}" />`,
     t`<div class="${yes} {someVar} ${yes}" />`,