feat(runtime-utils): allow mountSuspended, renderSuspended to work with use css modules component

Author: yamachi4416

examples/app-vitest-full/components/ComponentWithCssVar.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    Css Module
+    <span
+      id="s1"
+      :class="$style.class1"
+    />
+    <span
+      id="s2"
+      :class="$style.class1"
+    />
+    <span id="s3" />
+  </div>
+</template>
+
+<style module>
+.class1 {
+  color: red;
+}
+.class2 {
+  color: blue;
+}
+</style>

examples/app-vitest-full/tests/nuxt/mount-suspended.spec.ts

@@ -25,6 +25,7 @@ import ComponentWithAttrs from '~/components/ComponentWithAttrs.vue'
 import ComponentWithReservedProp from '~/components/ComponentWithReservedProp.vue'
 import ComponentWithReservedState from '~/components/ComponentWithReservedState.vue'
 import ComponentWithImports from '~/components/ComponentWithImports.vue'
+import ComponentWithCssVar from '~/components/ComponentWithCssVar.vue'
 import GenericStateComponent from '~/components/GenericStateComponent.vue'
 
 import { BoundAttrs } from '#components'
@@ -275,6 +276,14 @@ describe('mountSuspended', () => {
     })
   })
 
+  it('can mount components with use css modules', async () => {
+    const component = await mountSuspended(ComponentWithCssVar)
+    expect(component.text()).toBe('Css Module')
+    expect(component.find('#s1').classes()).toHaveLength(1)
+    expect(component.find('#s2').classes()).toHaveLength(1)
+    expect(component.find('#s3').classes()).toHaveLength(0)
+  })
+
   describe('Options API', () => {
     beforeEach(() => {
       vi.spyOn(console, 'error').mockImplementation((message) => {

examples/app-vitest-full/tests/nuxt/render-suspended.spec.ts

@@ -12,6 +12,7 @@ import DirectiveComponent from '~/components/DirectiveComponent.vue'
 import ExportDefaultComponent from '~/components/ExportDefaultComponent.vue'
 import ExportDefineComponent from '~/components/ExportDefineComponent.vue'
 import ComponentWithAttrs from '~/components/ComponentWithAttrs.vue'
+import ComponentWithCssVar from '~/components/ComponentWithCssVar.vue'
 import ExportDefaultWithRenderComponent from '~/components/ExportDefaultWithRenderComponent.vue'
 import ExportDefaultReturnsRenderComponent from '~/components/ExportDefaultReturnsRenderComponent.vue'
 import OptionsApiPage from '~/pages/other/options-api.vue'
@@ -170,6 +171,14 @@ describe('renderSuspended', () => {
     })
   })
 
+  it('can render components with use css modules', async () => {
+    const { container, html } = await renderSuspended(ComponentWithCssVar)
+    expect(html()).toContain('Css Module')
+    expect(container.querySelector('#s1')?.classList).toHaveLength(1)
+    expect(container.querySelector('#s2')?.classList).toHaveLength(1)
+    expect(container.querySelector('#s3')?.classList).toHaveLength(0)
+  })
+
   describe('Options API', () => {
     beforeEach(() => {
       vi.spyOn(console, 'error').mockImplementation((message) => {

src/runtime-utils/mount.ts

@@ -66,7 +66,7 @@ export async function mountSuspended<T>(
   const vueApp = tryUseNuxtApp()?.vueApp
     // @ts-expect-error untyped global __unctx__
     || globalThis.__unctx__.get('nuxt-app').tryUse().vueApp
-  const { render, setup, data, computed, methods } = component as DefineComponent<Record<string, unknown>, Record<string, unknown>>
+  const { render, setup, data, computed, methods, ...componentRest } = component as DefineComponent<Record<string, unknown>, Record<string, unknown>>
 
   let setupContext: SetupContext
   let setupState: Record<string, unknown>
@@ -144,6 +144,7 @@ export async function mountSuspended<T>(
     (resolve) => {
       const vm = mount(
         {
+          __cssModules: componentRest.__cssModules,
           setup: (props: Record<string, unknown>, ctx: SetupContext) => {
             setupContext = ctx
 

src/runtime-utils/render.ts

@@ -62,7 +62,7 @@ export async function renderSuspended<T>(component: T, options?: RenderOptions<T
   const vueApp = tryUseNuxtApp()?.vueApp
     // @ts-expect-error untyped global __unctx__
     || globalThis.__unctx__.get('nuxt-app').tryUse().vueApp
-  const { render, setup, data, computed, methods } = component as DefineComponent<Record<string, unknown>, Record<string, unknown>>
+  const { render, setup, data, computed, methods, ...componentRest } = component as DefineComponent<Record<string, unknown>, Record<string, unknown>>
 
   let setupContext: SetupContext
   let setupState: SetupState
@@ -132,6 +132,7 @@ export async function renderSuspended<T>(component: T, options?: RenderOptions<T
   return new Promise<ReturnType<typeof renderFromTestingLibrary> & { setupState: SetupState }>((resolve) => {
     const utils = renderFromTestingLibrary(
       {
+        __cssModules: componentRest.__cssModules,
         setup: (props: Record<string, unknown>, ctx: SetupContext) => {
           setupContext = ctx