Apply workaround for importing images via css #135

[aantthony]

Upstream changes in Next broke image support in css as mentioned in #135

I've applied the changes from the workaround found by @theshem from vercel/next.js#11164 (comment)

It seems to work, although I don't understand why.

[codecov]

Codecov Report

Merging #139 into master will not change coverage by %.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #139   +/-   ##
=======================================
  Coverage   90.90%   90.90%           
=======================================
  Files          13       13           
  Lines         176      176           
  Branches       41       41           
=======================================
  Hits          160      160           
  Misses         13       13           
  Partials        3        3           

Impacted Files	Coverage Δ
lib/loaders/img-loader.js	100.00% <ø> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7fb69c0...2b52cf5. Read the comment docs.

[bericp1]

The maintainer of next-images applied the same fix in their package: twopluszero/next-images@211f664

I've tested this fork by updating my yarn.lock with it and re-running yarn:

        "next-optimized-images": "ssh://github.com/aantthony/next-optimized-images#2b52cf5e4f32cb7a0d9b8b57f17727ea230af092",

I then imported the same image in both JS and in my SCSS module. The one imported in JS does appear to get processed by next-optimized-images (in images folder, smaller file size) and the one imported in the SCSS module does not get processed by next-optimized-images (in media folder, larger file size):

So this definitely works as a workaround so importing images at least doesn't break (thanks @aantthony!) but it would be nice if there was a way to tell NextJS not to process images at all so we can just leave it up to next-optimized-images. They closed the original issue over there but I'll drop a note over there.

[jescalan]

Would love to see this one land! We forked and are using this in production to fix

[cyrilwanner]

Thank you very much for all your inputs!
It is of course not optimal that images imported in CSS will no longer get processed by this plugin, but I'll release this as a temporary fix (in the next few hours) so it doesn't break any projects.

Once the quick fix is released, I'll try to find a solution so that images in CSS can get optimized again.

[cyrilwanner]

I just published the version 2.5.6 to npm which includes this fix.
Additionally, I added an if statement to only apply this fix for affected next.js versions (>= 9.2.0) so it doesn't break projects with older versions.

I would be happy if you can test the published version in your project and report back in case there are still some issues.

Thanks again for your contributions 👍

[aantthony]

Thanks @cyrilwanner. The published version works for me 👍

[cyrilwanner]

So, I think that I was now able to overwrite the nextjs builtin image handling so next-optimized-images can optimize images that are imported within css/sass files again.
To avoid breaking anything else, I published a canary version first: 2.5.8-canary.1
It would be cool if you can test this version and check if all your cases work before I publish the fix under the latest tag. Thank you already 👍

[aantthony]

Yep, it works. I checked an SVG file that was referenced via SCSS and confirmed it was indeed optimised.

Thanks 👍