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

alan-agius4 · alan-agius4 · commit 907eabdd3c74 · 2025-09-19T16:38:01.000+02:00
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.
diff --git a/packages/angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.ts b/packages/angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.ts
@@ -225,9 +225,9 @@ export class StylesheetPluginFactory {
         postcssProcessor = postcss();
 
         const postCssPluginRequire = createRequire(dirname(configPath) + '/');
-
         for (const [pluginName, pluginOptions] of config.plugins) {
-          const plugin = postCssPluginRequire(pluginName);
+          const pluginMod = postCssPluginRequire(pluginName);
+          const plugin = pluginMod.__esModule ? pluginMod['default'] : pluginMod;
           if (typeof plugin !== 'function' || plugin.postcss !== true) {
             throw new Error(`Attempted to load invalid Postcss plugin: "${pluginName}"`);
           }
diff --git a/packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts b/packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts
@@ -87,7 +87,8 @@ 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 pluginMod = postCssPluginRequire(pluginName);
+      const plugin = pluginMod.__esModule ? pluginMod['default'] : pluginMod;
       if (typeof plugin !== 'function' || plugin.postcss !== true) {
         throw new Error(`Attempted to load invalid Postcss plugin: "${pluginName}"`);
       }

Original file line number	Diff line number	Diff line change
`@@ -87,7 +87,8 @@ export async function getStylesConfig(wco: WebpackConfigOptions): Promise<Config`
`87`	`87`	`const postCssPluginRequire = createRequire(path.dirname(postcssConfig.configPath) + '/');`
`88`	`88`
`89`	`89`	`for (const [pluginName, pluginOptions] of postcssConfig.config.plugins) {`
`90`		`- const plugin = postCssPluginRequire(pluginName);`
	`90`	`+ const pluginMod = postCssPluginRequire(pluginName);`
	`91`	`+ const plugin = pluginMod.__esModule ? pluginMod['default'] : pluginMod;`
`91`	`92`	`if (typeof plugin !== 'function' \|\| plugin.postcss !== true) {`
`92`	`93`	throw new Error(`Attempted to load invalid Postcss plugin: "${pluginName}"`);
`93`	`94`	`}`