vanilla-extract/vite-plugin v4.0.4 does not work with custom TS paths/aliases in Astro

[tomahl]

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

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

[askoufis]

Seems like we've made our vite plugin too vite-specific. https://github.com/vanilla-extract-css/vanilla-extract/blob/dc5ace242b7e68a2e841b94af720386e033ad01a/packages/vite-plugin/src/index.ts#L119-L126 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

[tomahl]

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.

[zhaohuanyuu]

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

https://github.com/vanilla-extract-css/vanilla-extract/blob/dc5ace242b7e68a2e841b94af720386e033ad01a/packages/vite-plugin/src/index.ts#L119-L126

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?

[askoufis]

@tomahl ~This issue should be fixed by https://github.com/vanilla-extract-css/vanilla-extract/pull/1369. Please try out this snapshot version of the vite plugin if you get a chance: @vanilla-extract/[email protected].~

[askoufis]

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

[askoufis]

Tested the fix in #1395 in your reproduction and it solves the issue.