feat(postcss): upgrade to postcss v8

[clarkdo]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

NOTE: Do not merge until csstools/postcss-preset-env#191 is closed.

• Update postcss to v8
• Update postcss-loader to latest
• Update css-loader to v5

NOTE: postcss-loader has moved PostCSS (plugins/syntax/parser/stringifier) options to the postcssOptions option, so build.postcss in nuxt.config.js will be used to set postcssOptions which is plugins/preset...

Checklist:

• postcss-preset-env is not fully supported postcss v8 Support PostCSS 8 csstools/postcss-preset-env#191
• update nuxt doc to refer https://github.com/webpack-contrib/postcss-loader#postcssoptions
• Update cssnano (chore(deps): update dependency cssnano to v5 #9140)
• Update optimize-css-assets-webpack-plugin (chore(deps): update dependency optimize-css-assets-webpack-plugin to v6 #9300)

[codecov-io]

Codecov Report

Merging #8408 (7d8ec8b) into dev (3435981) will increase coverage by 0.04%.
The diff coverage is 88.46%.

@@            Coverage Diff             @@
##              dev    #8408      +/-   ##
==========================================
+ Coverage   68.06%   68.10%   +0.04%     
==========================================
  Files          91       91              
  Lines        3911     3916       +5     
  Branches     1068     1068              
==========================================
+ Hits         2662     2667       +5     
  Misses       1012     1012              
  Partials      237      237              

Flag	Coverage Δ
unittests	68.10% <88.46%> (+0.04%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
packages/webpack/src/utils/postcss.js	84.44% <88.46%> (+0.91%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3435981...7d8ec8b. Read the comment docs.

[ai]

It is also important to move postcss to peerDependencies to avoid Nuxt.js PostCSS 9 migration delay in the future.

[pi0]

Hi @ai. I'm afraid this is not possible for nuxt@2 at least since it requires end-users to specify package in dependencies (even though latest npm installs them by default). And in case of breaking changes with v9 and hosting by 3rd party packages, users need to manually install either v8 or v9.

Nuxt upgrade for postcss was mostly delayed because of dropping node@8 and postcss-preset-env support.

Alternatively, what do you think resolving postcss from rootDir with higher priority or allow an option to specify resolved version?

[ai]

Nuxt upgrade for postcss was mostly delayed because of dropping node@8 and postcss-preset-env support.

Next PostCSS will have Node.js version changes as well 😅 (Node.js 10 will be deprecated next year).

Alternatively, what do you think resolving postcss from rootDir with higher priority or allow an option to specify resolved version?

Am I right that users can add their own plugins to Nuxt.js (for instance, Tailwind CSS)? In this case, they will have a warning about missing postcss peer dependency.

But I like the idea of having built-in default postcss in Nuxt.js with an option to replace postcss in the project. It looks like a very good DX.

[pi0]

Next PostCSS will have Node.js version changes as well 😅 (Node.js 10 will be deprecated next year).

Thanks for heads up. Totally makes sense not supporting Node.js 10. From next minor release we start warning to use supported versions (12, 14+) and eventually drop 10 as well (10 is only supported by engine field as long as core-deps allow)

Am I right that users can add their own plugins to Nuxt.js (for instance, Tailwind CSS)? In this case, they will have a warning about missing postcss peer dependency.

Indeed. With having an option, modules like tailwind can enforce a specific version of postcss.

[andorfermichael]

I hope this will come soon as it will enable usage of latest versions of many other packages.

[andorfermichael]

@pi0 when do you plan to move on with this? :)

[pi0]

@andorfermichael This PR is pending for csstools/postcss-preset-env#191 (comment) as it is also installed by default. We might release 2.15 without this PR but with improved resolveLoader (#83) we can pick dependencies from root to allow overriding postcss version.

[clarkdo]

I’ll make a pr covering it

[clarkdo]

This pr will be done in #9671