fix(@angular/build): support ESM PostCSS plugins

This change updates the PostCSS plugin loader to support plugins distributed as ES modules. This allows modern PostCSS plugins authored in ESM to be used without import errors.

Author: alan-agius4

packages/angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.ts

@@ -227,7 +227,7 @@ export class StylesheetPluginFactory {
         const postCssPluginRequire = createRequire(dirname(configPath) + '/');
 
         for (const [pluginName, pluginOptions] of config.plugins) {
-          const plugin = postCssPluginRequire(pluginName);
+          const { default: plugin } = await import(postCssPluginRequire.resolve(pluginName));
           if (typeof plugin !== 'function' || plugin.postcss !== true) {
             throw new Error(`Attempted to load invalid Postcss plugin: "${pluginName}"`);
           }

packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts

@@ -87,7 +87,7 @@ export async function getStylesConfig(wco: WebpackConfigOptions): Promise<Config
     const postCssPluginRequire = createRequire(path.dirname(postcssConfig.configPath) + '/');
 
     for (const [pluginName, pluginOptions] of postcssConfig.config.plugins) {
-      const plugin = postCssPluginRequire(pluginName);
+      const { default: plugin } = await import(postCssPluginRequire.resolve(pluginName));
       if (typeof plugin !== 'function' || plugin.postcss !== true) {
         throw new Error(`Attempted to load invalid Postcss plugin: "${pluginName}"`);
       }