fix(language-core): unable to get completion for the second scoped class name

Author: johnsoncodehk

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

@@ -7,7 +7,6 @@ import { generateStyleModules } from '../style/modules';
 import { generateStyleScopedClasses } from '../style/scopedClasses';
 import { createTemplateCodegenContext, type TemplateCodegenContext } from '../template/context';
 import { generateInterpolation } from '../template/interpolation';
-import { generateStyleScopedClassReferences } from '../template/styleScopedClasses';
 import { endOfLine, generateSfcBlockSection, newLine } from '../utils';
 import { generateSpreadMerge } from '../utils/merge';
 import type { ScriptCodegenContext } from './context';
@@ -26,8 +25,7 @@ export function* generateTemplate(
 		scriptSetupBindingNames: new Set(),
 	});
 
-	yield* generateStyleScopedClasses(options, templateCodegenCtx);
-	yield* generateStyleScopedClassReferences(templateCodegenCtx, true);
+	yield* generateStyleScopedClasses(options);
 	yield* generateStyleModules(options);
 	yield* generateCssVars(options, templateCodegenCtx);
 	yield* generateBindings(options, ctx, templateCodegenCtx);

packages/language-core/lib/codegen/style/classProperty.ts

@@ -1,10 +1,25 @@
 import type { Code, Sfc, VueCodeInformation } from '../../types';
+import { codeFeatures } from '../codeFeatures';
 import { newLine } from '../utils';
 import { endBoundary, startBoundary } from '../utils/boundary';
 
-export function* generateStyleImports(
-	style: Sfc['styles'][number],
+export function* generateClassProperty(
+	source: string,
+	classNameWithDot: string,
+	offset: number,
+	propertyType: string,
 ): Generator<Code> {
+	yield `${newLine} & { `;
+	const token = yield* startBoundary(source, offset, codeFeatures.navigation);
+	yield `'`;
+	yield [classNameWithDot.slice(1), source, offset + 1, { __combineToken: token }];
+	yield `'`;
+	yield endBoundary(token, offset + classNameWithDot.length);
+	yield `: ${propertyType}`;
+	yield ` }`;
+}
+
+export function* generateStyleImports(style: Sfc['styles'][number]): Generator<Code> {
 	const features: VueCodeInformation = {
 		navigation: true,
 		verification: true,

packages/language-core/lib/codegen/style/imports.ts renamed to packages/language-core/lib/codegen/style/common.ts

@@ -2,18 +2,17 @@ import type { Code } from '../../types';
 import { codeFeatures } from '../codeFeatures';
 import type { ScriptCodegenOptions } from '../script';
 import { endOfLine, newLine } from '../utils';
-import { generateClassProperty } from './classProperty';
-import { generateStyleImports } from './imports';
+import { generateClassProperty, generateStyleImports } from './common';
 
 export function* generateStyleModules(
-	options: ScriptCodegenOptions,
+	{ styles, scriptSetupRanges, vueCompilerOptions }: ScriptCodegenOptions,
 ): Generator<Code> {
-	const styles = options.styles.map((style, i) => [style, i] as const).filter(([style]) => style.module);
-	if (!styles.length && !options.scriptSetupRanges?.useCssModule.length) {
+	const styleModules = styles.filter(style => style.module);
+	if (!styleModules.length && !scriptSetupRanges?.useCssModule.length) {
 		return;
 	}
 	yield `type __VLS_StyleModules = {${newLine}`;
-	for (const [style, i] of styles) {
+	for (const style of styleModules) {
 		if (style.module === true) {
 			yield `$style`;
 		}
@@ -27,16 +26,16 @@ export function* generateStyleModules(
 			];
 		}
 		yield `: `;
-		if (!options.vueCompilerOptions.strictCssModules) {
+		if (!vueCompilerOptions.strictCssModules) {
 			yield `Record<string, string> & `;
 		}
 		yield `__VLS_PrettifyGlobal<{}`;
-		if (options.vueCompilerOptions.resolveStyleImports) {
+		if (vueCompilerOptions.resolveStyleImports) {
 			yield* generateStyleImports(style);
 		}
 		for (const className of style.classNames) {
 			yield* generateClassProperty(
-				i,
+				style.name,
 				className.text,
 				className.offset,
 				'string',

packages/language-core/lib/codegen/style/modules.ts

@@ -1,45 +1,41 @@
 import type { Code } from '../../types';
 import type { ScriptCodegenOptions } from '../script';
-import type { TemplateCodegenContext } from '../template/context';
+import { generateStyleScopedClassReference } from '../template/styleScopedClasses';
 import { endOfLine } from '../utils';
-import { generateClassProperty } from './classProperty';
-import { generateStyleImports } from './imports';
+import { generateClassProperty, generateStyleImports } from './common';
 
 export function* generateStyleScopedClasses(
-	options: ScriptCodegenOptions,
-	ctx: TemplateCodegenContext,
+	{ vueCompilerOptions, styles }: ScriptCodegenOptions,
 ): Generator<Code> {
-	const option = options.vueCompilerOptions.resolveStyleClassNames;
-	const styles = options.styles
-		.map((style, i) => [style, i] as const)
-		.filter(([style]) => option === true || (option === 'scoped' && style.scoped));
-	if (!styles.length) {
+	const { resolveStyleClassNames, resolveStyleImports } = vueCompilerOptions;
+	if (!resolveStyleClassNames) {
 		return;
 	}
-
-	const firstClasses = new Set<string>();
+	const scopedStyles = styles.filter(style => resolveStyleClassNames === true || style.scoped);
+	if (!scopedStyles.length) {
+		return;
+	}
+	const visited = new Set<string>();
+	const deferredGenerations: Generator<Code>[] = [];
 	yield `type __VLS_StyleScopedClasses = {}`;
-	for (const [style, i] of styles) {
-		if (options.vueCompilerOptions.resolveStyleImports) {
+	for (const style of scopedStyles) {
+		if (resolveStyleImports) {
 			yield* generateStyleImports(style);
 		}
 		for (const className of style.classNames) {
-			if (firstClasses.has(className.text)) {
-				ctx.scopedClasses.push({
-					source: 'style_' + i,
-					className: className.text.slice(1),
-					offset: className.offset + 1,
-				});
-				continue;
+			if (!visited.has(className.text)) {
+				visited.add(className.text);
+				yield* generateClassProperty(style.name, className.text, className.offset, 'boolean');
+			}
+			else {
+				deferredGenerations.push(
+					generateStyleScopedClassReference(style, className.text.slice(1), className.offset + 1),
+				);
 			}
-			firstClasses.add(className.text);
-			yield* generateClassProperty(
-				i,
-				className.text,
-				className.offset,
-				'boolean',
-			);
 		}
 	}
 	yield endOfLine;
+	for (const generate of deferredGenerations) {
+		yield* generate;
+	}
 }

packages/language-core/lib/codegen/style/scopedClasses.ts

@@ -128,12 +128,6 @@ export function createTemplateCodegenContext(
 		propsVar: string;
 	}[] = [];
 	const blockConditions: string[] = [];
-	const scopedClasses: {
-		source: string;
-		className: string;
-		offset: number;
-	}[] = [];
-	const emptyClassOffsets: number[] = [];
 	const inlayHints: InlayHintInfo[] = [];
 	const inheritedAttrVars = new Set<string>();
 	const templateRefs = new Map<string, {
@@ -166,8 +160,6 @@ export function createTemplateCodegenContext(
 		dollarVars,
 		accessExternalVariables,
 		blockConditions,
-		scopedClasses,
-		emptyClassOffsets,
 		inlayHints,
 		inheritedAttrVars,
 		templateRefs,