From 57f435a59f02b707301c913e96a7fd9497ce479e Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pyapar@gmail.com>
Date: Tue, 21 Sep 2021 17:19:54 +0200
Subject: [PATCH] fix(webpack): typecheck postcss plugins and add missing
 `postcss-import` (resolves #544)

---
 packages/webpack/package.json         |  1 +
 packages/webpack/src/utils/postcss.ts | 24 +++++++++---------------
 yarn.lock                             |  1 +
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/webpack/package.json b/packages/webpack/package.json
index 54dfbc9b2a..e8a966bcbe 100644
--- a/packages/webpack/package.json
+++ b/packages/webpack/package.json
@@ -32,6 +32,7 @@
     "mini-css-extract-plugin": "^2.3.0",
     "pify": "^5.0.0",
     "postcss": "^8.3.6",
+    "postcss-import": "^14.0.2",
     "postcss-import-resolver": "^2.0.0",
     "postcss-loader": "^6.1.1",
     "postcss-url": "^10.1.3",
diff --git a/packages/webpack/src/utils/postcss.ts b/packages/webpack/src/utils/postcss.ts
index 251491349f..f3a71becd6 100644
--- a/packages/webpack/src/utils/postcss.ts
+++ b/packages/webpack/src/utils/postcss.ts
@@ -3,7 +3,7 @@ import path from 'upath'
 import consola from 'consola'
 import { defaults, merge, cloneDeep } from 'lodash'
 import createResolver from 'postcss-import-resolver'
-import { Nuxt, tryRequireModule } from '@nuxt/kit'
+import { Nuxt, requireModule } from '@nuxt/kit'
 
 const isPureObject = obj => obj !== null && !Array.isArray(obj) && typeof obj === 'object'
 
@@ -138,20 +138,14 @@ export class PostcssConfig {
   }
 
   loadPlugins (config) {
-    const { plugins } = config
-    if (isPureObject(plugins)) {
-      // Map postcss plugins into instances on object mode once
-      config.plugins = this.sortPlugins(config)
-        .map((p) => {
-          const plugin = tryRequireModule(p)
-          const opts = plugins[p]
-          if (opts === false) {
-            return false // Disabled
-          }
-          return plugin(opts)
-        })
-        .filter(Boolean)
-    }
+    if (!isPureObject(config.plugins)) { return }
+    // Map postcss plugins into instances on object mode once
+    config.plugins = this.sortPlugins(config).map((pluginName) => {
+      const pluginFn = requireModule(pluginName, { paths: [__dirname] })
+      const pluginOptions = config.plugins[pluginName]
+      if (!pluginOptions || typeof pluginFn !== 'function') { return null }
+      return pluginFn(pluginOptions)
+    }).filter(Boolean)
   }
 
   config () {
diff --git a/yarn.lock b/yarn.lock
index 8681907957..f895d0f92c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1615,6 +1615,7 @@ __metadata:
     mini-css-extract-plugin: ^2.3.0
     pify: ^5.0.0
     postcss: ^8.3.6
+    postcss-import: ^14.0.2
     postcss-import-resolver: ^2.0.0
     postcss-loader: ^6.1.1
     postcss-url: ^10.1.3