Environment

System:
OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
CPU: (12) x64 AMD EPYC
Memory: 14.14 GB / 15.63 GB
Container: Yes
Shell: 5.1.4 - /bin/bash
Binaries:
Node: 16.17.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.15.0 - /usr/local/bin/npm
Watchman: 20220528.183901.0 - /usr/local/bin/watchman
npmPackages:
@nuxt/vue-app: ^2.16.2 => 2.16.2
nuxt: ^2.16.2 => 2.16.2

Reproduction

https://codesandbox.io/p/github/obulat/starter/draft/admiring-goldwasser?workspace=%257B%2522activeFileId%2522%253Anull%252C%2522openFiles%2522%253A%255B%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%257D%252C%2522currentSpace%2522%253Anull%252C%2522spacesOrder%2522%253A%255B%255D%252C%2522hideCodeEditor%2522%253Afalse%257D

Describe the bug

It is impossible to configure postcss-preset-env in Nuxt 2.16. There is a preset property in nuxt.config's build.postcss.postcssOptions, but Nuxt does not use it. Instead, it tries to use the old preset option in build.postcss object.

It seems that #8899 might be touching this functionality, but I'm not sure if it's fixing this issue.

We have tried to update Nuxt from 2.15.8 to 2.16.x in Openverse, but it breaks the RTL layout because the preset-env by default is set not to support CSS logical properties like margin-inline-start (they are stage 2 of browser support).

The postcss.preset settings from nuxt.config are not passed to the postcss-preset-env plugin.

Currently, if postcss settings are not set using a file (the deprecated way), webpack/src/utils gets 2 objects from nuxt.config: postcssLoaderOptions (the value of build.postcss) and postcssOptions (the value of build.postcss.postcssOptions).

defaultPostcssOptions sets the postcss-preset-env options as this.postcssLoaderOptions.preset || {}, but postcss.preset was deprecated in Nuxt 2.16. It should be replaced with this.postcssOptions.preset || {}.

Also, PostcssConfig.config() method returns

return {
        sourceMap: this.cssSourceMap,
        ...postcssLoaderOptions,
        postcssOptions
      }

However, postcssLoaderOptions is not necessary because its plugins are already copied into postcssOptions, and the key is deleted; the preset and order properties are also deleted in the config() function

Additional context

diff --git a/packages/webpack/src/utils/postcss.js b/packages/webpack/src/utils/postcss.js
index 68f4fc52d..5b60e6efe 100644
--- a/packages/webpack/src/utils/postcss.js
+++ b/packages/webpack/src/utils/postcss.js
@@ -83,7 +83,7 @@ export default class PostcssConfig {
         'postcss-url': {},
 
         // https://github.com/csstools/postcss-preset-env
-        'postcss-preset-env': this.postcssLoaderOptions.preset || {},
+        'postcss-preset-env': this.postcssOptions.preset || {},
 
         cssnano: dev
           ? false
@@ -199,12 +199,10 @@ export default class PostcssConfig {
         if (!postcssOptions.plugins || isPureObject(postcssOptions.plugins)) {
           postcssOptions.plugins = { ...postcssLoaderOptions.plugins || {}, ...postcssOptions.plugins || {} }
         }
-        delete postcssLoaderOptions.plugins
       }
       if ('order' in postcssLoaderOptions) {
         // Prioritise correct config value
         postcssOptions.order = postcssOptions.order || postcssLoaderOptions.order
-        delete postcssLoaderOptions.order
       }
 
       if (Array.isArray(postcssOptions.plugins)) {
@@ -216,11 +214,9 @@ export default class PostcssConfig {
       }
 
       delete postcssOptions.order
-      delete postcssLoaderOptions.preset
 
       return {
         sourceMap: this.cssSourceMap,
-        ...postcssLoaderOptions,
         postcssOptions
       }
     }

Logs

No response