[vite-plugin]: adding new embedded expressions causes errors

[dlehmhus]

Environment

• Linaria versions:
  @linaria/core: 4.2.8
  @linaria/react: 4.3.6
  @linaria/vite: 4.2.9
• Bundler (+ version): Vite 4.2.1
• Node.js version: 18.15.0
• OS: macOS Ventura 13.2.1

Description

When running vite in dev mode, adding a embedded expressions into a linaria component causes an error like the following:

[plugin:linaria] /home/projects/vitejs-vite-b813qg/src/App.tsx: The expression evaluated to 'undefined', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, e.g. - 'String(colors.blue)'.
  21 | };
  22 | const Heading = styled.h1`
> 23 | color: ${colors.blue};
     |          ^^^^^^^^^^^
  24 | `;
  25 | _c = Heading;
  26 | function App() { 

Restarting the server solves that issue and the embedded expressions will be evaluated correctly.

linaria+vite+issue.mov

Reproducible Demo

Stackblitz Example

[dlehmhus]

A workaround for that issue is to patch the @linaria/vite package and remove the transform cache here. I noticed that the webpack plugin also is not using a cache, maybe for the same reason? Not sure.

[yudenichaa]

Same error if class created via css function is re-exported.

The expression evaluated to 'undefined', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, e.g. - 'String(iconContainer)'.
  11 |
> 12 |   .${iconContainer} {
     |      ^^^^^^^^^^^^^

[dlehmhus]

Cannot reproduce the issue anymore. I think #1306 fixed it.