Upgrade to PostCSS v8 for custom-webpack v11 (and above)

[tdonohue]

During the Angular 11 upgrade (see #1403), it was noted that we were unable to easily upgrade these dependencies

"@angular-builders/custom-webpack": "11.1.1"
"@ngtools/webpack": "11.2.15"

When attempting to upgrade to the v11 release of those webpack dependencies, it created a requirement to upgrade to PostCSS v8 (from v7). Here's the upgrade command that was attempted:

ng update @ngtools/webpack@11 @angular-builders/custom-webpack@11 --force

After running that update command, the dspace-angular codebase no longer builds when running yarn start:

Generating browser application bundles (phase: building)...
Unknown error from PostCSS plugin. Your current PostCSS version is 8.2.15, but postcss-preset-env uses 7.0.39. Perhaps this is the source of the error below.
...
[A large number of PostCSS related errors appear and the build fails]

First, I found a reference to a similar error in angular/angular-cli#20967. That suggested reverting our .browserlistrc file to the default one provided by Angular 11. This seemed to solve a few of the PostCSS errors, but not all of them.

So, I attempted to then upgrade to PostCSS v8 compatibility in all our PostCSS related dependencies:

ng update postcss-cli@8 postcss-preset-env@7 postcss-loader@4 css-loader@4 cssnano@5 postcss-import@12

(Note: postcss-import@12 was used instead of @13 because with v13 I hit a different "PostCSS plugin postcss-import requires PostCSS 8" error, and the fix is to revert to v12: postcss/postcss-import#435 (comment))

Upgrading everything to PostCSS v8 fixed some PostCSS errors in the previous build, but results in different odd build errors (again when running yarn start) like:

Error: ./src/main.browser.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: The AngularCompilerPlugin was not found. The @ngtools/webpack loader requires the plugin.
    at Object.ngcLoader (C:\programming\dspace-angular\node_modules\@ngtools\webpack\src\loader.js:29:15)
 @ multi ./src/main.browser.ts main[0]

In the end, I was unable to determine (in a reasonable amount of time) the source of the AngularCompilerPlugin error. Hopefully someone else will be able to determine how to complete a successful PostCSS v8 upgrade, based on these notes.

[tdonohue]

@atarix83 , @artlowel and @wwelling : This ticket now includes my detailed notes of how I attempted to upgrade us to PostCSS v8 (and custom-webpack v11) during the Angular 11 upgrade. I'm hoping that one of you might have time to glance at this in more detail during the 7.2 development (even if it's after most other dev work wraps up). It seemed like I was most of the way to a successful PostCSS upgrade. but I never managed to get a successful build using yarn start.

In any case, let me know if any of you have ideas on this, or find time to complete this task!

[tdonohue]

Adding an estimate of zero hours to this ticket as it's included as part of the estimate for #1432