fix(@angular/build): resolve PostCSS plugins relative to config file

Previously, PostCSS plugins were resolved from the location of `@angular/build`. This caused issues when the PostCSS configuration file was located in a subdirectory and used plugins not hoisted to the root `node_modules`, as plugins would not be found.

This change updates the PostCSS configuration loading to resolve plugins relative to the directory containing the PostCSS configuration file. This ensures that plugins are correctly located regardless of the configuration files location.

Author: alan-agius4

packages/angular/build/src/tools/esbuild/stylesheets/bundle-options.ts

@@ -31,7 +31,7 @@ export interface BundleStylesheetOptions {
   externalDependencies?: string[];
   target: string[];
   tailwindConfiguration?: { file: string; package: string };
-  postcssConfiguration?: PostcssConfiguration;
+  postcssConfiguration?: { config: PostcssConfiguration; configPath: string };
   publicPath?: string;
   cacheOptions: NormalizedCachedOptions;
 }

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

@@ -9,7 +9,8 @@
 import type { OnLoadResult, Plugin, PluginBuild } from 'esbuild';
 import assert from 'node:assert';
 import { readFile } from 'node:fs/promises';
-import { extname } from 'node:path';
+import { createRequire } from 'node:module';
+import { dirname, extname } from 'node:path';
 import type { Options } from 'sass';
 import { glob } from 'tinyglobby';
 import { assertIsError } from '../../../utils/error';
@@ -69,7 +70,7 @@ export interface StylesheetPluginOptions {
    * initialized and used for every stylesheet. This overrides the tailwind integration
    * and any tailwind usage must be manually configured in the custom postcss usage.
    */
-  postcssConfiguration?: PostcssConfiguration;
+  postcssConfiguration?: { config: PostcssConfiguration; configPath: string };
 
   /**
    * Optional Options for configuring Sass behavior.
@@ -215,14 +216,18 @@ export class StylesheetPluginFactory {
 
     const { options } = this;
     if (options.postcssConfiguration) {
-      const postCssInstanceKey = JSON.stringify(options.postcssConfiguration);
+      const { config, configPath } = options.postcssConfiguration;
+      const postCssInstanceKey = JSON.stringify(config);
       let postcssProcessor = postcssProcessors.get(postCssInstanceKey)?.deref();
 
       if (!postcssProcessor) {
         postcss ??= (await import('postcss')).default;
         postcssProcessor = postcss();
-        for (const [pluginName, pluginOptions] of options.postcssConfiguration.plugins) {
-          const { default: plugin } = await import(pluginName);
+
+        const postCssPluginRequire = createRequire(dirname(configPath) + '/');
+
+        for (const [pluginName, pluginOptions] of config.plugins) {
+          const plugin = postCssPluginRequire(pluginName);
           if (typeof plugin !== 'function' || plugin.postcss !== true) {
             throw new Error(`Attempted to load invalid Postcss plugin: "${pluginName}"`);
           }

packages/angular/build/src/utils/postcss-configuration.ts

@@ -71,9 +71,13 @@ async function readPostcssConfiguration(
   return config;
 }
 
-export async function loadPostcssConfiguration(
-  searchDirectories: SearchDirectory[],
-): Promise<PostcssConfiguration | undefined> {
+export async function loadPostcssConfiguration(searchDirectories: SearchDirectory[]): Promise<
+  | {
+      configPath: string;
+      config: PostcssConfiguration;
+    }
+  | undefined
+> {
   const configPath = findFile(searchDirectories, postcssConfigurationFiles);
   if (!configPath) {
     return undefined;
@@ -101,7 +105,7 @@ export async function loadPostcssConfiguration(
       }
     }
 
-    return config;
+    return { config, configPath };
   }
 
   // Normalize plugin object map form
@@ -119,5 +123,5 @@ export async function loadPostcssConfiguration(
     config.plugins.push([name, options]);
   }
 
-  return config;
+  return { config, configPath };
 }

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

@@ -13,6 +13,7 @@ import {
   loadPostcssConfiguration,
 } from '@angular/build/private';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { createRequire } from 'node:module';
 import * as path from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import type { FileImporter } from 'sass';
@@ -83,9 +84,10 @@ export async function getStylesConfig(wco: WebpackConfigOptions): Promise<Config
   const postcssConfig = await loadPostcssConfiguration(searchDirectories);
 
   if (postcssConfig) {
-    for (const [pluginName, pluginOptions] of postcssConfig.plugins) {
-      const resolvedPlugin = require.resolve(pluginName, { paths: [root] });
-      const { default: plugin } = await import(resolvedPlugin);
+    const postCssPluginRequire = createRequire(path.dirname(postcssConfig.configPath) + '/');
+
+    for (const [pluginName, pluginOptions] of postcssConfig.config.plugins) {
+      const plugin = postCssPluginRequire(pluginName);
       if (typeof plugin !== 'function' || plugin.postcss !== true) {
         throw new Error(`Attempted to load invalid Postcss plugin: "${pluginName}"`);
       }