Inlcude checks at-rule for emmet css suggestions Fixes #32703

extensions/emmet/src/abbreviationActions.ts

@@ -189,21 +189,31 @@ export function isValidLocationForEmmetAbbreviation(currentNode: Node, syntax: s
 	}
 
 	if (isStyleSheet(syntax)) {
-		if (currentNode.type !== 'rule') {
+
+		// If current node is a rule or at-rule, then perform additional checks to ensure
+		// emmet suggestions are not provided in the rule selector
+		if (currentNode.type !== 'rule' && currentNode.type !== 'at-rule') {
 			return true;
 		}
+
 		const currentCssNode = <Rule>currentNode;
 
-		// Workaround for https://github.com/Microsoft/vscode/30188
-		if (currentCssNode.parent
-			&& currentCssNode.parent.type === 'rule'
-			&& currentCssNode.selectorToken
-			&& currentCssNode.selectorToken.start.line !== currentCssNode.selectorToken.end.line) {
+		// Position is valid if it occurs after the `{` that marks beginning of rule contents
+		if (position.isAfter(currentCssNode.contentStartToken.end)) {
 			return true;
 		}
 
-		// Position is valid if it occurs after the `{` that marks beginning of rule contents
-		return currentCssNode.selectorToken && position.isAfter(currentCssNode.selectorToken.end);
+		// Workaround for https://github.com/Microsoft/vscode/30188
+		// The line above the rule selector is considered as part of the selector by the css-parser
+		// But we should assume it is a valid location for css properties under the parent rule
+		if (currentCssNode.parent
+			&& (currentCssNode.parent.type === 'rule' || currentCssNode.parent.type === 'at-rule')
+			&& currentCssNode.selectorToken
+			&& position.line !== currentCssNode.selectorToken.end.line) {
+			return true;
+		}
+
+		return false;
 	}
 
 	const currentHtmlNode = <HtmlNode>currentNode;

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

@@ -21,6 +21,25 @@ const cssContents = `
 }
 `;
 
+const scssContents = `
+.boo {
+	margin: 10px;
+	p10
+	.hoo {
+		p20
+	}
+}
+@include b(alert) {
+    
+	margin: 10px;
+	p30
+
+	@include b(alert) {
+		p40   
+	}
+}
+`
+
 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>
@@ -186,7 +205,21 @@ suite('Tests for Expand Abbreviations (CSS)', () => {
 				return Promise.resolve();
 			});
 		});
+	});
 
+	test('Expand abbreviation (SCSS)', () => {
+		return withRandomFileEditor(scssContents, 'scss', (editor, doc) => {
+			editor.selections = [
+				new Selection(3, 4, 3, 4),
+				new Selection(5, 5, 5, 5),
+				new Selection(11, 4, 11, 4),
+				new Selection(14, 5, 14, 5)
+			];
+			return expandEmmetAbbreviation(null).then(() => {
+				assert.equal(editor.document.getText(), scssContents.replace(/p(\d\d)/g, 'padding: $1px;'));
+				return Promise.resolve();
+			});
+		});
 	});
 });
 
@@ -196,8 +229,8 @@ suite('Tests for Wrap with Abbreviations', () => {
 	const multiCursors = [new Selection(2, 6, 2, 6), new Selection(3, 6, 3, 6)];
 	const multiCursorsWithSelection = [new Selection(2, 2, 2, 28), new Selection(3, 2, 3, 33)];
 	const multiCursorsWithFullLineSelection = [new Selection(2, 0, 2, 28), new Selection(3, 0, 3, 33)];
-	
-	
+
+
 	test('Wrap with block element using multi cursor', () => {
 		return testWrapWithAbbreviation(multiCursors, 'div', wrapBlockElementExpected);
 	});
@@ -247,13 +280,13 @@ suite('Tests for Wrap with Abbreviations', () => {
 	});
 
 	test('Wrap individual lines with abbreviation', () => {
-	const contents = `
+		const contents = `
 	<ul class="nav main">
 		<li class="item1">img</li>
 		<li class="item2">hithere</li>
 	</ul>
 `;
-	const wrapIndividualLinesExpected = `
+		const wrapIndividualLinesExpected = `
 	<ul class="nav main">
 		<ul>
 			<li class="hello1"><li class="item1">img</li></li>
@@ -285,14 +318,14 @@ suite('Tests for Wrap with Abbreviations', () => {
 			</ul>
 		</ul>
 	`;
-			return withRandomFileEditor(contents, 'html', (editor, doc) => {
-				editor.selections = [new Selection(2, 3, 3, 16)];
-				return wrapIndividualLinesWithAbbreviation({ abbreviation: 'ul>li.hello$*|t' }).then(() => {
-					assert.equal(editor.document.getText(), wrapIndividualLinesExpected);
-					return Promise.resolve();
-				});
+		return withRandomFileEditor(contents, 'html', (editor, doc) => {
+			editor.selections = [new Selection(2, 3, 3, 16)];
+			return wrapIndividualLinesWithAbbreviation({ abbreviation: 'ul>li.hello$*|t' }).then(() => {
+				assert.equal(editor.document.getText(), wrapIndividualLinesExpected);
+				return Promise.resolve();
 			});
 		});
+	});
 });