Cannot use vanilla-extract along with Macaron

[ymeine]

Hi,

I cannot use vanilla-extract along with Macaron.

Given a Vite configuration:

import {defineConfig} from 'vite';
import {macaronVitePlugin} from '@macaron-css/vite';
import {vanillaExtractPlugin} from '@vanilla-extract/vite-plugin';

export default defineConfig({
    plugins: [
        macaronVitePlugin(),
        vanillaExtractPlugin(),
    ]
});

I get the following error for a file styles.css.ts:

[vite] (client) Pre-transform error: Failed to load url .../src/extracted_834h6r.css.ts (resolved id: .../src/extracted_834h6r.css.ts). Does the file exist?
  Plugin: vite-plugin-vanilla-extract
  File: .../src/extracted_834h6r.css.ts

Why would this be a valid use case?

For multiple reasons:

• smoother transition from vanilla-extract to Macaron, so we don’t have to update a whole code base at once
• keeping the possibility to consume internal or 3rd party packages which distribute vanilla-extract based TypeScript files directly. I personally do internally

Why it happens?

File names with pattern extracted_<someid>.css.ts are generated by Macaron as virtual files.

The rest? I’ll be honest: I usually dig as deep as possible to provide the highest quality of investigation I can, but here I failed. Asynchronous code + a myriad of hooks across plugins + macaron being based on vanilla-extract + vanilla-extract being based itself on vite: it’s really a HELL to debug.

The only thing I know is that Vite’s warmupRequest method is called and trying to load that virtual file, and of course it fails since it does not really exist. But I can’t tell why and how to avoid it.