From 689a35d1217d2edbc73296ff3c79bc173041309f Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Wed, 11 Sep 2024 13:25:46 +0530
Subject: [PATCH 1/2] [nextjs] Move the import startsWith next check at end

* This fixes the resolve error happening in nextjs for it's path based module imports.
* Also adds check for `next/link`
* Ignore null value during css object processing
---
 packages/pigment-css-nextjs-plugin/src/index.ts    | 14 +++++++-------
 .../src/utils/cssFnValueToVariable.ts              |  4 ++++
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/pigment-css-nextjs-plugin/src/index.ts b/packages/pigment-css-nextjs-plugin/src/index.ts
index ef4df07a..11b4a6e7 100644
--- a/packages/pigment-css-nextjs-plugin/src/index.ts
+++ b/packages/pigment-css-nextjs-plugin/src/index.ts
@@ -61,13 +61,7 @@ export function withPigment(nextConfig: NextConfig, pigmentConfig?: PigmentOptio
           if (what.startsWith('__barrel_optimize__')) {
             return require.resolve('../next-font');
           }
-          // Need to point to the react from node_modules during eval time.
-          // Otherwise, next makes it point to its own version of react that
-          // has a lot of RSC specific logic which is not actually needed.
-          if (what.startsWith('@babel') || what.startsWith('react') || what.startsWith('next')) {
-            return require.resolve(what);
-          }
-          if (what === 'next/image') {
+          if (what === 'next/image' || what === 'next/link') {
             return require.resolve('../next-image');
           }
           if (what.startsWith('next/font')) {
@@ -76,6 +70,12 @@ export function withPigment(nextConfig: NextConfig, pigmentConfig?: PigmentOptio
           if (what.startsWith('@emotion/styled') || what.startsWith('styled-components')) {
             return require.resolve('../third-party-styled');
           }
+          // Need to point to the react from node_modules during eval time.
+          // Otherwise, next makes it point to its own version of react that
+          // has a lot of RSC specific logic which is not actually needed.
+          if (what.startsWith('@babel') || what.startsWith('react') || what.startsWith('next')) {
+            return require.resolve(what);
+          }
           if (asyncResolve) {
             return asyncResolve(what, importer, stack);
           }
diff --git a/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts b/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts
index 0ac97ff3..1bcfb3b0 100644
--- a/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts
+++ b/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts
@@ -155,6 +155,10 @@ function iterateAndReplaceFunctions(
   const css = styleObj as StyleObj;
   Object.keys(css).forEach((key) => {
     const value = css[key];
+    if (!value) {
+      // ignore null value
+      return;
+    }
 
     if (typeof value === 'object') {
       if (!Array.isArray(value)) {

From bf715be9816a860c7669fe9b8a0e0a499eb0bfc5 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Wed, 11 Sep 2024 14:06:42 +0530
Subject: [PATCH 2/2] Review fixes

---
 packages/pigment-css-nextjs-plugin/src/index.ts            | 7 ++++++-
 .../pigment-css-react/src/utils/cssFnValueToVariable.ts    | 4 ----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/pigment-css-nextjs-plugin/src/index.ts b/packages/pigment-css-nextjs-plugin/src/index.ts
index 11b4a6e7..04d9576f 100644
--- a/packages/pigment-css-nextjs-plugin/src/index.ts
+++ b/packages/pigment-css-nextjs-plugin/src/index.ts
@@ -73,7 +73,12 @@ export function withPigment(nextConfig: NextConfig, pigmentConfig?: PigmentOptio
           // Need to point to the react from node_modules during eval time.
           // Otherwise, next makes it point to its own version of react that
           // has a lot of RSC specific logic which is not actually needed.
-          if (what.startsWith('@babel') || what.startsWith('react') || what.startsWith('next')) {
+          if (
+            what === 'react' ||
+            what.startsWith('react-dom/') ||
+            what.startsWith('@babel/') ||
+            what.startsWith('next/')
+          ) {
             return require.resolve(what);
           }
           if (asyncResolve) {
diff --git a/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts b/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts
index 1bcfb3b0..0ac97ff3 100644
--- a/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts
+++ b/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts
@@ -155,10 +155,6 @@ function iterateAndReplaceFunctions(
   const css = styleObj as StyleObj;
   Object.keys(css).forEach((key) => {
     const value = css[key];
-    if (!value) {
-      // ignore null value
-      return;
-    }
 
     if (typeof value === 'object') {
       if (!Array.isArray(value)) {