Add empty expression expansion (#719)

emmetio · Jul 31, 2023 · 09cdf18 · 09cdf18
1 parent a602caf
commit 09cdf18
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git 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
@@ -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', () => {