Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

postcss-preset-env optimization warnings #27

Open
ThornWalli opened this issue Feb 15, 2022 · 1 comment
Open

postcss-preset-env optimization warnings #27

ThornWalli opened this issue Feb 15, 2022 · 1 comment

Comments

@ThornWalli
Copy link

ThornWalli commented Feb 15, 2022

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?

image.

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"
  }
}
@ThornWalli ThornWalli changed the title postcss-preset-env optimization warnings postcss-preset-env optimization warnings in dev Feb 15, 2022
@ThornWalli ThornWalli changed the title postcss-preset-env optimization warnings in dev postcss-preset-env optimization warnings Feb 15, 2022
@ThornWalli ThornWalli changed the title postcss-preset-env optimization warnings postcss-preset-env optimization warnings Feb 15, 2022
@slavanossar
Copy link

slavanossar commented Feb 28, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants