diff --git a/packages/vue-code-gen/src/generators/template.ts b/packages/vue-code-gen/src/generators/template.ts index 70ce09aa2..d9466fa78 100644 --- 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 = {}; const identifiers = new Set(); + 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, 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