fix(language-core): <style> completions and html custom data completions not provided in some cases

close #4092

Author: johnsoncodehk

packages/language-core/lib/codegen/template/context.ts

@@ -31,6 +31,11 @@ const _codeFeatures = {
 	} as VueCodeInformation,
 	navigationAndCompletion: {
 		navigation: true,
+		completion: true,
+	} as VueCodeInformation,
+	navigationAndAdditionalCompletion: {
+		navigation: true,
+		completion: { isAdditional: true },
 	} as VueCodeInformation,
 	withoutHighlight: {
 		semantic: { shouldHighlight: () => false },
@@ -104,6 +109,7 @@ export function createTemplateCodegenContext(scriptSetupBindingNames: TemplateCo
 	const blockConditions: string[] = [];
 	const usedComponentCtxVars = new Set<string>();
 	const scopedClasses: { className: string, offset: number; }[] = [];
+	const emptyClassOffsets: number[] = [];
 
 	return {
 		slots,
@@ -114,6 +120,7 @@ export function createTemplateCodegenContext(scriptSetupBindingNames: TemplateCo
 		blockConditions,
 		usedComponentCtxVars,
 		scopedClasses,
+		emptyClassOffsets,
 		hasSlot: false,
 		accessExternalVariable(name: string, offset?: number) {
 			let arr = accessExternalVariables.get(name);

packages/language-core/lib/codegen/template/element.ts

@@ -549,20 +549,33 @@ function* generateReferencesForScopedCssClasses(
 			&& prop.value
 		) {
 			let startOffset = prop.value.loc.start.offset;
-			let tempClassName = '';
-			for (const char of (prop.value.loc.source + ' ')) {
-				if (char.trim() === '' || char === '"' || char === "'") {
-					if (tempClassName !== '') {
-						ctx.scopedClasses.push({ className: tempClassName, offset: startOffset });
-						startOffset += tempClassName.length;
-						tempClassName = '';
+			let content = prop.value.loc.source;
+			if (
+				(content.startsWith(`'`) && content.endsWith(`'`))
+				|| (content.startsWith(`"`) && content.endsWith(`"`))
+			) {
+				startOffset++;
+				content = content.slice(1, -1);
+			}
+			if (content) {
+				let currentClassName = '';
+				for (const char of (content + ' ')) {
+					if (char.trim() === '') {
+						if (currentClassName !== '') {
+							ctx.scopedClasses.push({ className: currentClassName, offset: startOffset });
+							startOffset += currentClassName.length;
+							currentClassName = '';
+						}
+						startOffset += char.length;
+					}
+					else {
+						currentClassName += char;
 					}
-					startOffset += char.length;
-				}
-				else {
-					tempClassName += char;
 				}
 			}
+			else {
+				ctx.emptyClassOffsets.push(startOffset);
+			}
 		}
 		else if (
 			prop.type === CompilerDOM.NodeTypes.DIRECTIVE

packages/language-core/lib/codegen/template/index.ts

@@ -86,6 +86,16 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
 
 	function* generateStyleScopedClasses(): Generator<Code> {
 		yield `if (typeof __VLS_styleScopedClasses === 'object' && !Array.isArray(__VLS_styleScopedClasses)) {${newLine}`;
+		for (const offset of ctx.emptyClassOffsets) {
+			yield `__VLS_styleScopedClasses['`;
+			yield [
+				'',
+				'template',
+				offset,
+				ctx.codeFeatures.additionalCompletion,
+			];
+			yield `']${endOfLine}`;
+		}
 		for (const { className, offset } of ctx.scopedClasses) {
 			yield `__VLS_styleScopedClasses[`;
 			yield [
@@ -99,7 +109,7 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
 				className,
 				'template',
 				offset,
-				ctx.codeFeatures.navigationAndCompletion,
+				ctx.codeFeatures.navigationAndAdditionalCompletion,
 			];
 			yield `'`;
 			yield [

packages/language-core/lib/utils/parseCssClassNames.ts

@@ -1,6 +1,6 @@
 import { clearComments } from './parseCssVars';
 
-const cssClassNameReg = /(?=([\.]{1}[a-zA-Z_]+[\w\_\-]*)[\s\.\+\{\>#\:]{1})/g;
+const cssClassNameReg = /(?=([\.]{1}[a-zA-Z_]+[\w\_\-]*)[\s\.\,\+\{\>#\:]{1})/g;
 
 export function* parseCssClassNames(styleContent: string) {
 	styleContent = clearComments(styleContent);