From 58f8084ab5ba4ad9a433ef25d49a3a1810b8ed03 Mon Sep 17 00:00:00 2001
From: Tobias Koppers <tobias.koppers@googlemail.com>
Date: Fri, 8 Apr 2022 18:58:50 +0200
Subject: [PATCH] allow to provide postcss plugin options as a string (#35173)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes https://github.com/vercel/next.js/issues/35117

@balazsorban44 this needs a test case

## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`


Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>
---
 .../webpack/config/blocks/css/plugins.ts      | 11 ++--
 .../index.test.ts                             | 54 +++++++++++++++++++
 2 files changed, 60 insertions(+), 5 deletions(-)
 create mode 100644 test/production/postcss-plugin-config-as-string/index.test.ts

diff --git a/packages/next/build/webpack/config/blocks/css/plugins.ts b/packages/next/build/webpack/config/blocks/css/plugins.ts
index 890c31edbcd24fd..9d24c4aabbd3724 100644
--- a/packages/next/build/webpack/config/blocks/css/plugins.ts
+++ b/packages/next/build/webpack/config/blocks/css/plugins.ts
@@ -9,7 +9,7 @@ type CssPluginCollection =
   | CssPluginCollection_Array
   | CssPluginCollection_Object
 
-type CssPluginShape = [string, object | boolean]
+type CssPluginShape = [string, object | boolean | string]
 
 const genericErrorText = 'Malformed PostCSS Configuration'
 
@@ -62,7 +62,7 @@ const createLazyPostCssPlugin = (
 async function loadPlugin(
   dir: string,
   pluginName: string,
-  options: boolean | object
+  options: boolean | object | string
 ): Promise<import('postcss').AcceptedPlugin | false> {
   if (options === false || isIgnoredPlugin(pluginName)) {
     return false
@@ -79,8 +79,7 @@ async function loadPlugin(
   } else if (options === true) {
     return createLazyPostCssPlugin(() => require(pluginPath))
   } else {
-    const keys = Object.keys(options)
-    if (keys.length === 0) {
+    if (typeof options === 'object' && Object.keys(options).length === 0) {
       return createLazyPostCssPlugin(() => require(pluginPath))
     }
     return createLazyPostCssPlugin(() => require(pluginPath)(options))
@@ -187,7 +186,9 @@ export async function getPostCssPlugins(
       const pluginConfig = plugin[1]
       if (
         typeof pluginName === 'string' &&
-        (typeof pluginConfig === 'boolean' || typeof pluginConfig === 'object')
+        (typeof pluginConfig === 'boolean' ||
+          typeof pluginConfig === 'object' ||
+          typeof pluginConfig === 'string')
       ) {
         parsed.push([pluginName, pluginConfig])
       } else {
diff --git a/test/production/postcss-plugin-config-as-string/index.test.ts b/test/production/postcss-plugin-config-as-string/index.test.ts
new file mode 100644
index 000000000000000..e8f75b5f1035283
--- /dev/null
+++ b/test/production/postcss-plugin-config-as-string/index.test.ts
@@ -0,0 +1,54 @@
+import { createNext } from 'e2e-utils'
+import { renderViaHTTP } from 'next-test-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+
+describe('PostCSS plugin config as string', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'pages/index.js': `
+          export default function Page() {
+            return <p>hello world</p>
+          }
+        `,
+        'global.css': `
+          @import "tailwindcss/base";
+          @import "tailwindcss/components";
+          @import "tailwindcss/utilities";
+        `,
+        'pages/_app.js': `
+          import "../global.css"
+          
+          export default function MyApp({ Component, pageProps }) {
+            return <Component {...pageProps} />
+          }
+        `,
+        'postcss.config.js': `
+          module.exports = {
+            plugins: {
+              'tailwindcss/nesting': 'postcss-nesting',
+              tailwindcss: {},
+            },
+          }
+        `,
+        'tailwind.config.js': `
+          module.exports = {
+            content: ['./pages/**/*'],
+          }
+        `,
+      },
+      dependencies: {
+        'postcss-nesting': '10.1.3',
+        tailwindcss: '3.0.23',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should work', async () => {
+    const html = await renderViaHTTP(next.url, '/')
+    expect(html).toContain('hello world')
+  })
+})