callstack / linaria

Zero-runtime CSS in JS library
https://linaria.dev
MIT License
11.59k stars 416 forks source link

Assets path is treated as undefined in nextjs. #1184

Open hoiheart opened 1 year ago

hoiheart commented 1 year ago

Environment

Description

Hello, I want to use linaria for nextjs, but I encountered the following problem.

The image processed by the next-image-loader is img.src returns the string of the actual path. But if I put it in linaria css, it's recognized as undefined.

스크린샷 2023-01-13 오후 2 40 57

스크린샷 2023-01-13 오후 2 25 53

Is there a way to solve this?

Reproducible Demo

https://codesandbox.io/p/sandbox/dreamy-morning-gxes95?file=%2Fpages%2Findex.tsx&selection=%5B%7B%22endColumn%22%3A3%2C%22endLineNumber%22%3A9%2C%22startColumn%22%3A3%2C%22startLineNumber%22%3A9%7D%5D

dlehmhus commented 1 year ago

I think the issue is, that that linaria transforms the file before the file loader comes into play. Therefore the image object is undefined when the css gets evaluated.

mochalinEA commented 11 months ago

I had same issue and tried to avoid with next-images. But had file system path, like this url(/Users/asd/.../image.png), instead of url...