fix(config): move `preset` to inner `postcssOptions` (#19518)

examples/with-purgecss/nuxt.config.js

@@ -15,9 +15,9 @@ export default {
       postcssOptions: {
         plugins: {
           tailwindcss: path.resolve('./tailwind.js')
-        }
+        },
-      },
+        preset: { autoprefixer: { grid: true } }
-      preset: { autoprefixer: { grid: true } }
+      }
     },
     extend (config, { isDev }) {
       if (!isDev) {

packages/config/src/config/build.js

@@ -85,10 +85,8 @@ export default () => ({
   },
   transpile: [], // Name of NPM packages to be transpiled
   postcss: {
-    preset: {
+    // Use the default postcss config: stage 2
-      // https://cssdb.org/#staging-process
+    // https://cssdb.org/#staging-process
-      stage: 2
-    },
     postcssOptions: {}
   },
   html: {

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

@@ -139,9 +139,6 @@ Object {
     "plugins": Array [],
     "postcss": Object {
       "postcssOptions": Object {},
-      "preset": Object {
-        "stage": 2,
-      },
     },
     "profile": false,
     "publicPath": "/_nuxt/",

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

@@ -111,9 +111,6 @@ Object {
     "plugins": Array [],
     "postcss": Object {
       "postcssOptions": Object {},
-      "preset": Object {
-        "stage": 2,
-      },
     },
     "profile": false,
     "publicPath": "/_nuxt/",
@@ -502,9 +499,6 @@ Object {
     "plugins": Array [],
     "postcss": Object {
       "postcssOptions": Object {},
-      "preset": Object {
-        "stage": 2,
-      },
     },
     "profile": false,
     "publicPath": "/_nuxt/",

packages/webpack/src/utils/postcss.js

@@ -67,6 +67,10 @@ export default class PostcssConfig {
     return alias
   }
 
+  /**
+   * Returns the default PostCSS options used by Nuxt.
+   * @returns {{ plugins: {"postcss-import": {resolve: Function}, "postcss-preset-env": {}, "postcss-url": {}, cssnano: (boolean|{preset: [string,{minifyFontValues: {removeQuotes: boolean}}]})}, order: string}}
+   */
   get defaultPostcssOptions () {
     const { dev, srcDir, rootDir, modulesDir } = this.buildContext.options
     return {
@@ -82,8 +86,8 @@ export default class PostcssConfig {
         // https://github.com/postcss/postcss-url
         'postcss-url': {},
 
-        // https://github.com/csstools/postcss-preset-env
+        // https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
-        'postcss-preset-env': this.postcssLoaderOptions.preset || {},
+        'postcss-preset-env': {},
 
         cssnano: dev
           ? false
@@ -141,12 +145,58 @@ export default class PostcssConfig {
     }
   }
 
+  /**
+   * Converts the old syntax to the one expected by Nuxt ^2.16.
+   * - `Array` to `{ plugins: [] }`
+   * - `Boolean` to `{ plugins: {} }` (default plugins) or `{ plugins: false }` (no plugins)
+   * - Moves the `preset`, `order` and `plugins` to the inner `postcssOptions` object
+   * - Does not convert an Array of plugins to an object
+   * @param postcssOptions
+   * @returns {{ postcssOptions: { plugins?: unknown, order?: string, preset?: any} }}
+   */
   normalize (postcssOptions) {
     // TODO: Remove in Nuxt 3
     if (Array.isArray(postcssOptions)) {
       consola.warn('Using an Array as `build.postcss` will be deprecated in Nuxt 3. Please switch to the object' +
         ' declaration')
-      postcssOptions = { plugins: postcssOptions }
+      return { postcssOptions: { plugins: postcssOptions } }
+    } else if (typeof postcssOptions === 'boolean') {
+      consola.warn('Using a Boolean as `build.postcss` will be deprecated in Nuxt 3. Please switch to the object' +
+        ' declaration')
+      return { postcssOptions: { plugins: postcssOptions ? {} : false } }
+    } else if (!isPureObject(postcssOptions)) {
+      return { postcssOptions: {} }
+    }
+    if (postcssOptions.postcssOptions && typeof postcssOptions.postcssOptions === 'function') {
+      consola.warn('Using a Function as `build.postcss.postcssOptions` is not yet supported in Nuxt 2.16.2')
+      return { postcssOptions: {} }
+    }
+    if (!('postcssOptions' in postcssOptions)) {
+      if (Object.keys(postcssOptions).length > 0) {
+        consola.warn('Using the top-level properties in `build.postcss` will be deprecated in Nuxt 3. Please move' +
+          'the settings to `postcss.postcssOptions`')
+      }
+      postcssOptions = { postcssOptions }
+    }
+    // The plugins and preset are merged, with priority to the inner `postcssOptions`
+    if (postcssOptions.plugins) {
+      postcssOptions.postcssOptions.plugins = merge(
+        postcssOptions.postcssOptions.plugins || {},
+        postcssOptions.plugins)
+      delete postcssOptions.plugins
+    }
+    // The preset is merged, with priority to the inner `postcssOptions`
+    if (postcssOptions.preset) {
+      postcssOptions.postcssOptions.preset = merge(
+        postcssOptions.preset,
+        postcssOptions.postcssOptions.preset || {}
+      )
+      delete postcssOptions.preset
+    }
+    // The `postcssOptions.order` is used only if there is no `postcssOptions.postcssOptions.order`
+    if (postcssOptions.order) {
+      postcssOptions.postcssOptions.order = postcssOptions.postcssOptions.order || postcssOptions.order
+      delete postcssOptions.order
     }
     return postcssOptions
   }
@@ -159,11 +209,15 @@ export default class PostcssConfig {
     return typeof order === 'function' ? order(names, orderPresets) : (order || names)
   }
 
+  /**
+   * Load plugins from postcssOptions
+   * @param {{ postcssOptions: {plugins?: unknown, order?: string | function}}} postcssOptions
+   */
   loadPlugins (postcssOptions) {
-    const { plugins } = postcssOptions
+    const { plugins, order } = postcssOptions.postcssOptions
     if (isPureObject(plugins)) {
       // Map postcss plugins into instances on object mode once
-      postcssOptions.plugins = this.sortPlugins(postcssOptions)
+      postcssOptions.postcssOptions.plugins = this.sortPlugins({ plugins, order })
         .map((p) => {
           const plugin = this.buildContext.nuxt.resolver.requireModule(p, { paths: [__dirname] })
           const opts = plugins[p]
@@ -178,51 +232,50 @@ export default class PostcssConfig {
 
   config () {
     /* istanbul ignore if */
-    if (!this.postcssOptions) {
+    if (!this.postcssLoaderOptions) {
       return false
     }
 
-    let postcssOptions = this.configFromFile()
+    const postcssOptionsFromFile = this.configFromFile()
-    if (postcssOptions) {
+    if (postcssOptionsFromFile) {
       return {
-        postcssOptions,
+        postcssOptions: postcssOptionsFromFile,
         sourceMap: this.cssSourceMap
       }
     }
 
-    postcssOptions = this.normalize(cloneDeep(this.postcssOptions))
+    /**
+     * Normalized postcss options
+     * @type {{postcssOptions: {plugins?: unknown, order?: string, preset?: unknown}}}
+     */
+    const postcssOptions = this.normalize(cloneDeep(this.postcssLoaderOptions))
 
-    // Apply default plugins
+    if (Array.isArray(postcssOptions.postcssOptions.plugins)) {
-    if (isPureObject(postcssOptions)) {
+      defaults(postcssOptions.postcssOptions.plugins, this.defaultPostcssOptions.plugins)
-      const postcssLoaderOptions = this.postcssLoaderOptions
+    } else {
-      if (postcssLoaderOptions.plugins) {
+      // Merge all plugins and use preset for setting up postcss-preset-env
-        if (!postcssOptions.plugins || isPureObject(postcssOptions.plugins)) {
+      if (postcssOptions.postcssOptions.preset) {
-          postcssOptions.plugins = { ...postcssLoaderOptions.plugins || {}, ...postcssOptions.plugins || {} }
+        if (!postcssOptions.postcssOptions.plugins) {
+          postcssOptions.postcssOptions.plugins = {}
         }
-        delete postcssLoaderOptions.plugins
+        postcssOptions.postcssOptions.plugins['postcss-preset-env'] = defaults(
-      }
+          postcssOptions.postcssOptions.preset,
-      if ('order' in postcssLoaderOptions) {
+          this.defaultPostcssOptions.plugins['postcss-preset-env']
-        // Prioritise correct config value
+        )
-        postcssOptions.order = postcssOptions.order || postcssLoaderOptions.order
+
-        delete postcssLoaderOptions.order
+        delete postcssOptions.postcssOptions.preset
       }
 
-      if (Array.isArray(postcssOptions.plugins)) {
+      // Keep the order of default plugins
-        defaults(postcssOptions, this.defaultPostcssOptions)
+      postcssOptions.postcssOptions = merge({}, this.defaultPostcssOptions, postcssOptions.postcssOptions)
-      } else {
+      this.loadPlugins(postcssOptions)
-        // Keep the order of default plugins
+    }
-        postcssOptions = merge({}, this.defaultPostcssOptions, postcssOptions)
-        this.loadPlugins(postcssOptions)
-      }
 
-      delete postcssOptions.order
+    delete postcssOptions.postcssOptions.order
-      delete postcssLoaderOptions.preset
 
-      return {
+    return {
-        sourceMap: this.cssSourceMap,
+      sourceMap: this.cssSourceMap,
-        ...postcssLoaderOptions,
+      ...postcssOptions
-        postcssOptions
-      }
     }
   }
 }

test/fixtures/custom-dirs/nuxt.config.js

@@ -7,9 +7,11 @@ export default {
       }
     },
     postcss: {
-      preset: {
+      postcssOptions: {
-        autoprefixer: {
+        preset: {
-          grid: true
+          autoprefixer: {
+            grid: true
+          }
         }
       }
     },

test/fixtures/extract-css/nuxt.config.js

@@ -7,9 +7,11 @@ export default {
       }
     },
     postcss: {
-      preset: {
+      postcssOptions: {
-        autoprefixer: {
+        preset: {
-          grid: true
+          autoprefixer: {
+            grid: true
+          }
         }
       }
     },