fix(css): suppress completions inside CSS/SCSS/LESS comments

When the cursor is inside a CSS, SCSS or LESS comment, the language
server still answered completion requests, surfacing suggestions like
`:after` after typing `:` in a comment. This bypassed
`editor.quickSuggestions.comments: off`, since `:` is registered as a
trigger character.

Add an `isInsideComment` helper that performs a single forward scan
tracking string and comment state, so comment delimiters inside string
literals are not mistaken for real comments. Block comments are honoured
for all three languages and `//` line comments are honoured for SCSS and
LESS. The CSS server returns `null` from `onCompletion` when the
position falls inside a comment.

Fixes #236215

Author: yogeshwaran-c

extensions/css-language-features/server/src/cssServer.ts

@@ -12,6 +12,7 @@ import { getLanguageModelCache } from './languageModelCache';
 import { runSafeAsync } from './utils/runner';
 import { DiagnosticsSupport, registerDiagnosticsPullSupport, registerDiagnosticsPushSupport } from './utils/validation';
 import { getDocumentContext } from './utils/documentContext';
+import { isInsideComment } from './utils/comments';
 import { fetchDataProviders } from './customData';
 import { RequestService, getRequestService } from './requests';
 
@@ -199,6 +200,10 @@ export function startServer(connection: Connection, runtime: RuntimeEnvironment)
 		return runSafeAsync(runtime, async () => {
 			const document = documents.get(textDocumentPosition.textDocument.uri);
 			if (document) {
+				const supportsLineComments = document.languageId === 'scss' || document.languageId === 'less';
+				if (isInsideComment(document.getText(), document.offsetAt(textDocumentPosition.position), supportsLineComments)) {
+					return null;
+				}
 				const [settings,] = await Promise.all([getDocumentSettings(document), dataProvidersReady]);
 				const styleSheet = stylesheets.get(document);
 				const documentContext = getDocumentContext(document.uri, workspaceFolders);

extensions/css-language-features/server/src/test/comments.test.ts

@@ -0,0 +1,61 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import 'mocha';
+import * as assert from 'assert';
+import { isInsideComment } from '../utils/comments';
+
+suite('isInsideComment', () => {
+
+	function at(text: string): { text: string; offset: number } {
+		const offset = text.indexOf('|');
+		assert.notStrictEqual(offset, -1, 'test text must contain a | marker');
+		return { text: text.slice(0, offset) + text.slice(offset + 1), offset };
+	}
+
+	test('plain CSS rule is not in a comment', () => {
+		const { text, offset } = at('a { col|or: red; }');
+		assert.strictEqual(isInsideComment(text, offset, false), false);
+	});
+
+	test('inside a closed block comment', () => {
+		const { text, offset } = at('/* hello | world */');
+		assert.strictEqual(isInsideComment(text, offset, false), true);
+	});
+
+	test('after a closed block comment', () => {
+		const { text, offset } = at('/* hello world */ a { co|lor: red }');
+		assert.strictEqual(isInsideComment(text, offset, false), false);
+	});
+
+	test('inside an unterminated block comment', () => {
+		const { text, offset } = at('a { color: red } /* trailing | text');
+		assert.strictEqual(isInsideComment(text, offset, false), true);
+	});
+
+	test('at a colon inside a multi-line block comment (issue #236215)', () => {
+		const { text, offset } = at('/* element:|\n   continued */');
+		assert.strictEqual(isInsideComment(text, offset, false), true);
+	});
+
+	test('block comment delimiters inside a string literal are ignored', () => {
+		const { text, offset } = at('a::before { content: \'/*\'; co|lor: red }');
+		assert.strictEqual(isInsideComment(text, offset, false), false);
+	});
+
+	test('SCSS line comment is detected when supported', () => {
+		const { text, offset } = at('a { color: red } // line co|mment\nb { }');
+		assert.strictEqual(isInsideComment(text, offset, true), true);
+	});
+
+	test('SCSS line comment is not detected for plain CSS', () => {
+		const { text, offset } = at('a { color: red } // line co|mment\nb { }');
+		assert.strictEqual(isInsideComment(text, offset, false), false);
+	});
+
+	test('after a SCSS line comment is not in a comment', () => {
+		const { text, offset } = at('// hello\nb { co|lor: red }');
+		assert.strictEqual(isInsideComment(text, offset, true), false);
+	});
+});

extensions/css-language-features/server/src/utils/comments.ts

@@ -0,0 +1,67 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+const enum CharCode {
+	Slash = 0x2F,
+	Asterisk = 0x2A,
+	Backslash = 0x5C,
+	DoubleQuote = 0x22,
+	SingleQuote = 0x27,
+}
+
+/**
+ * Returns whether the given offset falls within a CSS, SCSS or LESS comment.
+ *
+ * Performs a single forward scan from the start of the text, tracking string
+ * and comment state so that occurrences of comment delimiters inside string
+ * literals are not mistaken for real comments.
+ *
+ * Block comments are recognised for all three languages. Line comments are
+ * only recognised when `supportsLineComments` is `true` (SCSS and LESS).
+ */
+export function isInsideComment(text: string, offset: number, supportsLineComments: boolean): boolean {
+	let i = 0;
+	while (i < offset) {
+		const ch = text.charCodeAt(i);
+		// Block comment start
+		if (ch === CharCode.Slash && text.charCodeAt(i + 1) === CharCode.Asterisk) {
+			const end = text.indexOf('*/', i + 2);
+			if (end === -1 || end >= offset) {
+				return true;
+			}
+			i = end + 2;
+			continue;
+		}
+		// Line comment start (SCSS/LESS only)
+		if (supportsLineComments && ch === CharCode.Slash && text.charCodeAt(i + 1) === CharCode.Slash) {
+			const nl = text.indexOf('\n', i + 2);
+			if (nl === -1 || nl >= offset) {
+				return true;
+			}
+			i = nl + 1;
+			continue;
+		}
+		// String literal: skip to matching quote, honouring backslash escapes
+		if (ch === CharCode.DoubleQuote || ch === CharCode.SingleQuote) {
+			const quote = ch;
+			i++;
+			while (i < offset) {
+				const c = text.charCodeAt(i);
+				if (c === CharCode.Backslash) {
+					i += 2;
+					continue;
+				}
+				if (c === quote) {
+					i++;
+					break;
+				}
+				i++;
+			}
+			continue;
+		}
+		i++;
+	}
+	return false;
+}