refactor(language-core): simplify codegen of style class properties

vuejs · Feb 19, 2025 · fce47f0 · fce47f0
1 parent ac5f446
commit fce47f0
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 97 deletions.
diff --git a/packages/language-core/lib/codegen/script/index.ts b/packages/language-core/lib/codegen/script/index.ts
@@ -6,7 +6,6 @@ import type { ScriptSetupRanges } from '../../parsers/scriptSetupRanges';
 import type { Code, Sfc, VueCompilerOptions } from '../../types';
 import { codeFeatures } from '../codeFeatures';
 import { generateGlobalTypes, getGlobalTypesFileName } from '../globalTypes';
-import { generateStyleModules } from '../style/modules';
 import type { TemplateCodegenContext } from '../template/context';
 import { endOfLine, generateSfcBlockSection, newLine } from '../utils';
 import { generateComponentSelf } from './componentSelf';
@@ -134,9 +133,6 @@ export function* generateScript(options: ScriptCodegenOptions): Generator<Code,
 		yield* generateComponentSelf(options, ctx, templateCodegenCtx);
 	}
 
-	// #4788
-	yield* generateStyleModules(options, ctx);
-
 	if (options.edited) {
 		yield `type __VLS_IntrinsicElementsCompletion = __VLS_IntrinsicElements${endOfLine}`;
 	}

diff --git a/packages/language-core/lib/codegen/script/template.ts b/packages/language-core/lib/codegen/script/template.ts
@@ -1,6 +1,7 @@
 import type { Code } from '../../types';
 import { hyphenateTag } from '../../utils/shared';
 import { codeFeatures } from '../codeFeatures';
+import { generateStyleModules } from '../style/modules';
 import { generateStyleScopedClasses } from '../style/scopedClasses';
 import { type TemplateCodegenContext, createTemplateCodegenContext } from '../template/context';
 import { generateInterpolation } from '../template/interpolation';
@@ -116,6 +117,7 @@ function* generateTemplateBody(
 ): Generator<Code> {
 	yield* generateStyleScopedClasses(options, templateCodegenCtx);
 	yield* generateStyleScopedClassReferences(templateCodegenCtx, true);
+	yield* generateStyleModules(options);
 	yield* generateCssVars(options, templateCodegenCtx);
 
 	if (options.templateCodegen) {

diff --git a/packages/language-core/lib/codegen/style/classProperty.ts b/packages/language-core/lib/codegen/style/classProperty.ts
@@ -6,30 +6,21 @@ export function* generateClassProperty(
 	styleIndex: number,
 	classNameWithDot: string,
 	offset: number,
-	propertyType: string,
-	optional: boolean
+	propertyType: string
 ): Generator<Code> {
-	yield `${newLine} & { `;
+	yield `${newLine} & { '`;
 	yield [
 		'',
 		'style_' + styleIndex,
 		offset,
 		codeFeatures.navigation,
 	];
-	yield `'`;
 	yield [
 		classNameWithDot.slice(1),
 		'style_' + styleIndex,
 		offset + 1,
 		codeFeatures.navigation,
 	];
-	yield `'`;
-	yield [
-		'',
-		'style_' + styleIndex,
-		offset + classNameWithDot.length,
-		codeFeatures.navigationWithoutRename,
-	];
-	yield `${optional ? '?' : ''}: ${propertyType}`;
+	yield `': ${propertyType}`;
 	yield ` }`;
 }
diff --git a/packages/language-core/lib/codegen/style/modules.ts b/packages/language-core/lib/codegen/style/modules.ts
@@ -1,13 +1,11 @@
 import type { Code } from '../../types';
 import { codeFeatures } from '../codeFeatures';
 import type { ScriptCodegenOptions } from '../script';
-import type { ScriptCodegenContext } from '../script/context';
 import { endOfLine, newLine } from '../utils';
 import { generateClassProperty } from './classProperty';
 
 export function* generateStyleModules(
-	options: ScriptCodegenOptions,
-	ctx: ScriptCodegenContext
+	options: ScriptCodegenOptions
 ): Generator<Code> {
 	const styles = options.sfc.styles.map((style, i) => [style, i] as const).filter(([style]) => style.module);
 	if (!styles.length && !options.scriptSetupRanges?.useCssModule.length) {
@@ -27,14 +25,13 @@ export function* generateStyleModules(
 				codeFeatures.withoutHighlight
 			];
 		}
-		yield `: Record<string, string> & ${ctx.localTypes.PrettifyLocal}<{}`;
+		yield `: Record<string, string> & __VLS_PrettifyGlobal<{}`;
 		for (const className of style.classNames) {
 			yield* generateClassProperty(
 				i,
 				className.text,
 				className.offset,
-				'string',
-				false
+				'string'
 			);
 		}
 		yield `>${endOfLine}`;

diff --git a/packages/language-core/lib/codegen/style/scopedClasses.ts b/packages/language-core/lib/codegen/style/scopedClasses.ts
@@ -8,30 +8,33 @@ export function* generateStyleScopedClasses(
 	options: ScriptCodegenOptions,
 	ctx: TemplateCodegenContext
 ): Generator<Code> {
+	const option = options.vueCompilerOptions.experimentalResolveStyleCssClasses;
+	const styles = options.sfc.styles
+		.map((style, i) => [style, i] as const)
+		.filter(([style]) => option === 'always' || (option === 'scoped' && style.scoped));
+	if (!styles.length) {
+		return;
+	}
+
 	const firstClasses = new Set<string>();
 	yield `type __VLS_StyleScopedClasses = {}`;
-	for (let i = 0; i < options.sfc.styles.length; i++) {
-		const style = options.sfc.styles[i];
-		const option = options.vueCompilerOptions.experimentalResolveStyleCssClasses;
-		if (option === 'always' || (option === 'scoped' && style.scoped)) {
-			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;
-				}
-				firstClasses.add(className.text);
-				yield* generateClassProperty(
-					i,
-					className.text,
-					className.offset,
-					'boolean',
-					true
-				);
+	for (const [style, i] of styles) {
+		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;
 			}
+			firstClasses.add(className.text);
+			yield* generateClassProperty(
+				i,
+				className.text,
+				className.offset,
+				'boolean'
+			);
 		}
 	}
 	yield endOfLine;

diff --git a/packages/language-core/lib/codegen/template/styleScopedClasses.ts b/packages/language-core/lib/codegen/template/styleScopedClasses.ts
@@ -21,25 +21,18 @@ export function* generateStyleScopedClassReferences(
 		yield `']} */${endOfLine}`;
 	}
 	for (const { source, className, offset } of ctx.scopedClasses) {
-		yield `/** @type {__VLS_StyleScopedClasses[`;
-		yield [
-			'',
-			source,
-			offset - (withDot ? 1 : 0),
-			ctx.codeFeatures.navigation,
-		];
-		yield `'`;
-
+		yield `/** @type {__VLS_StyleScopedClasses['`;
+		if (withDot) {
+			yield [
+				'',
+				source,
+				offset - 1,
+				ctx.codeFeatures.navigation,
+			];
+		}
 		// fix https://github.com/vuejs/language-tools/issues/4537
 		yield* escapeString(source, className, offset, ['\\', '\'']);
-		yield `'`;
-		yield [
-			'',
-			source,
-			offset + className.length,
-			ctx.codeFeatures.navigationWithoutRename,
-		];
-		yield `]} */${endOfLine}`;
+		yield `']} */${endOfLine}`;
 	}
 
 	function* escapeString(source: string, className: string, offset: number, escapeTargets: string[]): Generator<Code> {

diff --git a/packages/language-server/tests/renaming.spec.ts b/packages/language-server/tests/renaming.spec.ts
@@ -104,25 +104,25 @@ describe('Renaming', async () => {
 			        "newText": "bar",
 			        "range": {
 			          "end": {
-			            "character": 8,
-			            "line": 7,
+			            "character": 28,
+			            "line": 2,
 			          },
 			          "start": {
-			            "character": 5,
-			            "line": 7,
+			            "character": 25,
+			            "line": 2,
 			          },
 			        },
 			      },
 			      {
 			        "newText": "bar",
 			        "range": {
 			          "end": {
-			            "character": 28,
-			            "line": 2,
+			            "character": 8,
+			            "line": 7,
 			          },
 			          "start": {
-			            "character": 25,
-			            "line": 2,
+			            "character": 5,
+			            "line": 7,
 			          },
 			        },
 			      },
@@ -743,25 +743,25 @@ describe('Renaming', async () => {
 			        "newText": "stylus",
 			        "range": {
 			          "end": {
-			            "character": 23,
-			            "line": 15,
+			            "character": 22,
+			            "line": 8,
 			          },
 			          "start": {
-			            "character": 19,
-			            "line": 15,
+			            "character": 18,
+			            "line": 8,
 			          },
 			        },
 			      },
 			      {
 			        "newText": "stylus",
 			        "range": {
 			          "end": {
-			            "character": 22,
-			            "line": 8,
+			            "character": 23,
+			            "line": 15,
 			          },
 			          "start": {
-			            "character": 18,
-			            "line": 8,
+			            "character": 19,
+			            "line": 15,
 			          },
 			        },
 			      },

diff --git a/test-workspace/tsc/passedFixtures/vue3/#3688/main.vue b/test-workspace/tsc/passedFixtures/vue3/#3688/main.vue
@@ -2,7 +2,7 @@
 
 <template>
 	{{ () => {
-		exactType({} as __VLS_StyleScopedClasses, {} as { 'foo'?: boolean });
+		exactType({} as __VLS_StyleScopedClasses, {} as { 'foo': boolean });
 	} }}
 </template>
 

diff --git a/test-workspace/tsc/passedFixtures/vue3/#4788/main.vue b/test-workspace/tsc/passedFixtures/vue3/#4788/main.vue