[pigment][next] Warn about unsupported turbo mode in Next.js (#41445)

mui · Mar 13, 2024 · 5d2e45f · 5d2e45f
1 parent 9e97e73
commit 5d2e45f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -27,4 +27,7 @@ export default defineConfig({
   banner: {
     js: licenseText,
   },
+  env: {
+    PACKAGE_NAME: pkgJson.name,
+  },
 });