From 88aba52e47bbfcd778f959bcdc37d1f4072b039f Mon Sep 17 00:00:00 2001
From: Sergey Chikuyonok <serge.che@gmail.com>
Date: Wed, 13 Mar 2024 16:45:23 +0300
Subject: [PATCH] Remove `for` attr in <label> if it contains <input>

Fixes issue described in #727
---
 src/markup/addon/label.ts | 43 +++++++++++++++++++++++++++++++++++++++
 src/markup/index.ts       |  5 +++++
 src/markup/utils.ts       | 17 ++++++++++++++++
 test/markup.ts            |  7 +++++++
 4 files changed, 72 insertions(+)
 create mode 100644 src/markup/addon/label.ts

diff --git a/src/markup/addon/label.ts b/src/markup/addon/label.ts
new file mode 100644
index 00000000..bae94a69
--- /dev/null
+++ b/src/markup/addon/label.ts
@@ -0,0 +1,43 @@
+import type { AbbreviationAttribute, AbbreviationNode } from '@emmetio/abbreviation';
+import { find } from '../utils.js';
+
+/**
+ * Preprocessor of `<label>` element: if it contains `<input>`, remove `for` attribute
+ * and `id` from input
+ */
+export default function label(node: AbbreviationNode) {
+    if (node.name === 'label') {
+        const input = find(node, n => (n.name === 'input' || n.name === 'textarea'));
+        if (input) {
+            // Remove empty `for` attribute
+            if (node.attributes) {
+                node.attributes = node.attributes.filter(attr => {
+                    return !(attr.name === 'for' && isEmptyAttribute(attr));
+                });
+            }
+
+            // Remove empty `id` attribute
+            if (input.attributes) {
+                input.attributes = input.attributes.filter(attr => {
+                    return !(attr.name === 'id' && isEmptyAttribute(attr));
+                });
+            }
+        }
+    }
+}
+
+function isEmptyAttribute(attr: AbbreviationAttribute) {
+    if (!attr.value) {
+        return true;
+    }
+
+    if (attr.value.length === 1) {
+        const token = attr.value[0];
+        if (token && typeof token !== 'string' && !token.name) {
+            // Attribute contains field
+            return true;
+        }
+    }
+
+    return false;
+}
diff --git a/src/markup/index.ts b/src/markup/index.ts
index 43126583..789407e8 100644
--- a/src/markup/index.ts
+++ b/src/markup/index.ts
@@ -6,6 +6,7 @@ import implicitTag from './implicit-tag.js';
 import lorem from './lorem/index.js';
 import xsl from './addon/xsl.js';
 import bem from './addon/bem.js';
+import label from './addon/label.js';
 import html from './format/html.js';
 import haml from './format/haml.js';
 import slim from './format/slim.js';
@@ -72,6 +73,10 @@ function transform(node: AbbreviationNode, ancestors: Container[], config: Confi
         xsl(node);
     }
 
+    if (config.type === 'markup') {
+        label(node);
+    }
+
     if (config.options['bem.enabled']) {
         bem(node, ancestors, config);
     }
diff --git a/src/markup/utils.ts b/src/markup/utils.ts
index afb5bdfb..3a976d4f 100644
--- a/src/markup/utils.ts
+++ b/src/markup/utils.ts
@@ -21,6 +21,23 @@ export function walk<S>(node: Container, fn: WalkVisitor<S>, state?: S) {
     node.children.forEach(callback);
 }
 
+/**
+ * Finds first child node that matches given `callback`
+ */
+export function find(node: Container, callback: (node: AbbreviationNode) => boolean | undefined): AbbreviationNode | undefined {
+    for (let i = 0; i < node.children.length; i++) {
+        const child = node.children[i];
+        if (callback(child)) {
+            return child;
+        }
+
+        const result = find(child, callback);
+        if (result) {
+            return result;
+        }
+    }
+}
+
 /**
  * Finds node which is the deepest for in current node or node itself.
  */
diff --git a/test/markup.ts b/test/markup.ts
index fd703617..3e19c023 100644
--- a/test/markup.ts
+++ b/test/markup.ts
@@ -29,6 +29,13 @@ describe('Markup abbreviations', () => {
         equal(expand('xsl:with-param[select]{foo}', config), '<xsl:with-param>foo</xsl:with-param>');
     });
 
+    it('<label> preprocessor', () => {
+        equal(expand('label>input'), '<label><input type="${1:text}" /></label>');
+        equal(expand('label>inp'), '<label><input type="${1:text}" name="${1}" /></label>');
+        equal(expand('label>span>input'), '<label><span><input type="${1:text}" /></span></label>');
+        equal(expand('label+inp'), '<label for=""></label><input type="${1:text}" name="${1}" id="${1}" />');
+    });
+
     describe('BEM transform', () => {
         const config = resolveConfig({
             options: { 'bem.enabled': true }