Handle empty class attributes (#17)

* Handle empty class attributes

* Add test cases

Author: bradlc

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 })

tests/test.js

@@ -50,6 +50,8 @@ 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>`,
+  t`<div class=""></div>`,
 ]
 
 let css = [
@@ -72,6 +74,8 @@ let javascript = [
   t`;<div class={clsx('${yes}', ['${yes}'])} />`,
   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}\`} />`,
@@ -86,13 +90,15 @@ 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=""></div>`,
   t`<div :class="'${yes}' + '${yes}'"></div>`,
   t`<div :class="['${yes}', '${yes}']"></div>`,
   t`<div :class="[cond ? '${yes}' : '${yes}']"></div>`,
@@ -139,6 +145,8 @@ let tests = {
   meriyah: javascript,
   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}" />`,