fix(postcss): default to preset-env and cssnano last (#5215)

packages/webpack/src/utils/postcss.js

@@ -9,12 +9,22 @@ import createResolver from 'postcss-import-resolver'
 import { isPureObject } from '@nuxt/utils'
 
 export const orderPresets = {
-  cssnanoLast: (names) => {
+  cssnanoLast(names) {
     const nanoIndex = names.indexOf('cssnano')
     if (nanoIndex !== names.length - 1) {
       names.push(names.splice(nanoIndex, 1)[0])
     }
     return names
+  },
+  presetEnvLast(names) {
+    const nanoIndex = names.indexOf('postcss-preset-env')
+    if (nanoIndex !== names.length - 1) {
+      names.push(names.splice(nanoIndex, 1)[0])
+    }
+    return names
+  },
+  presetEnvAndCssnanoLast(names) {
+    return orderPresets.cssnanoLast(orderPresets.presetEnvLast(names))
   }
 }
 
@@ -53,7 +63,7 @@ export default class PostcssConfig {
         'cssnano': dev ? false : { preset: 'default' }
       },
       // Array, String or Function
-      order: 'cssnanoLast'
+      order: 'presetEnvAndCssnanoLast'
     }
   }
 

test/unit/basic.dev.test.js

@@ -90,15 +90,15 @@ describe('basic dev', () => {
     expect(vueLoader.options).toEqual(vue)
   })
 
-  test('Config: cssnano is at then end of postcss plugins', () => {
+  test('Config: preset-env and cssnano are at then end of postcss plugins', () => {
     const plugins = postcssLoader.options.plugins.map((plugin) => {
       return plugin.postcssPlugin
     })
     expect(plugins).toEqual([
       'postcss-import',
       'postcss-url',
-      'postcss-preset-env',
       'nuxt-test',
+      'postcss-preset-env',
       'cssnano'
     ])
   })