Macaron API calls are not being processed when present in a file ending with `.css.ts`

[ymeine]

If I try putting style definitions in a file whose name ends with .css.ts, like for instance styles.css.ts, Macaron does not process them, leading to a runtime error:

Error: An unexpected error occurred undefined:3069:5
Uncaught Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:

- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started
    getFileScope http://localhost:5173/node_modules/.vite/deps/@macaron-css_core.js?v=b2e50fad:3069
    generateIdentifier http://localhost:5173/node_modules/.vite/deps/@macaron-css_core.js?v=b2e50fad:4658
    style http://localhost:5173/node_modules/.vite/deps/@macaron-css_core.js?v=b2e50fad:4911
    <anonymous> http://localhost:5173/src/styles.css.ts:2
@macaron-css_core.js:3069:11

Example of file:

import {style} from '@macaron-css/core';

export const block = style({
	background: 'green',
});

Why would this be a valid use case?

I know this can seem counterintuitive to do so since the inherent goal of Macaron is to be able to co-locate styles with the code consuming them. But I think it doesn’t mean it should force to do so, but rather just enable.

There can still be valid use cases to group style definitions in dedicated files (in addition to having co-located styles thanks to Macaron) and to be willing to name those files with a .css.ts extension for clarity. The thing is, I don’t see why it should not be possible with Macaron.

Also, it can help for a smoother transition, since it’s much easier to globally replace @vanilla-extract/css imports with @macaron-css/core, rather than having to move the entire code into different files.

Now, one could say I could use @vanilla-extract/css directly in those files, but:

• it would feel highly inconsistent, and require installing vanilla-extract and configuring it explicitly in addition to Macaron
• it is actually not possible to mix both Macaron and vanilla-extract, see issue Cannot use vanilla-extract along with Macaron #77

Why it happens?

I see why it behaves that way currently, but I think it could be changed, though by experience I understand dealing with Vite and vanilla-extract can be tricky.

I guess it would be easy to decide to process that file, but probably less to tell vanilla-extract to ignore it.

[Mokshit06]

Thanks for reporting all these issues and the thorough investigation, really appreciate it! I remember Macaron did support .css.ts files natively, without requiring an additional vanilla-extract plugin on the user-end at all. That's why they're ignored by the vite plugin — macaron's vanilla-extract integration should get to that by itself.

It's very possible that there have been changes to vanilla extract's API since then which change the behavior though which I'll look into.

[ymeine]

Thanks for reporting all these issues and the thorough investigation, really appreciate it!

And I thank you for your reactivity!

I’m not sure to understand that part:

That's why they're ignored by the vite plugin — macaron's vanilla-extract integration should get to that by itself.

If my code is the following in a styles.css.ts file:

import {style} from '@macaron-css/core';

export const block = style({
	backgroundColor: 'green',
});

to me the Vite integration of Macaron has to process that styles.css.ts file, since it’s using Macaron’s API. Did you mean that such a file could be “natively” processed by vanilla-extract, even though it imports @macaron-css/core? If yes, indeed it seems not to be the case anymore, or I have an improper setup.

Out of curiosity, I commented out that line, and it all worked fine then in my simple test project. But I can’t tell if it’s really a good solution or not, I don’t know the project enough, it would probably have to be tested more thoroughly.