fix(runtime-dom): useCssModule vapor support (#13711)

diff --git a/packages/runtime-core/src/componentCurrentInstance.ts b/packages/runtime-core/src/componentCurrentInstance.ts
index 727958fd84ce797e98049a97dbc3314a0d40b9ea..d73f2b9fdbd63bc555ea800f64b0c544cee94aed 100644 (file)
--- 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 0fb738975d102aff9a0bed47d1a4428b861b9f44..9aa524d2ada795a40e836f5cf102c55c027a1cc7 100644 (file)
--- 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 (file)
index 0000000..5186edc
--- /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()
+  })
+})