fix: scoped class references not accurate on long document

close #1059
vuejs · Apr 20, 2022 · 14ad214 · 14ad214
1 parent eaeb066
commit 14ad214
Showing 1 changed file with 23 additions and 29 deletions.
diff --git a/packages/vue-code-gen/src/generators/template.ts b/packages/vue-code-gen/src/generators/template.ts
@@ -90,6 +90,7 @@ export function generate(
 	}> = {};
 	const localVars: Record<string, number> = {};
 	const identifiers = new Set<string>();
+	const scopedClasses: { className: string, offset: number; }[] = [];
 
 	tsFormatCodeGen.addText('export { };\n');
 
@@ -210,6 +211,27 @@ export function generate(
 		tsCodeGen.addText(`}\n`);
 	}
 
+	tsCodeGen.addText(`if (typeof __VLS_styleScopedClasses === 'object' && !Array.isArray(__VLS_styleScopedClasses)) {\n`);
+	for (const { className, offset } of scopedClasses) {
+		tsCodeGen.addText(`__VLS_styleScopedClasses[`);
+		writeCodeWithQuotes(
+			className,
+			{
+				start: offset,
+				end: offset + className.length,
+			},
+			{
+				vueTag: 'template',
+				capabilities: {
+					...capabilitiesSet.scopedClassName,
+					displayWithLink: cssScopedClassesSet.has(className),
+				},
+			},
+		);
+		tsCodeGen.addText(`];\n`);
+	}
+	tsCodeGen.addText('}\n');
+
 	tsCodeGen.addText(`declare var __VLS_slots:\n`);
 	for (const [exp, slot] of slotExps) {
 		tsCodeGen.addText(`Record<NonNullable<typeof ${exp}>, typeof ${slot.varName}> &\n`);
@@ -1395,12 +1417,11 @@ export function generate(
 
 				let startOffset = prop.value.loc.start.offset;
 				let tempClassName = '';
-				let openedBlock = false;
 
 				for (const char of (prop.value.loc.source + ' ')) {
 					if (char.trim() === '' || char === '"' || char === "'") {
 						if (tempClassName !== '') {
-							addClass(tempClassName, startOffset);
+							scopedClasses.push({ className: tempClassName, offset: startOffset });
 							startOffset += tempClassName.length;
 							tempClassName = '';
 						}
@@ -1410,33 +1431,6 @@ export function generate(
 						tempClassName += char;
 					}
 				}
-
-				if (openedBlock) {
-					tsCodeGen.addText(`}\n`);
-				}
-
-				function addClass(className: string, offset: number) {
-					if (!openedBlock) {
-						tsCodeGen.addText(`if (typeof __VLS_styleScopedClasses === 'object' && !Array.isArray(__VLS_styleScopedClasses)) {\n`);
-						openedBlock = true;
-					}
-					tsCodeGen.addText(`__VLS_styleScopedClasses[`);
-					writeCodeWithQuotes(
-						className,
-						{
-							start: offset,
-							end: offset + className.length,
-						},
-						{
-							vueTag: 'template',
-							capabilities: {
-								...capabilitiesSet.scopedClassName,
-								displayWithLink: cssScopedClassesSet.has(className),
-							},
-						},
-					);
-					tsCodeGen.addText(`];\n`);
-				}
 			}
 			else if (
 				prop.type === CompilerDOM.NodeTypes.DIRECTIVE