fix(webpack): typecheck postcss plugins and add missing postcss-import (resolves #544)

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",

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(config.plugins)) { return }
-    if (isPureObject(plugins)) {
+    // Map postcss plugins into instances on object mode once
-      // Map postcss plugins into instances on object mode once
+    config.plugins = this.sortPlugins(config).map((pluginName) => {
-      config.plugins = this.sortPlugins(config)
+      const pluginFn = requireModule(pluginName, { paths: [__dirname] })
-        .map((p) => {
+      const pluginOptions = config.plugins[pluginName]
-          const plugin = tryRequireModule(p)
+      if (!pluginOptions || typeof pluginFn !== 'function') { return null }
-          const opts = plugins[p]
+      return pluginFn(pluginOptions)
-          if (opts === false) {
+    }).filter(Boolean)
-            return false // Disabled
-          }
-          return plugin(opts)
-        })
-        .filter(Boolean)
-    }
   }
 
   config () {

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