Incompatible with nuxt 2.16.0 due to nuxt upgrading to postcss8 and nuxt3 style postcss8 options

[cordery]

Describe the bug

Running nuxt 2.16 with the nuxt-webpack-optimisations feature postcssNoPolyfills enabled leads to the following blocking error:

ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

To Reproduce
Steps to reproduce the behavior:

1. Upgrade a working nuxt 2 w/ nuxt-webpack-optimisations project to use nuxt 2.16.0
2. Run nuxt run dev
3. See error

Reason for the error

Nuxt 2.16.0 upgraded to postcss 8, and changed the postcss options format to the 'postcssOptions' style. See this PR for details, but essentially the change looks like this:

<2.16.0

postcss: {
    plugins: {
      "postcss-import": {},
      "tailwindcss/nesting": {},
      tailwindcss: {},
      autoprefixer: {},
    },
},

2.16.0

postcss: {
    postcssOptions: {
      plugins: {
        "postcss-import": {},
        "tailwindcss/nesting": {},
        tailwindcss: {},
        autoprefixer: {},
      },
    },
},

This causes an error as when the postcssNoPolyfills feature is enabled nuxt-webpack-optimisations modifies postcss.options (instead of postcss.postcssOptions), unless nuxt is 3+.

Workaround
A temporary workaround is to disable the postcssNoPolyfills feature, ex:

webpackOptimisations: {
    debug: true,
    features: {
      // disabled because nuxt-webpack-optimizations does not support postcss8 postcssOptions style config in nuxt2
      postcssNoPolyfills: false,
    },
}

Suggested Fix
Modify src/augmentation/useDisableDevPostcssPresetEnv.ts:16 to use getNuxtVersion instead of isNuxt3 and check for version >= 2.16 or >=3.

[lpj145]

Describe the bug

Running nuxt 2.16 with the nuxt-webpack-optimisations feature postcssNoPolyfills enabled leads to the following blocking error:

ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

To Reproduce Steps to reproduce the behavior:

1. Upgrade a working nuxt 2 w/ nuxt-webpack-optimisations project to use nuxt 2.16.0
2. Run nuxt run dev
3. See error

Reason for the error

Nuxt 2.16.0 upgraded to postcss 8, and changed the postcss options format to the 'postcssOptions' style. See this PR for details, but essentially the change looks like this:

<2.16.0

postcss: {
    plugins: {
      "postcss-import": {},
      "tailwindcss/nesting": {},
      tailwindcss: {},
      autoprefixer: {},
    },
},

2.16.0

postcss: {
    postcssOptions: {
      plugins: {
        "postcss-import": {},
        "tailwindcss/nesting": {},
        tailwindcss: {},
        autoprefixer: {},
      },
    },
},

This causes an error as when the postcssNoPolyfills feature is enabled nuxt-webpack-optimisations modifies postcss.options (instead of postcss.postcssOptions), unless nuxt is 3+.

Workaround A temporary workaround is to disable the postcssNoPolyfills feature, ex:

webpackOptimisations: {
    debug: true,
    features: {
      // disabled because nuxt-webpack-optimizations does not support postcss8 postcssOptions style config in nuxt2
      postcssNoPolyfills: false,
    },
}

Suggested Fix Modify src/augmentation/useDisableDevPostcssPresetEnv.ts:16 to use getNuxtVersion instead of isNuxt3 and check for version >= 2.16 or >=3.

I tried this solution but without this option, it increases 1.4 seconds from our build time, please @harlan-zw do you want any help to fix this?

[harlan-zw]

Hey @cordery

Thanks for the issue and the guidance the fix. I've pushed up v2.2.7 which should fix this.

[cordery]

@harlan-zw The version to check for is 2.16, not 2.6 :)

[harlan-zw]

@harlan-zw The version to check for is 2.16, not 2.6 :)

🤦

[lpj145]

Oh! Thanks @harlan-zw to the fast work :)

[harlan-zw]

hasNuxtCompatibility is handy 👍

const usingNewPostcss = await hasNuxtCompatibility({ nuxt: '^2.16.0' }, nuxt) || isNuxt3(nuxt)

Version 2.2.8 should hopefully include the proper fix

[lpj145]

Hey @harlan-zw I think this solution does not solve the problem at all, going deeper in details I saw this fact: when it is in the nuxt < 2.16 version I have a great improvement in the compile and hrm time, but right now in the 2.16 version and using your last version package we have some segment faults errors and the cli just exit with a GC error, and the time is not improved very well, not it as in the < 2.16 version, did you have some insights about it? the only feature that I miss right now is postcssNoPolyfills.

This screenshot could give some details:

I have around 1200 svg files.

[harlan-zw]

Hey @harlan-zw I think this solution does not solve the problem at all, going deeper in details I saw this fact: when it is in the nuxt < 2.16 version I have a great improvement in the compile and hrm time, but right now in the 2.16 version and using your last version package we have some segment faults errors and the cli just exit with a GC error, and the time is not improved very well, not it as in the < 2.16 version, did you have some insights about it? the only feature that I miss right now is postcssNoPolyfills.

This screenshot could give some details:

I have around 1200 svg files.

Hey, this doesn't seem related to the postcss feature. All this does it stop prefixing in dev.

If you make a new issue with your config I can try be more helpful