Runtime css tag error

[sandgraham]

Hi, thanks for publishing this plugin!

I ran into a little trouble trying it out. As far as I can tell there is this odd flakey behavior where I get the following error:

css.ts:10 Uncaught Error: Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.

This is with some code like this:

import { css } from "@linaria/core";
import React from "react";

const pretty = css`
  font-family: cursive;
`;

export function App() {
  return <div className={pretty}>hi</div>;
}

I say flakey because I've had a really hard time figuring out exactly how to reproduce it.

When I create a new vite react-ts project and setup linaria with this plugin, sometimes I get this error and sometimes I don't. I've re-scaffolded a new app about 5 times and 4 times I saw the error and 1 time I didn't.

What's odd is that if I add a styled component to the same file it usually starts working. If i remove the styled component from the file and restart the dev server I see the error again.

I'd send a reproduction but honestly I can't even isolate a state where it is consistent. Putting this issue up more to see if anyone else has run into this and knows what's going on.

Thanks.

[czabaj]

I had the same issue when I declared a style with a css tagged template.

It starts working after I assigned the style to the JSX className.