PostCSS Error When Exporting Function (#10242)

* PostCSS Error When Exporting Function

* Update postcss-function.md

errors/postcss-function.md

@@ -0,0 +1,30 @@
+# PostCSS Configuration Is a Function
+
+#### Why This Error Occurred
+
+The project's custom PostCSS configuration exports a function instead of an object.
+
+#### Possible Ways to Fix It
+
+Adjust the custom PostCSS configuration to not export a function.
+Instead, return a plain object—if you need environment information, read it from `process.env`.
+
+**Before**
+
+```js
+module.exports = ({ env }) => ({
+  plugins: {
+    'postcss-plugin': env === 'production' ? {} : false,
+  },
+})
+```
+
+**After**
+
+```js
+module.exports = {
+  plugins: {
+    'postcss-plugin': process.env.NODE_ENV === 'production' ? {} : false,
+  },
+}
+```

packages/next/build/webpack/config/blocks/css/plugins.ts

@@ -119,7 +119,8 @@ export async function getPostCssPlugins(
 
   if (typeof config === 'function') {
     throw new Error(
-      `Your custom PostCSS configuration may not export a function. Please export a plain object instead.`
+      `Your custom PostCSS configuration may not export a function. Please export a plain object instead.\n` +
+        'Read more: https://err.sh/next.js/postcss-function'
     )
   }