From abe8fc29e493e1e5f7bd92df4c26b5ca835526be Mon Sep 17 00:00:00 2001
From: Alex Snezhko <alexsnezhko89@gmail.com>
Date: Sun, 9 Nov 2025 20:00:20 -0800
Subject: [PATCH] fix(runtime-dom): useCssModule vapor support (#13711)

---
 .../src/componentCurrentInstance.ts           |  2 +-
 .../runtime-dom/src/helpers/useCssModule.ts   |  8 +--
 .../__tests__/helpers/useCssModule.spec.ts    | 55 +++++++++++++++++++
 3 files changed, 60 insertions(+), 5 deletions(-)
 create mode 100644 packages/runtime-vapor/__tests__/helpers/useCssModule.spec.ts

diff --git a/packages/runtime-core/src/componentCurrentInstance.ts b/packages/runtime-core/src/componentCurrentInstance.ts
index 727958fd84..d73f2b9fdb 100644
--- a/packages/runtime-core/src/componentCurrentInstance.ts
+++ b/packages/runtime-core/src/componentCurrentInstance.ts
@@ -92,7 +92,7 @@ export const setCurrentInstance = (
   }
 }
 
-const internalOptions = ['ce'] as const
+const internalOptions = ['ce', 'type'] as const
 
 /**
  * @internal
diff --git a/packages/runtime-dom/src/helpers/useCssModule.ts b/packages/runtime-dom/src/helpers/useCssModule.ts
index 0fb738975d..9aa524d2ad 100644
--- a/packages/runtime-dom/src/helpers/useCssModule.ts
+++ b/packages/runtime-dom/src/helpers/useCssModule.ts
@@ -1,14 +1,14 @@
-import { getCurrentInstance, warn } from '@vue/runtime-core'
+import { useInstanceOption, warn } from '@vue/runtime-core'
 import { EMPTY_OBJ } from '@vue/shared'
 
 export function useCssModule(name = '$style'): Record<string, string> {
   if (!__GLOBAL__) {
-    const instance = getCurrentInstance()!
-    if (!instance) {
+    const { hasInstance, value: type } = useInstanceOption('type', true)
+    if (!hasInstance) {
       __DEV__ && warn(`useCssModule must be called inside setup()`)
       return EMPTY_OBJ
     }
-    const modules = instance.type.__cssModules
+    const modules = type!.__cssModules
     if (!modules) {
       __DEV__ && warn(`Current instance does not have CSS modules injected.`)
       return EMPTY_OBJ
diff --git a/packages/runtime-vapor/__tests__/helpers/useCssModule.spec.ts b/packages/runtime-vapor/__tests__/helpers/useCssModule.spec.ts
new file mode 100644
index 0000000000..5186edcc6f
--- /dev/null
+++ b/packages/runtime-vapor/__tests__/helpers/useCssModule.spec.ts
@@ -0,0 +1,55 @@
+import { useCssModule } from '@vue/runtime-dom'
+import { makeRender } from '../_utils'
+import { defineVaporComponent, template } from '@vue/runtime-vapor'
+
+const define = makeRender<any>()
+
+describe('useCssModule', () => {
+  function mountWithModule(modules: any, name?: string) {
+    let res
+    define(
+      defineVaporComponent({
+        __cssModules: modules,
+        setup() {
+          res = useCssModule(name)
+          const n0 = template('<div></div>')()
+          return n0
+        },
+      }),
+    ).render()
+    return res
+  }
+
+  test('basic usage', () => {
+    const modules = {
+      $style: {
+        red: 'red',
+      },
+    }
+    expect(mountWithModule(modules)).toMatchObject(modules.$style)
+  })
+
+  test('basic usage', () => {
+    const modules = {
+      foo: {
+        red: 'red',
+      },
+    }
+    expect(mountWithModule(modules, 'foo')).toMatchObject(modules.foo)
+  })
+
+  test('warn out of setup usage', () => {
+    useCssModule()
+    expect('must be called inside setup').toHaveBeenWarned()
+  })
+
+  test('warn missing injection', () => {
+    mountWithModule(undefined)
+    expect('instance does not have CSS modules').toHaveBeenWarned()
+  })
+
+  test('warn missing injection', () => {
+    mountWithModule({ $style: { red: 'red' } }, 'foo')
+    expect('instance does not have CSS module named "foo"').toHaveBeenWarned()
+  })
+})
-- 
2.47.3