From a29c4a57cbd05ad9884e5aac6d9ebed1c30c237b Mon Sep 17 00:00:00 2001
From: johnsoncodehk <johnsoncodehk@gmail.com>
Date: Sat, 16 Apr 2022 01:28:22 +0800
Subject: [PATCH] fix: css module vars missing on template context type

close #1178
---
 packages/vue-code-gen/src/transform.ts        |  4 +---
 .../src/use/useSfcTemplateScript.ts           | 22 +++++++++----------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/vue-code-gen/src/transform.ts b/packages/vue-code-gen/src/transform.ts
index 56957a2c5..2d28adc13 100644
--- a/packages/vue-code-gen/src/transform.ts
+++ b/packages/vue-code-gen/src/transform.ts
@@ -22,9 +22,7 @@ export function walkInterpolationFragment(
             !!localVars[id.text] ||
             // https://github.com/vuejs/core/blob/245230e135152900189f13a4281302de45fdcfaa/packages/compiler-core/src/transforms/transformExpression.ts#L342-L352
             isGloballyWhitelisted(id.text) ||
-            id.text === 'require' ||
-            // css module
-            id.text === '$style'
+            id.text === 'require'
         ) {
             // localVarOffsets.push(localVar.getStart(ast));
         }
diff --git a/packages/vue-typescript/src/use/useSfcTemplateScript.ts b/packages/vue-typescript/src/use/useSfcTemplateScript.ts
index 8903b53dd..38ce2efc4 100644
--- a/packages/vue-typescript/src/use/useSfcTemplateScript.ts
+++ b/packages/vue-typescript/src/use/useSfcTemplateScript.ts
@@ -98,7 +98,17 @@ export function useSfcTemplateScript(
 
 		writeImportTypes();
 
-		codeGen.addText(`declare var __VLS_ctx: InstanceType<typeof __VLS_component>;\n`);
+		codeGen.addText(`declare var __VLS_ctx: InstanceType<typeof __VLS_component> & {\n`);
+		/* CSS Module */
+		const cssModuleMappingsArr: ReturnType<typeof writeCssClassProperties>[] = [];
+		for (const moduleName in cssModuleClasses.value) {
+			const moduleClasses = cssModuleClasses.value[moduleName];
+			codeGen.addText(`${moduleName}: ${baseCssModuleType} & {\n`);
+			cssModuleMappingsArr.push(writeCssClassProperties(moduleClasses, true, 'string', false));
+			codeGen.addText('};\n');
+		}
+		codeGen.addText(`};\n`);
+
 		codeGen.addText(`declare var __VLS_vmUnwrap: typeof __VLS_options & { components: { } };\n`);
 
 		/* Components */
@@ -111,16 +121,6 @@ export function useSfcTemplateScript(
 		codeGen.addText(`__VLS_allComponents.${SearchTexts.Components};\n`);
 		codeGen.addText(`({} as __VLS_types.GlobalAttrs).${SearchTexts.GlobalAttrs};\n`);
 
-		/* CSS Module */
-		codeGen.addText('/* CSS Module */\n');
-		const cssModuleMappingsArr: ReturnType<typeof writeCssClassProperties>[] = [];
-		for (const moduleName in cssModuleClasses.value) {
-			const moduleClasses = cssModuleClasses.value[moduleName];
-			codeGen.addText(`declare var ${moduleName}: ${baseCssModuleType} & {\n`);
-			cssModuleMappingsArr.push(writeCssClassProperties(moduleClasses, true, 'string', false));
-			codeGen.addText('};\n');
-		}
-
 		/* Style Scoped */
 		codeGen.addText('/* Style Scoped */\n');
 		codeGen.addText('type __VLS_StyleScopedClasses = {\n');