Unable to get transform working using Vite + Vue + linaria >= 4 combo

[larrifax]

Environment

• Linaria version: 4.1.2
• Bundler (+ version): Vite 3.1.0
• Node.js version: 16.14.2
• OS: Linux

Description

I'm using a combination of Vite and Vue, and can't get linaria to work using linaria >= 4.

In >= 4 I get the following message when building my application: Uncaught Error: Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly. The same message can be seen in the reproduction below.

If I downgrade to 3.0.0-beta.22, the code in the reproduction works fine.
I've also tried to apply the relevant parts of the vite example in https://github.com/callstack/linaria/tree/master/examples/vite to no avail.

Reproducible Demo

https://stackblitz.com/edit/vitejs-vite-rp8d5d Open devtools and observe that the above mentioned error message is printed in the console.
If you change the linaria version to 3.0.0-beta.22 and restart, the error goes away and everything works fine.

[Anber]

Hi @larrifax! Well… It worked with Vue because of the intersection of two bugs. First, .vue should not be processed if it isn't mentioned in the extensions option. The second problem that Vue compiles it to something like const __returned__ = { test, count, css, test, ref } where css is a build-time-only variable which has to be removed. The only solution for the 4.0 branch is to keep styles in separate ts/js files until I (or someone else) make a Vue plugin for native support of Linaria.