Environment variables not accessible in ".css.ts" files

[3tmaan]

Describe the bug

When using Vite in conjunction with Vanilla Extract, I'm unable to access Vite environment variables (defined using the VITE_ prefix) within .css.ts files. While these variables can be accessed within normal .ts files without issues, any attempt to retrieve them within .css.ts files results in the variable being undefined. Additionally, using import.meta.env within a .ts file that's imported into a .css.ts file raises a warning about the output format being "cjs" and that "import.meta" is not available.

Reproduction

https://codesandbox.io/p/sandbox/priceless-water-t6tsv8

System Info

Operating System: macOS
Node version: v18.16.0
Vite version: v4.4.5
Vanilla Extract version: v1.13.0

Used Package Manager

pnpm

Logs

Internal server error: Cannot read properties of undefined (reading 'VITE_FONT_BASE_URL')
  Plugin: vanilla-extract
  File: /workspaces/sandbox/src/styles/fonts.css.ts
      at /workspaces/sandbox/src/styles/fonts.css.ts:32:37
      at Script.runInContext (node:vm:134:12)
      at Script.runInNewContext (node:vm:139:17)
      at module.exports [as default] (/workspaces/sandbox/node_modules/eval/eval.js:84:12)
      at Object.processVanillaFile (/workspaces/sandbox/node_modules/@vanilla-extract/integration/dist/vanilla-extract-integration.cjs.dev.js:132:50)
      at TransformContext.transform (/workspaces/sandbox/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.dev.js:196:40)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.transform (file:///workspaces/sandbox/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:44345:30)
      at async loadAndTransform (file:///workspaces/sandbox/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:55015:29)
      at async viteTransformMiddleware (file:///workspaces/sandbox/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:64417:32) (x2)

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.

[askoufis]

I'm having trouble loading your codesandbox. Is there any chance you could upload the reproduction to github instead?

Regardless, I'm fairly positive as to the cause of both the errors.

• Vanilla Extract compiles .css.ts files using esbuild, even if your integration is with vite, webpack, etc. esbuild has no idea what VITE_FONT_BASE_URL is. You could potentially read your VITE_-prefixed envars from .env into the vite plugin's esbuildOptions.define config as a workaround. It would be nice if the vite plugin could do this for you, however I don't think it's possible to access import.meta.env from within a vite plugin.
• I think esbuild's output format is being inferred as cjs. import.meta is only supported in esm, so we'd have to update our esbuild config to specify that. I'm not sure if that's something we can do easily/what the consequences of that are. That being said, if you are reading your .env file into define, you could just define import.meta.env.VITE_FOO_BAR: "some_value" and circumvent esbuild checking import.meta completely, though I don't know if this would actually work.