Add specific warning for require() PostCSS plugin (#10121)

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

@@ -193,6 +193,15 @@ export async function getPostCssPlugins(
         }
         throw new Error(genericErrorText)
       }
+    } else if (typeof plugin === 'function') {
+      console.error(
+        `${chalk.red.bold(
+          'Error'
+        )}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${chalk.bold(
+          'string'
+        )}.`
+      )
+      throw new Error(genericErrorText)
     } else {
       console.error(
         `${chalk.red.bold(

test/integration/css-customization/test/index.test.js

@@ -331,6 +331,23 @@ describe('Bad CSS Customization Array (7)', () => {
   })
 })
 
+describe('Bad CSS Customization Array (8)', () => {
+  const appDir = join(fixturesDir, 'bad-custom-configuration-arr-8')
+
+  beforeAll(async () => {
+    await remove(join(appDir, '.next'))
+  })
+
+  it('should fail the build', async () => {
+    const { stderr } = await nextBuild(appDir, [], { stderr: true })
+
+    expect(stderr).toMatch(
+      /A PostCSS Plugin was passed as a function using require\(\), but it must be provided as a string/
+    )
+    expect(stderr).toMatch(/Build error occurred/)
+  })
+})
+
 describe('Bad CSS Customization Function', () => {
   const appDir = join(fixturesDir, 'bad-custom-configuration-func')
 

test/integration/css-fixtures/bad-custom-configuration-arr-8/pages/_app.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import App from 'next/app'
+import '../styles/global.css'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp

test/integration/css-fixtures/bad-custom-configuration-arr-8/pages/index.js

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div />
+}

test/integration/css-fixtures/bad-custom-configuration-arr-8/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('postcss-trolling')],
+}

test/integration/css-fixtures/bad-custom-configuration-arr-8/styles/global.css

@@ -0,0 +1,14 @@
+/* this should pass through untransformed */
+@media (480px <= width < 768px) {
+  a::before {
+    content: '';
+  }
+  ::placeholder {
+    color: green;
+  }
+}
+
+/* this should be transformed to width/height */
+.video {
+  -xyz-max-size: 400rem 300rem;
+}