feat: support scoped css auto-complete for string syntax

#907
vuejs · Jan 28, 2022 · d15999d · d15999d
1 parent 3884d75
commit d15999d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/packages/vscode-vue-languageservice/src/use/useSfcTemplateScript.ts b/packages/vscode-vue-languageservice/src/use/useSfcTemplateScript.ts
@@ -101,18 +101,10 @@ export function useSfcTemplateScript(
 
 		/* Style Scoped */
 		codeGen.addText('/* Style Scoped */\n');
-		codeGen.addText('declare var __VLS_styleScopedClasses: {\n');
+		codeGen.addText('type __VLS_StyleScopedClasses = {\n');
 		const cssScopedMappings = writeCssClassProperties(cssScopedClasses.value, true, 'boolean', true);
-		codeGen.addText('} & (');
-		const classNames: string[] = [];
-		for (const [_, classes] of cssScopedClasses.value) {
-			for (const [className] of classes) {
-				classNames.push(className);
-			}
-		}
-		codeGen.addText(classNames.map(name => `'${name}'`).join(' | '));
-		codeGen.addText(')[];\n');
-		codeGen.addText(`{\n`);
+		codeGen.addText('};\n');
+		codeGen.addText('declare var __VLS_styleScopedClasses: __VLS_StyleScopedClasses | keyof __VLS_StyleScopedClasses | (keyof __VLS_StyleScopedClasses)[];\n');
 
 		/* Props */
 		codeGen.addText(`/* Props */\n`);
@@ -125,7 +117,6 @@ export function useSfcTemplateScript(
 			margeCodeGen(codeGen, templateCodeGens.value.codeGen);
 		}
 
-		codeGen.addText(`}\n`);
 		codeGen.addText(`export default __VLS_slots;\n`);
 
 		return {

diff --git a/packages/vue-code-gen/src/generators/template.ts b/packages/vue-code-gen/src/generators/template.ts
@@ -1420,6 +1420,7 @@ 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 === "'") {
@@ -1435,8 +1436,15 @@ export function generate(
 					}
 				}
 
+				if (openedBlock) {
+					tsCodeGen.addText(`}\n`);
+				}
+
 				function addClass(className: string, offset: number) {
-					tsCodeGen.addText(`// @ts-ignore\n`);
+					if (!openedBlock) {
+						tsCodeGen.addText(`if (typeof __VLS_styleScopedClasses === 'object' && !Array.isArray(__VLS_styleScopedClasses)) {\n`);
+						openedBlock = true;
+					}
 					tsCodeGen.addText(`__VLS_styleScopedClasses[`);
 					writeCodeWithQuotes(
 						className,