fix: css module vars missing on template context type

close #1178
vuejs · Apr 15, 2022 · a29c4a5 · a29c4a5
1 parent cd9eef1
commit a29c4a5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git 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
@@ -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');