vanilla-extract-css / vanilla-extract

Describe the bug

Hello there,

It seems like the latest vite-plugin version doesn't handle custom paths in Astro anymore. A clean install of Astro (v4.4.9), VE (v1.14.1) throws error on first run when using custom paths:

FailedToLoadModuleSSR Could not import file. Could not import @tokens/colors.

Worked fine with the previous version.

Reproduction

https://stackblitz.com/edit/withastro-astro-7asckv?file=tsconfig.json,src%2Fstyles%2Fglobal.css.ts,src%2Flayouts%2FLayout.astro

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (7) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    @vanilla-extract/css: ^1.14.1 => 1.14.1 
    @vanilla-extract/vite-plugin: ^4.0.4 => 4.0.4

Used Package Manager

npm

Logs

Error: Failed to load url @tokens/colors (resolved id: @tokens/colors) in /home/projects/withastro-astro-7asckv/src/styles/global.css.ts. Does the file exist?
    at loadAndTransform (/home/projects/withastro-astro-7asckv/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:53650:21)
    at async ViteNodeServer._transformRequest (/home/projects/withastro-astro-7asckv/node_modules/vite-node/dist/server.mjs:426:16)
    at async ViteNodeServer._fetchModule (/home/projects/withastro-astro-7asckv/node_modules/vite-node/dist/server.mjs:396:17)
    at async ViteNodeRunnerWithContext.directRequest (/home/projects/withastro-astro-7asckv/node_modules/vite-node/dist/client.mjs:267:46)
    at async ViteNodeRunnerWithContext.cachedRequest (/home/projects/withastro-astro-7asckv/node_modules/vite-node/dist/client.mjs:206:14)
    at async ViteNodeRunnerWithContext.dependencyRequest (/home/projects/withastro-astro-7asckv/node_modules/vite-node/dist/client.mjs:250:12)
    at async eval (/home/projects/withastro-astro-7asckv/src/styles/global.css.ts:3:31)
    at async ViteNodeRunnerWithContext.runModule (/home/projects/withastro-astro-7asckv/node_modules/vite-node/dist/client.mjs:379:5)
    at async ViteNodeRunnerWithContext.directRequest (/home/projects/withastro-astro-7asckv/node_modules/vite-node/dist/client.mjs:363:5)
    at async ViteNodeRunnerWithContext.cachedRequest (/home/projects/withastro-astro-7asckv/node_modules/vite-node/dist/client.mjs:206:14)

Validations

Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
The provided reproduction is a minimal reproducible example of the bug.

Seems like we've made our vite plugin too vite-specific.

vanilla-extract/packages/vite-plugin/src/index.ts

Lines 119 to 126 in dc5ace2

    
           const configFile = await loadConfigFromFile( 
        
             { 
        
               command: config.command, 
        
               mode: config.mode, 
        
               isSsrBuild: configEnv.isSsrBuild, 
        
             }, 
        
             config.configFile, 
        
           );

We're attempting to load a vite config from a file, which doesn't exist in an astro project, so we end up with a null configFile, so we pass no vite plugins to our vite-node compiler, which causes this error (and likely other issues).

I suppose we have a few options:

Handle this case better. Either:
- Fall back to our old behaviour of just reading in the existing plugins
- Create our own loadConfigFromFile but for the astro config (is it just a dynamic import of the config + merging?)
Create a proper astro plugin

solidjs/solid-start is also moving away from vite.config in favour of app.config, mentioned here. Maybe something to consider when deciding the way forward.

Seems like we've made our vite plugin too vite-specific.

vanilla-extract/packages/vite-plugin/src/index.ts

Lines 119 to 126 in dc5ace2

const configFile = await loadConfigFromFile(

{

command: config.command,

mode: config.mode,

isSsrBuild: configEnv.isSsrBuild,

},

config.configFile,

);

We're attempting to load a vite config from a file, which doesn't exist in an astro project, so we end up with a null configFile, so we pass no vite plugins to our vite-node compiler, which causes this error (and likely other issues).
I suppose we have a few options:

Handle this case better. Either:

Fall back to our old behaviour of just reading in the existing plugins

Create our own loadConfigFromFile but for the astro config (is it just a dynamic import of the config + merging?)

Create a proper astro plugin

same issue, Are there any plans that have been decided?

@tomahl ~~This issue should be fixed by #1369. Please try out this snapshot version of the vite plugin if you get a chance: @vanilla-extract/vite-plugin@0.0.0-fix-vite-bugs-20240323060142.~~

@tomahl I just tested it with your reproduction and it seems the fix doesn't work. Need to dig into it further.

	const configFile = await loadConfigFromFile(
	{
	command: config.command,
	mode: config.mode,
	isSsrBuild: configEnv.isSsrBuild,
	},
	config.configFile,
	);