From 2abc3b9fef3d199996adb53c5e964c35d6e3760b Mon Sep 17 00:00:00 2001
From: Scott Moore <me@scottwillmoore.au>
Date: Thu, 20 Jul 2023 18:46:39 +1000
Subject: [PATCH] Add empty expression expansion

---
 src/markup/format/html.ts |  5 +++++
 test/format.ts            | 28 ++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/src/markup/format/html.ts b/src/markup/format/html.ts
index b4befb35..2bdb57dc 100644
--- a/src/markup/format/html.ts
+++ b/src/markup/format/html.ts
@@ -116,6 +116,11 @@ function pushAttribute(attr: AbbreviationAttribute, state: WalkState) {
 
         name = attrName(name, config);
 
+        if (config.options['jsx.enabled'] && attr.multiple) {
+            lQuote = expressionStart;
+            rQuote = expressionEnd;
+        }
+
         const prefix = valuePrefix
             ? getMultiValue(attr.name, valuePrefix, attr.multiple)
             : null;
diff --git a/test/format.ts b/test/format.ts
index f2460422..a341e1fa 100644
--- a/test/format.ts
+++ b/test/format.ts
@@ -140,6 +140,34 @@ describe('Format', () => {
             opt.options['comment.after'] = ' { [%ID] }';
             equal(format('div>ul>li.item#foo', opt), '<div>\n\t<ul>\n\t\t<li class="item" id="foo"></li> { %foo }\n\t</ul>\n</div>');
         });
+
+        it('jsx', () => {
+            const config = createConfig({
+                syntax: 'jsx',
+                options: {
+                    'markup.attributes': {
+                        'class': 'className',
+                        'class*': 'className',
+                    },
+                    'markup.valuePrefix': {
+                        'class*': 'styles',
+                    },
+                    'output.field': (index) => `\${${index}}`,
+                },
+            });
+
+            equal(format('.', config), '<div className="${1}">${2}</div>');
+            equal(format('..', config), '<div className={${1}}>${2}</div>');
+
+            equal(format('div.', config), '<div className="${1}">${2}</div>');
+            equal(format('div..', config), '<div className={${1}}>${2}</div>');
+
+            equal(format('div.a', config), '<div className="a">${1}</div>');
+            equal(format('div..a', config), '<div className={styles.a}>${1}</div>');
+
+            equal(format('div.a.b', config), '<div className="a b">${1}</div>');
+            equal(format('div.a..b', config), '<div className="a b">${1}</div>');
+        });
     });
 
     describe('HAML', () => {