Refactor image path handling in vitePluginNextImage

[valentinpalkovic]

Closes storybookjs/storybook#32355
Closes storybookjs/storybook#32354
Supersedes #57

[ndelangen]

@valentinpalkovic Are we planning to release this this week?

[Stanzilla]

I've since switched to this which works quite well for us:

diff --git a/dist/index.cjs b/dist/index.cjs
index f64334b..d489b60 100644
--- a/dist/index.cjs
+++ b/dist/index.cjs
@@ -4779,13 +4779,41 @@ function vitePluginNextImage(nextConfigResolver, options = {}) {
         );
       }
       if (includePattern2.test(source) && !excludeImporterPattern.test(importer ?? "") && !importer?.startsWith(virtualImage)) {
-        const isAbsolute3 = posix.isAbsolute(id);
-        const imagePath = importer ? isAbsolute3 ? source : posix.join(posix.dirname(importer), source) : source;
-        const pathForFilter = imagePath.replace(postfixRE, "");
+        const importerPath = (importer ?? "").replace(/\\/g, "/");
+        const isAbsolute3 = posix.isAbsolute(source);
+        let imagePath = source;
+        if (importer && !isAbsolute3) {
+          if (source.startsWith(".")) {
+            imagePath = posix.join(posix.dirname(importerPath), source);
+          } else {
+            let resolvedId;
+            try {
+              resolvedId = (await this.resolve(source, importer, {
+                skipSelf: true
+              }))?.id;
+            } catch {
+              resolvedId = undefined;
+            }
+            if (!resolvedId) {
+              try {
+                resolvedId = require4.resolve(source, {
+                  paths: [posix.dirname(importerPath), process.cwd()]
+                });
+              } catch {
+                resolvedId = undefined;
+              }
+            }
+            imagePath = resolvedId || source;
+          }
+        }
+        const normalizedImagePath = imagePath
+          .replace(/\\/g, "/")
+          .replace(postfixRE, "");
+        const pathForFilter = normalizedImagePath;
         if (!filter(pathForFilter)) {
           return null;
         }
-        return `${virtualImage}?${querystring.encode({ imagePath })}`;
+        return `${virtualImage}?${querystring.encode({ imagePath: normalizedImagePath })}`;
       }
       if (id === "next/image" && importer !== virtualNextImage) {
         return virtualNextImage;
diff --git a/dist/index.js b/dist/index.js
index e039936..a35edc6 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -4746,13 +4746,41 @@ function vitePluginNextImage(nextConfigResolver, options = {}) {
         );
       }
       if (includePattern2.test(source) && !excludeImporterPattern.test(importer ?? "") && !importer?.startsWith(virtualImage)) {
-        const isAbsolute3 = posix.isAbsolute(id);
-        const imagePath = importer ? isAbsolute3 ? source : posix.join(posix.dirname(importer), source) : source;
-        const pathForFilter = imagePath.replace(postfixRE, "");
+        const importerPath = (importer ?? "").replace(/\\/g, "/");
+        const isAbsolute3 = posix.isAbsolute(source);
+        let imagePath = source;
+        if (importer && !isAbsolute3) {
+          if (source.startsWith(".")) {
+            imagePath = posix.join(posix.dirname(importerPath), source);
+          } else {
+            let resolvedId;
+            try {
+              resolvedId = (await this.resolve(source, importer, {
+                skipSelf: true
+              }))?.id;
+            } catch {
+              resolvedId = undefined;
+            }
+            if (!resolvedId) {
+              try {
+                resolvedId = require4.resolve(source, {
+                  paths: [posix.dirname(importerPath), process.cwd()]
+                });
+              } catch {
+                resolvedId = undefined;
+              }
+            }
+            imagePath = resolvedId || source;
+          }
+        }
+        const normalizedImagePath = imagePath
+          .replace(/\\/g, "/")
+          .replace(postfixRE, "");
+        const pathForFilter = normalizedImagePath;
         if (!filter(pathForFilter)) {
           return null;
         }
-        return `${virtualImage}?${encode({ imagePath })}`;
+        return `${virtualImage}?${encode({ imagePath: normalizedImagePath })}`;
       }
       if (id === "next/image" && importer !== virtualNextImage) {
         return virtualNextImage;