Support bem filter in emmet fixes #30395

extensions/emmet/npm-shrinkwrap.json

@@ -123,9 +123,9 @@
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz"
     },
     "vscode-emmet-helper": {
-      "version": "0.0.29",
-      "from": "vscode-emmet-helper@0.0.29",
-      "resolved": "https://registry.npmjs.org/vscode-emmet-helper/-/vscode-emmet-helper-0.0.29.tgz"
+      "version": "1.0.0",
+      "from": "vscode-emmet-helper@1.0.0",
+      "resolved": "https://registry.npmjs.org/vscode-emmet-helper/-/vscode-emmet-helper-1.0.0.tgz"
     },
     "vscode-languageserver-types": {
       "version": "3.3.0",

extensions/emmet/package.json

@@ -74,7 +74,7 @@
         "@emmetio/html-matcher": "^0.3.1",
         "@emmetio/css-parser": "^0.3.0",
         "@emmetio/math-expression": "^0.1.1",
-        "vscode-emmet-helper":"^0.0.29",
+        "vscode-emmet-helper":"^1.0.0",
         "vscode-languageserver-types": "^3.0.3",
         "image-size": "^0.5.2"
     }

extensions/emmet/src/abbreviationActions.ts

@@ -7,13 +7,14 @@ import * as vscode from 'vscode';
 import { expand } from '@emmetio/expand-abbreviation';
 import { Node, HtmlNode, Rule } from 'EmmetNode';
 import { getNode, getInnerRange, getMappingForIncludedLanguages, parseDocument, validate } from './util';
-import { getExpandOptions, extractAbbreviation, isStyleSheet, isAbbreviationValid, getEmmetMode } from 'vscode-emmet-helper';
+import { getExpandOptions, extractAbbreviation, extractAbbreviationFromText, isStyleSheet, isAbbreviationValid, getEmmetMode } from 'vscode-emmet-helper';
 
 interface ExpandAbbreviationInput {
 	syntax: string;
 	abbreviation: string;
 	rangeToReplace: vscode.Range;
 	textToWrap?: string;
+	filters?: string[];
 }
 
 export function wrapWithAbbreviation(args) {
@@ -65,11 +66,12 @@ export function expandAbbreviation(args) {
 	let firstAbbreviation: string;
 	let allAbbreviationsSame: boolean = true;
 
-	let getAbbreviation = (document: vscode.TextDocument, selection: vscode.Selection, position: vscode.Position, isHtml: boolean): [vscode.Range, string] => {
+	let getAbbreviation = (document: vscode.TextDocument, selection: vscode.Selection, position: vscode.Position, isHtml: boolean): [vscode.Range, string, string[]] => {
 		let rangeToReplace: vscode.Range = selection;
-		let abbreviation = document.getText(rangeToReplace);
+		let abbr = document.getText(rangeToReplace);
 		if (!rangeToReplace.isEmpty) {
-			return [rangeToReplace, abbreviation];
+			let { abbreviation, filters } = extractAbbreviationFromText(abbr);
+			return [rangeToReplace, abbreviation, filters];
 		}
 
 		// Expand cases like <div to <div></div> explicitly
@@ -79,17 +81,18 @@ export function expandAbbreviation(args) {
 			const textTillPosition = currentLine.substr(0, position.character);
 			let matches = textTillPosition.match(/<(\w+)$/);
 			if (matches) {
-				abbreviation = matches[1];
-				rangeToReplace = new vscode.Range(position.translate(0, -(abbreviation.length + 1)), position);
-				return [rangeToReplace, abbreviation];
+				abbr = matches[1];
+				rangeToReplace = new vscode.Range(position.translate(0, -(abbr.length + 1)), position);
+				return [rangeToReplace, abbr, []];
 			}
 		}
-		return extractAbbreviation(editor.document, position);
+		let { abbreviationRange, abbreviation, filters } = extractAbbreviation(editor.document, position);
+		return [new vscode.Range(abbreviationRange.start.line, abbreviationRange.start.character, abbreviationRange.end.line, abbreviationRange.end.character), abbreviation, filters];
 	};
 
 	editor.selections.forEach(selection => {
 		let position = selection.isReversed ? selection.anchor : selection.active;
-		let [rangeToReplace, abbreviation] = getAbbreviation(editor.document, selection, position, syntax === 'html');
+		let [rangeToReplace, abbreviation, filters] = getAbbreviation(editor.document, selection, position, syntax === 'html');
 		if (!isAbbreviationValid(syntax, abbreviation)) {
 			vscode.window.showErrorMessage('Emmet: Invalid abbreviation');
 			return;
@@ -106,7 +109,7 @@ export function expandAbbreviation(args) {
 			allAbbreviationsSame = false;
 		}
 
-		abbreviationList.push({ syntax, abbreviation, rangeToReplace });
+		abbreviationList.push({ syntax, abbreviation, rangeToReplace, filters });
 	});
 
 	return expandAbbreviationInRange(editor, abbreviationList, allAbbreviationsSame);
@@ -194,13 +197,17 @@ function expandAbbreviationInRange(editor: vscode.TextEditor, expandAbbrList: Ex
  */
 function expandAbbr(input: ExpandAbbreviationInput): string {
 	const emmetConfig = vscode.workspace.getConfiguration('emmet');
-	const expandOptions = getExpandOptions(emmetConfig['syntaxProfiles'], emmetConfig['variables'], input.syntax, input.textToWrap);
+	const expandOptions = getExpandOptions(input.syntax, emmetConfig['syntaxProfiles'], emmetConfig['variables'], input.filters);
 
-	// Below fixes https://github.com/Microsoft/vscode/issues/29898
-	// With this, Emmet formats inline elements as block elements
-	// ensuring the wrapped multi line text does not get merged to a single line
-	if (input.textToWrap && !input.rangeToReplace.isSingleLine) {
-		expandOptions.profile['inlineBreak'] = 1;
+	if (input.textToWrap) {
+		expandOptions['text'] = input.textToWrap;
+
+		// Below fixes https://github.com/Microsoft/vscode/issues/29898
+		// With this, Emmet formats inline elements as block elements
+		// ensuring the wrapped multi line text does not get merged to a single line
+		if (!input.rangeToReplace.isSingleLine) {
+			expandOptions.profile['inlineBreak'] = 1;
+		}
 	}
 
 	try {

extensions/emmet/src/test/abbreviationAction.test.ts

@@ -21,6 +21,12 @@ const cssContents = `
 }
 `;
 
+const bemFilterExample = 'ul.search-form._wide>li.-querystring+li.-btn_large|bem';
+const expectedBemFilterOutput = `<ul class="search-form search-form_wide">
+		<li class="search-form__querystring"></li>
+		<li class="search-form__btn search-form__btn_large"></li>
+	</ul>`;
+
 const htmlContents = `
 <body class="header">
 	<ul class="nav main">
@@ -37,6 +43,7 @@ const htmlContents = `
 			m10
 		}
 	</style>
+	${bemFilterExample}
 </body>
 `;
 
@@ -147,6 +154,10 @@ suite('Tests for Expand Abbreviations (HTML)', () => {
 		});
 	});
 
+	test('Expand using bem filter', () => {
+		return testHtmlExpandAbbreviation(new Selection(16, 55, 16, 55), bemFilterExample, expectedBemFilterOutput);
+	});
+
 });
 
 suite('Tests for Expand Abbreviations (CSS)', () => {