Respect selfClosingStyle when joining tags Fixes #44417

extensions/emmet/src/splitJoinTag.ts

@@ -5,7 +5,7 @@
 
 import * as vscode from 'vscode';
 import { HtmlNode } from 'EmmetNode';
-import { getNode, parseDocument, validate } from './util';
+import { getNode, parseDocument, validate, getEmmetMode, getEmmetConfiguration } from './util';
 
 export function splitJoinTag() {
 	if (!validate(false) || !vscode.window.activeTextEditor) {
@@ -48,6 +48,14 @@ function getRangesToReplace(document: vscode.TextDocument, nodeToUpdate: HtmlNod
 		let end = <vscode.Position>nodeToUpdate.end;
 		rangeToReplace = new vscode.Range(start, end);
 		textToReplaceWith = '/>';
+
+		const emmetMode = getEmmetMode(document.languageId, []) || '';
+		const emmetConfig = getEmmetConfiguration(emmetMode);
+		if (emmetMode && emmetConfig.syntaxProfiles[emmetMode] &&
+			(emmetConfig.syntaxProfiles[emmetMode]['selfClosingStyle'] === 'xhtml' || emmetConfig.syntaxProfiles[emmetMode]['self_closing_tag'] === 'xhtml')) {
+			textToReplaceWith = ' ' + textToReplaceWith;
+		}
+
 	}
 
 	return new vscode.TextEdit(rangeToReplace, textToReplaceWith);

extensions/emmet/src/test/tagActions.test.ts

@@ -5,7 +5,7 @@
 
 import 'mocha';
 import * as assert from 'assert';
-import { Selection } from 'vscode';
+import { Selection, workspace } from 'vscode';
 import { withRandomFileEditor, closeAllEditors } from './testUtils';
 import { removeTag } from '../removeTag';
 import { updateTag } from '../updateTag';
@@ -14,7 +14,10 @@ import { splitJoinTag } from '../splitJoinTag';
 import { mergeLines } from '../mergeLines';
 
 suite('Tests for Emmet actions on html tags', () => {
-	teardown(closeAllEditors);
+	teardown(() => {
+		// Reset config and close all editors
+		return workspace.getConfiguration('emmet').update('syntaxProfiles', {}).then(closeAllEditors);
+	});
 
 	const contents = `
 	<div class="hello">
@@ -102,6 +105,32 @@ suite('Tests for Emmet actions on html tags', () => {
 		});
 	});
 
+	test('split/join tag in jsx with xhtml self closing tag', () => {
+		const expectedContents = `
+	<div class="hello">
+		<ul>
+			<li><span /></li>
+			<li><span>There</span></li>
+			<div><li><span>Bye</span></li></div>
+		</ul>
+		<span></span>
+	</div>
+	`;
+		return workspace.getConfiguration('emmet').update('syntaxProfiles', {jsx: {selfClosingStyle: 'xhtml'}}).then(() =>{
+			return withRandomFileEditor(contents, 'jsx', (editor, doc) => {
+				editor.selections = [
+					new Selection(3, 17, 3, 17), // join tag
+					new Selection(7, 5, 7, 5), // split tag
+				];
+
+				return splitJoinTag()!.then(() => {
+					assert.equal(doc.getText(), expectedContents);
+					return Promise.resolve()
+				});
+			});
+		});
+	});
+
 	test('match tag with mutliple cursors', () => {
 		return withRandomFileEditor(contents, 'html', (editor, doc) => {
 			editor.selections = [