Vite error "No CSS for file" with vanilla-extract in Nuxt module (Double path resolution)

[yurai-git]

I'm developing a Nuxt module using vanilla-extract. When running the playground, I encounter a No CSS for file error.

It appears that the Vite plugin is incorrectly prepending the project root to an already absolute path, resulting in a double resolved path like: C:/.../playground/C:/.../src/runtime/composables/hello-world.css.ts

Reproduce

1. Create Nuxt module project

   pnpm create nuxt@latest nuxt-module -t module --packageManager pnpm --no-modules

2. Open the project folder in any IDE

   code nuxt-module

3. Install vanilla-extract and the required bundler

   pnpm i @vanilla-extract/css @vanilla-extract/vite-plugin

4. Set up a component, composable, and main entry point

   • src/module.ts:

     import { defineNuxtModule, addPlugin, createResolver, addVitePlugin, addComponentsDir, addImportsDir } from '@nuxt/kit'
     import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
     
     // ...
     
     export default defineNuxtModule<ModuleOptions>({
       // ...
       setup(_options, _nuxt) {
         // ...
         addVitePlugin(vanillaExtractPlugin()) // required to use vanilla-extract with Vite
         addComponentsDir({ path: resolver.resolve('./runtime/components') }) // adds component directory
         addImportsDir(resolver.resolve('./runtime/composables')) // adds composable directory
       },
     })

   • src/runtime/composables/hello-world.css.ts:

     import { style } from '@vanilla-extract/css'
     
     export const helloWorldStyle = style({ color: 'red' })

   • src/runtime/components/hello-world.vue:

     <template>
       <div :class="helloWorldStyle">Hello, world!</div>
     </template>
     
     <script lang="ts" setup>
     import { helloWorldStyle } from '../composables/hello-world.css'
     </script>

5. Import this module and the component in playground

   • playground/nuxt.config.ts:

     export default defineNuxtConfig({
       modules: ['../src/module'], // imports the module
       devtools: { enabled: true },
       compatibilityDate: 'latest',
       myModule: {},
     })

   • playground/app.vue:

     <template>
       <div>
         <!-- imports the component -->
         <HelloWorld />
       </div>
     </template>

6. Start and open the development server

   pnpm dev -o

Expected behavior

The page should renders <div>Hello, world!</div> with red text.

Observed behavior

Vite throws the following error:

Internal server error: No CSS for file: C:/Users/jiban/Documents/repositories/yurai-git/nuxt-module/playground/C:/Users/jiban/Documents/repositories/yurai-git/nuxt-module/src/runtime/composables/hello-world.css.ts

It appears the file path is being doubly resolved or incorrectly concatenated, resulting in an invalid absolute path.

Does anyone know how to correctly configure the path resolution for vanilla-extract within a Nuxt module context?

Any help or guidance would be greatly appreciated!

[askoufis]

Is this repo a reproduction of the issue? https://github.com/yurai-git/ve-test
It would be much easier for me to test the bug without having to all the setup myself.

[yurai-git]

Yes, that is correct. I created that repository to reproduce the issue.