`postcss-preset-env` optimization warnings

[ThornWalli]

Hello,

currently have a lot of postcss-preset-env warnings in dev mode.

With postcss-preset-env@7 the warnings are removed. Is this a correct fix?

.

This version of postcss-preset-env is not optimised to work with PostCSS 8. Please update to version 7 of PostCSS Preset Env.

If you find issues, you can report it at: https://github.com/csstools/postcss-plugins/issues/new/choose

Behavior can be recreated with:

1. create new nuxt project (e.g. npm init nuxt-app… )
2. install @nuxt/postcss8
3. update postcss config
4. start dev

nuxt-config.js

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'test-postcss',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    "@nuxt/postcss8"
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    postcss: {
      plugins: {
        'postcss-preset-env': {
          preserve: true,
          stage: 0
        }
      },
      order: 'cssnanoLast'
    }
  }
}

package.json

{
  "name": "test-postcss",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7"
  },
  "devDependencies": {
    "@nuxt/postcss8": "^1.1.3"
  }
}

[slavanossar]

Also experiencing this issue, thought it was related to using payload in my project (which requires postcss-preset-env@^6.7.0 as a dependency), but it looks like @nuxt/webpack is also using postcss-preset-env@^6.7.0.

You can use yarn resolutions to force @nuxt/webpack and any other dependencies to use postcss-preset-env@^7.x:

{
  "resolutions": {
    "postcss-preset-env": "^7.x"
  }
}