From 5d2e45f29b968459ac088b59da966768555f2d4d Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Wed, 13 Mar 2024 10:20:41 +0530
Subject: [PATCH] [pigment][next] Warn about unsupported turbo mode in Next.js
 (#41445)

---
 packages/pigment-css-nextjs-plugin/src/index.ts | 14 +++++++++++---
 packages/pigment-css-react/README.md            |  2 +-
 packages/pigment-css-react/tsup.config.ts       |  4 ----
 tsup.config.ts                                  |  3 +++
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/pigment-css-nextjs-plugin/src/index.ts b/packages/pigment-css-nextjs-plugin/src/index.ts
index 7950f160799981..92b0ddee1dcf21 100644
--- a/packages/pigment-css-nextjs-plugin/src/index.ts
+++ b/packages/pigment-css-nextjs-plugin/src/index.ts
@@ -16,8 +16,16 @@ const extractionFile = path.join(
   'zero-virtual.css',
 );
 
-export function withPigment(nextConfig: NextConfig, pigmentConfig: PigmentOptions) {
-  const { babelOptions, asyncResolve, ...rest } = pigmentConfig;
+export function withPigment(nextConfig: NextConfig, pigmentConfig?: PigmentOptions) {
+  const { babelOptions = {}, asyncResolve, ...rest } = pigmentConfig ?? {};
+  if (process.env.TURBOPACK === '1') {
+    // eslint-disable-next-line no-console
+    console.log(
+      `\x1B[33m${process.env.PACKAGE_NAME}: Turbo mode is not supported yet. Please disable it by removing the "--turbo" flag from your "next dev" command to use Pigment CSS.\x1B[39m`,
+    );
+    return nextConfig;
+  }
+
   const webpack: Exclude<NextConfig['webpack'], undefined> = (config, context) => {
     const { dir, dev, isServer, config: resolvedNextConfig } = context;
 
@@ -73,7 +81,7 @@ export function withPigment(nextConfig: NextConfig, pigmentConfig: PigmentOption
     }
     config.ignoreWarnings = config.ignoreWarnings ?? [];
     config.ignoreWarnings.push({
-      module: /(zero-virtual\.css)|(runtime\/styles\.css)/,
+      module: /(zero-virtual\.css)|(react\/styles\.css)/,
     });
     return config;
   };
diff --git a/packages/pigment-css-react/README.md b/packages/pigment-css-react/README.md
index 21ba3a092d0597..6d7e0ccbfd39e3 100644
--- a/packages/pigment-css-react/README.md
+++ b/packages/pigment-css-react/README.md
@@ -331,7 +331,7 @@ All of the components that you create are also available as CSS selectors. For e
 
 ```jsx
 const Wrapper = styled.div({
-  [`& .${Heading}`]: {
+  [`& ${Heading}`]: {
     color: 'blue',
   },
 });
diff --git a/packages/pigment-css-react/tsup.config.ts b/packages/pigment-css-react/tsup.config.ts
index 635ac6fa9b2f64..89ce3641d5dd3f 100644
--- a/packages/pigment-css-react/tsup.config.ts
+++ b/packages/pigment-css-react/tsup.config.ts
@@ -1,6 +1,5 @@
 import { Options, defineConfig } from 'tsup';
 import config from '../../tsup.config';
-import packageJson from './package.json';
 
 const processors = ['styled', 'sx', 'keyframes', 'generateAtomics', 'css', 'createUseThemeProps'];
 const external = ['react', 'react-is', 'prop-types'];
@@ -9,9 +8,6 @@ const baseConfig: Options = {
   ...(config as Options),
   tsconfig: './tsconfig.build.json',
   external,
-  env: {
-    PACKAGE_NAME: packageJson.name,
-  },
 };
 
 export default defineConfig([
diff --git a/tsup.config.ts b/tsup.config.ts
index 10795948887c53..159ef80835ef07 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -27,4 +27,7 @@ export default defineConfig({
   banner: {
     js: licenseText,
   },
+  env: {
+    PACKAGE_NAME: pkgJson.name,
+  },
 });