Relative image paths in development with Vite + React

[sciolist]

I don't know if this is an issue specific to using linaria with vite, but since it's in the beta branch I imagine it's some issue there.

When the css is added to the page in development it is injected as style tags into

, but when I put an absolute path into an image url in css as a variable, it is treated as relative to the file I'm writing the css in and so gets rewritten. For example:

// /full/path/to/component.tsx
import filePath from './image.png';
console.log(filePath); // /full/path/to/image.png
const MyLinaria = styled.div`background-image: url(${filepath})`;
const MyComponent = () => <MyLinaria />

The components background-image will be set to ./image.png, not /full/path/to/image.png, and so it will not be found.

If I instead pass the url as a prop to linaria it works as expected:

// /full/path/to/component.tsx
import filePath from './image.png';
console.log(filePath); // /full/path/to/image.png
const MyLinaria = styled.div`background-image: ${p => `url(${p.background})`};`;
const MyComponent = () => <MyLinaria background={filePath} />

That's not quite optimal though.

• Linaria version: 3.0.0-beta.13
• Bundler (+ version): Vite 2.5.4 / Rollup
• Node.js version: v16.8.0
• OS: OS X

[Anber]

Hi @sciolist Thank you for your report. It looks like a bug on our side. Could you please provide a repo?

[sciolist]

Hey,

I've put up a reproduction here with a demonstration of what I would have assumed would work: https://github.com/sciolist/vite-missing-linaria-image

I don't know if it's an issue on your end or if Vite just needs a bit more configuring to work properly with linaria.

[beautyfree]

Still relevant

[Anber]

Works well in with @linaria/vite: "^5.0.0"