feat(webpack)!: update postcss to v8 (#9671)

Co-authored-by: Daniel Roe <daniel@roe.dev>

.iyarc

@@ -3,3 +3,4 @@
 
 GHSA-rp65-9cf3-cjxr
 GHSA-3j8f-xvm3-ffx4
+GHSA-f8q6-p94x-37v3

examples/tailwindcss-purgecss/nuxt.config.js

@@ -17,8 +17,10 @@ export default {
   css: ['~/assets/css/tailwind.css'],
   build: {
     postcss: {
-      plugins: {
-        tailwindcss: path.join(__dirname, './tailwind.config.js')
+      postcssOptions: {
+        plugins: {
+          tailwindcss: path.join(__dirname, './tailwind.config.js')
+        }
       }
     }
   }

examples/with-purgecss/nuxt.config.js

@@ -12,8 +12,10 @@ export default {
   build: {
     extractCSS: true,
     postcss: {
-      plugins: {
-        tailwindcss: path.resolve('./tailwind.js')
+      postcssOptions: {
+        plugins: {
+          tailwindcss: path.resolve('./tailwind.js')
+        }
       },
       preset: { autoprefixer: { grid: true } }
     },

packages/config/src/config/build.js

@@ -88,7 +88,8 @@ export default () => ({
     preset: {
       // https://cssdb.org/#staging-process
       stage: 2
-    }
+    },
+    postcssOptions: {}
   },
   html: {
     minify: {

packages/config/src/options.js

@@ -440,6 +440,17 @@ export function getNuxtConfig (_options) {
     delete options.build.crossorigin
   }
 
+  if (options.build.postcss.plugins) {
+    consola.warn('`postcss.plugins` option has been moved to `postcss.postcssOptions.plugins` for aligning `postcss-loader` format.')
+    options.build.postcss.postcssOptions.plugins = options.build.postcss.plugins
+    delete options.build.postcss.plugins
+  }
+
+  if (options.buildModules && options.buildModules.includes('@nuxt/postcss8')) {
+    consola.info('`@nuxt/postcss8` is disabled since nuxt has upgraded to postcss v8.')
+    options.buildModules = options.buildModules.filter(module => module !== '@nuxt/postcss8')
+  }
+
   const { timing } = options.server
   if (timing) {
     options.server.timing = { total: true, ...timing }

packages/config/test/__snapshots__/options.test.js.snap

@@ -138,6 +138,7 @@ Object {
     "parallel": false,
     "plugins": Array [],
     "postcss": Object {
+      "postcssOptions": Object {},
       "preset": Object {
         "stage": 2,
       },

packages/config/test/config/__snapshots__/index.test.js.snap

@@ -110,6 +110,7 @@ Object {
     "parallel": false,
     "plugins": Array [],
     "postcss": Object {
+      "postcssOptions": Object {},
       "preset": Object {
         "stage": 2,
       },
@@ -500,6 +501,7 @@ Object {
     "parallel": false,
     "plugins": Array [],
     "postcss": Object {
+      "postcssOptions": Object {},
       "preset": Object {
         "stage": 2,
       },

packages/types/config/build.d.ts

@@ -121,17 +121,17 @@ interface PostcssConfiguration {
   order?: PostcssOrderPreset | string[] | ((names: string[], presets: PostcssOrderPresetFunctions) => string[])
   plugins?: {
     [key: string]: false | { [key: string]: any }
-  } | ((loader: WebpackLoaderNamespace.LoaderContext) => PostcssPlugin<any>[]) | Array<[string | PostcssPlugin<any>, any] | string | PostcssPlugin<any>>
-  preset?: {
+  } | ((loader: WebpackLoaderNamespace.LoaderContext) => PostcssPlugin[]) | Array<[string | PostcssPlugin, any] | string | PostcssPlugin>
+  readonly preset?: {
     autoprefixer?: false | AutoprefixerOptions
     browsers?: string
     exportTo?: string | string[] | Partial<PostcssVariableMap> | ((map: PostcssVariableMap) => Partial<PostcssVariableMap>)
     features?: {
       [key: string]: boolean | { [key: string]: any }
     }
     importFrom?: string | string[] | Partial<PostcssVariableMap> | (() => Partial<PostcssVariableMap>)
-    insertAfter?: { [key: string]: PostcssPlugin<any> }
-    insertBefore?: { [key: string]: PostcssPlugin<any> }
+    insertAfter?: { [key: string]: PostcssPlugin }
+    insertBefore?: { [key: string]: PostcssPlugin }
     preserve?: boolean
     stage?: 0 | 1 | 2 | 3 | 4 | false
   }
@@ -166,7 +166,7 @@ export interface NuxtOptionsBuild {
   optimizeCSS?: OptimizeCssAssetsWebpackPluginOptions | boolean
   parallel?: boolean
   plugins?: WebpackPlugin[]
-  postcss?: string[] | boolean | PostcssConfiguration | (() => PostcssConfiguration)
+  postcss?: string[] | boolean | { postcssOptions: PostcssConfiguration | (() => PostcssConfiguration) }
   profile?: boolean
   publicPath?: string
   quiet?: boolean

packages/webpack/package.json

@@ -16,8 +16,8 @@
     "cache-loader": "^4.1.0",
     "caniuse-lite": "^1.0.30001450",
     "consola": "^2.15.3",
-    "css-loader": "^4.3.0",
-    "cssnano": "^4.1.11",
+    "css-loader": "^5.2.7",
+    "cssnano": "^5.1.14",
     "eventsource-polyfill": "^0.9.6",
     "extract-css-chunks-webpack-plugin": "^4.9.0",
     "file-loader": "^6.2.0",
@@ -27,15 +27,15 @@
     "html-webpack-plugin": "^4.5.1",
     "lodash": "^4.17.21",
     "memory-fs": "^0.5.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.8",
+    "optimize-css-assets-webpack-plugin": "^6.0.1",
     "pify": "^5.0.0",
     "pnp-webpack-plugin": "^1.7.0",
-    "postcss": "^7.0.32",
-    "postcss-import": "^12.0.1",
+    "postcss": "^8.4.21",
+    "postcss-import": "^15.1.0",
     "postcss-import-resolver": "^2.0.0",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.1",
-    "postcss-url": "^8.0.0",
+    "postcss-loader": "^4.3.0",
+    "postcss-preset-env": "^8.0.1",
+    "postcss-url": "^10.1.3",
     "semver": "^7.3.8",
     "std-env": "^3.3.1",
     "style-resources-loader": "^1.5.0",