From 677b9ce56fb181defc673e96fda90bb7ead267ee Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Tue, 9 Apr 2024 13:01:24 +0530
Subject: [PATCH] [pigment-css][nextjs] Handle file references passed through
 imports

---
 packages/pigment-css-unplugin/src/utils.ts        | 10 +++++++++-
 packages/pigment-css-unplugin/tests/utils.test.ts |  2 ++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/pigment-css-unplugin/src/utils.ts b/packages/pigment-css-unplugin/src/utils.ts
index b9896a0a9857b2..da108320f607b2 100644
--- a/packages/pigment-css-unplugin/src/utils.ts
+++ b/packages/pigment-css-unplugin/src/utils.ts
@@ -27,12 +27,20 @@ export const handleUrlReplacement = async (
     const mainItem = match[3];
     // no need to handle data uris or absolute paths
     if (
-      mainItem[0] === '/' ||
       mainItem.startsWith('data:') ||
       mainItem.startsWith('http:') ||
       mainItem.startsWith('https:')
     ) {
       newCss += `url(${mainItem})`;
+    } else if (mainItem[0] === '/') {
+      const newPath = mainItem.replace(projectPath, '').split(path.sep).join('/');
+      if (newPath === mainItem) {
+        // absolute path unrelated to files in the project or in public directory
+        newCss += `url(${mainItem})`;
+      } else {
+        // absolute path to files in the project
+        newCss += `url(~${mainItem.replace(projectPath, '').split(path.sep).join('/')})`;
+      }
     } else {
       // eslint-disable-next-line no-await-in-loop
       const resolvedAbsolutePath = await asyncResolver(mainItem, filename, []);
diff --git a/packages/pigment-css-unplugin/tests/utils.test.ts b/packages/pigment-css-unplugin/tests/utils.test.ts
index 21dd0f4d58afa7..c0f8a4bd97ee4f 100644
--- a/packages/pigment-css-unplugin/tests/utils.test.ts
+++ b/packages/pigment-css-unplugin/tests/utils.test.ts
@@ -60,6 +60,7 @@ describe('utils', () => {
         background-image: url(${ABSOLUTE_PATH});
         background-image: url('../../assets/mui.svg');
         background-image: url('@/assets/mui.svg');
+        background-image: url('${projectPath}/src/assets/mui.svg');
         background-image: url('/assets/mui.svg');
         background-image: url('@/assets/mui.svg');
         display: flex;
@@ -73,6 +74,7 @@ describe('utils', () => {
         background-image: url(${ABSOLUTE_PATH});
         background-image: url(~/src/assets/mui.svg);
         background-image: url(~/src/assets/mui.svg);
+        background-image: url(~/src/assets/mui.svg);
         background-image: url(/assets/mui.svg);
         background-image: url(~/src/assets/mui.svg);
         display: flex;