From 3be60c650b6bbea52ee6d315e6314b931d84701d Mon Sep 17 00:00:00 2001
From: Johnson Chu <johnsoncodehk@gmail.com>
Date: Thu, 9 May 2024 16:14:17 +0800
Subject: [PATCH] fix(language-core): `<style>` completions and html custom
 data completions not provided in some cases

close #4092
---
 .../lib/codegen/template/context.ts           |  7 ++++
 .../lib/codegen/template/element.ts           | 35 +++++++++++++------
 .../lib/codegen/template/index.ts             | 12 ++++++-
 .../lib/utils/parseCssClassNames.ts           |  2 +-
 4 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/packages/language-core/lib/codegen/template/context.ts b/packages/language-core/lib/codegen/template/context.ts
index 9dff144c0a..e5e856a34f 100644
--- a/packages/language-core/lib/codegen/template/context.ts
+++ b/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);
diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts
index 0acb3dd8db..fa83578600 100644
--- a/packages/language-core/lib/codegen/template/element.ts
+++ b/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
diff --git a/packages/language-core/lib/codegen/template/index.ts b/packages/language-core/lib/codegen/template/index.ts
index 442c1dba0b..71963990d7 100644
--- a/packages/language-core/lib/codegen/template/index.ts
+++ b/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 [
diff --git a/packages/language-core/lib/utils/parseCssClassNames.ts b/packages/language-core/lib/utils/parseCssClassNames.ts
index 147376e135..cdd39a7179 100644
--- a/packages/language-core/lib/utils/parseCssClassNames.ts
+++ b/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);