@angular-devkit/build-angular 17.1.2 → 17.2.0-next.1

package/src/tools/esbuild/angular/compilation/angular-compilation.d.ts

@@ -14,6 +14,13 @@ export interface EmitFileResult {
     contents: string;
     dependencies?: readonly string[];
 }
+export declare enum DiagnosticModes {
+    None = 0,
+    Option = 1,
+    Syntactic = 2,
+    Semantic = 4,
+    All = 7
+}
 export declare abstract class AngularCompilation {
     #private;
     static loadCompilerCli(): Promise<typeof ng>;
@@ -25,8 +32,8 @@ export declare abstract class AngularCompilation {
         referencedFiles: readonly string[];
     }>;
     abstract emitAffectedFiles(): Iterable<EmitFileResult> | Promise<Iterable<EmitFileResult>>;
-    protected abstract collectDiagnostics(): Iterable<ts.Diagnostic> | Promise<Iterable<ts.Diagnostic>>;
-    diagnoseFiles(): Promise<{
+    protected abstract collectDiagnostics(modes: DiagnosticModes): Iterable<ts.Diagnostic> | Promise<Iterable<ts.Diagnostic>>;
+    diagnoseFiles(modes?: DiagnosticModes): Promise<{
         errors?: PartialMessage[];
         warnings?: PartialMessage[];
     }>;

package/src/tools/esbuild/angular/compilation/angular-compilation.js

@@ -30,10 +30,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AngularCompilation = void 0;
+exports.AngularCompilation = exports.DiagnosticModes = void 0;
 const load_esm_1 = require("../../../../utils/load-esm");
 const profiling_1 = require("../../profiling");
 const diagnostics_1 = require("../diagnostics");
+var DiagnosticModes;
+(function (DiagnosticModes) {
+    DiagnosticModes[DiagnosticModes["None"] = 0] = "None";
+    DiagnosticModes[DiagnosticModes["Option"] = 1] = "Option";
+    DiagnosticModes[DiagnosticModes["Syntactic"] = 2] = "Syntactic";
+    DiagnosticModes[DiagnosticModes["Semantic"] = 4] = "Semantic";
+    DiagnosticModes[DiagnosticModes["All"] = 7] = "All";
+})(DiagnosticModes || (exports.DiagnosticModes = DiagnosticModes = {}));
 class AngularCompilation {
     static #angularCompilerCliModule;
     static #typescriptModule;
@@ -64,13 +72,13 @@ class AngularCompilation {
             supportJitMode: false,
         }));
     }
-    async diagnoseFiles() {
+    async diagnoseFiles(modes = DiagnosticModes.All) {
         const result = {};
         // Avoid loading typescript until actually needed.
         // This allows for avoiding the load of typescript in the main thread when using the parallel compilation.
         const typescript = await AngularCompilation.loadTypescript();
         await (0, profiling_1.profileAsync)('NG_DIAGNOSTICS_TOTAL', async () => {
-            for (const diagnostic of await this.collectDiagnostics()) {
+            for (const diagnostic of await this.collectDiagnostics(modes)) {
                 const message = (0, diagnostics_1.convertTypeScriptDiagnostic)(typescript, diagnostic);
                 if (diagnostic.category === typescript.DiagnosticCategory.Error) {
                     (result.errors ??= []).push(message);

package/src/tools/esbuild/angular/compilation/aot-compilation.d.ts

@@ -8,7 +8,7 @@
 import type ng from '@angular/compiler-cli';
 import ts from 'typescript';
 import { AngularHostOptions } from '../angular-host';
-import { AngularCompilation, EmitFileResult } from './angular-compilation';
+import { AngularCompilation, DiagnosticModes, EmitFileResult } from './angular-compilation';
 export declare class AotCompilation extends AngularCompilation {
     #private;
     initialize(tsconfig: string, hostOptions: AngularHostOptions, compilerOptionsTransformer?: (compilerOptions: ng.CompilerOptions) => ng.CompilerOptions): Promise<{
@@ -16,6 +16,6 @@ export declare class AotCompilation extends AngularCompilation {
         compilerOptions: ng.CompilerOptions;
         referencedFiles: readonly string[];
     }>;
-    collectDiagnostics(): Iterable<ts.Diagnostic>;
+    collectDiagnostics(modes: DiagnosticModes): Iterable<ts.Diagnostic>;
     emitAffectedFiles(): Iterable<EmitFileResult>;
 }

package/src/tools/esbuild/angular/compilation/aot-compilation.js

@@ -86,22 +86,33 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
         this.#state = new AngularCompilationState(angularProgram, host, typeScriptProgram, affectedFiles, affectedFiles.size === 1 ? OptimizeFor.SingleFile : OptimizeFor.WholeProgram, (0, web_worker_transformer_1.createWorkerTransformer)(hostOptions.processWebWorker.bind(hostOptions)), this.#state?.diagnosticCache);
         return { affectedFiles, compilerOptions, referencedFiles };
     }
-    *collectDiagnostics() {
+    *collectDiagnostics(modes) {
         (0, node_assert_1.default)(this.#state, 'Angular compilation must be initialized prior to collecting diagnostics.');
         const { affectedFiles, angularCompiler, diagnosticCache, templateDiagnosticsOptimization, typeScriptProgram, } = this.#state;
+        const syntactic = modes & angular_compilation_1.DiagnosticModes.Syntactic;
+        const semantic = modes & angular_compilation_1.DiagnosticModes.Semantic;
         // Collect program level diagnostics
-        yield* typeScriptProgram.getConfigFileParsingDiagnostics();
-        yield* angularCompiler.getOptionDiagnostics();
-        yield* typeScriptProgram.getOptionsDiagnostics();
-        yield* typeScriptProgram.getGlobalDiagnostics();
+        if (modes & angular_compilation_1.DiagnosticModes.Option) {
+            yield* typeScriptProgram.getConfigFileParsingDiagnostics();
+            yield* angularCompiler.getOptionDiagnostics();
+            yield* typeScriptProgram.getOptionsDiagnostics();
+        }
+        if (syntactic) {
+            yield* typeScriptProgram.getGlobalDiagnostics();
+        }
         // Collect source file specific diagnostics
         for (const sourceFile of typeScriptProgram.getSourceFiles()) {
             if (angularCompiler.ignoreForDiagnostics.has(sourceFile)) {
                 continue;
             }
-            // TypeScript will use cached diagnostics for files that have not been
-            // changed or affected for this build when using incremental building.
-            yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SYNTACTIC', () => typeScriptProgram.getSyntacticDiagnostics(sourceFile), true);
+            if (syntactic) {
+                // TypeScript will use cached diagnostics for files that have not been
+                // changed or affected for this build when using incremental building.
+                yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SYNTACTIC', () => typeScriptProgram.getSyntacticDiagnostics(sourceFile), true);
+            }
+            if (!semantic) {
+                continue;
+            }
             yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SEMANTIC', () => typeScriptProgram.getSemanticDiagnostics(sourceFile), true);
             // Declaration files cannot have template diagnostics
             if (sourceFile.isDeclarationFile) {

package/src/tools/esbuild/angular/compilation/index.d.ts

@@ -5,6 +5,6 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-export { AngularCompilation } from './angular-compilation';
+export { AngularCompilation, DiagnosticModes } from './angular-compilation';
 export { createAngularCompilation } from './factory';
 export { NoopCompilation } from './noop-compilation';

package/src/tools/esbuild/angular/compilation/index.js

@@ -7,9 +7,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NoopCompilation = exports.createAngularCompilation = exports.AngularCompilation = void 0;
+exports.NoopCompilation = exports.createAngularCompilation = exports.DiagnosticModes = exports.AngularCompilation = void 0;
 var angular_compilation_1 = require("./angular-compilation");
 Object.defineProperty(exports, "AngularCompilation", { enumerable: true, get: function () { return angular_compilation_1.AngularCompilation; } });
+Object.defineProperty(exports, "DiagnosticModes", { enumerable: true, get: function () { return angular_compilation_1.DiagnosticModes; } });
 var factory_1 = require("./factory");
 Object.defineProperty(exports, "createAngularCompilation", { enumerable: true, get: function () { return factory_1.createAngularCompilation; } });
 var noop_compilation_1 = require("./noop-compilation");

package/src/tools/esbuild/angular/compilation/jit-compilation.d.ts

@@ -8,7 +8,7 @@
 import type ng from '@angular/compiler-cli';
 import ts from 'typescript';
 import { AngularHostOptions } from '../angular-host';
-import { AngularCompilation, EmitFileResult } from './angular-compilation';
+import { AngularCompilation, DiagnosticModes, EmitFileResult } from './angular-compilation';
 export declare class JitCompilation extends AngularCompilation {
     #private;
     initialize(tsconfig: string, hostOptions: AngularHostOptions, compilerOptionsTransformer?: (compilerOptions: ng.CompilerOptions) => ng.CompilerOptions): Promise<{
@@ -16,6 +16,6 @@ export declare class JitCompilation extends AngularCompilation {
         compilerOptions: ng.CompilerOptions;
         referencedFiles: readonly string[];
     }>;
-    collectDiagnostics(): Iterable<ts.Diagnostic>;
+    collectDiagnostics(modes: DiagnosticModes): Iterable<ts.Diagnostic>;
     emitAffectedFiles(): Iterable<EmitFileResult>;
 }

package/src/tools/esbuild/angular/compilation/jit-compilation.js

@@ -51,15 +51,21 @@ class JitCompilation extends angular_compilation_1.AngularCompilation {
             .map((sourceFile) => sourceFile.fileName);
         return { affectedFiles, compilerOptions, referencedFiles };
     }
-    *collectDiagnostics() {
+    *collectDiagnostics(modes) {
         (0, node_assert_1.default)(this.#state, 'Compilation must be initialized prior to collecting diagnostics.');
         const { typeScriptProgram } = this.#state;
         // Collect program level diagnostics
-        yield* typeScriptProgram.getConfigFileParsingDiagnostics();
-        yield* typeScriptProgram.getOptionsDiagnostics();
-        yield* typeScriptProgram.getGlobalDiagnostics();
-        yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SYNTACTIC', () => typeScriptProgram.getSyntacticDiagnostics());
-        yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SEMANTIC', () => typeScriptProgram.getSemanticDiagnostics());
+        if (modes & angular_compilation_1.DiagnosticModes.Option) {
+            yield* typeScriptProgram.getConfigFileParsingDiagnostics();
+            yield* typeScriptProgram.getOptionsDiagnostics();
+        }
+        if (modes & angular_compilation_1.DiagnosticModes.Syntactic) {
+            yield* typeScriptProgram.getGlobalDiagnostics();
+            yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SYNTACTIC', () => typeScriptProgram.getSyntacticDiagnostics());
+        }
+        if (modes & angular_compilation_1.DiagnosticModes.Semantic) {
+            yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SEMANTIC', () => typeScriptProgram.getSemanticDiagnostics());
+        }
     }
     emitAffectedFiles() {
         (0, node_assert_1.default)(this.#state, 'Compilation must be initialized prior to emitting files.');

package/src/tools/esbuild/angular/compilation/parallel-compilation.d.ts

@@ -9,7 +9,7 @@ import type { CompilerOptions } from '@angular/compiler-cli';
 import type { PartialMessage } from 'esbuild';
 import type { SourceFile } from 'typescript';
 import type { AngularHostOptions } from '../angular-host';
-import { AngularCompilation, EmitFileResult } from './angular-compilation';
+import { AngularCompilation, DiagnosticModes, EmitFileResult } from './angular-compilation';
 /**
  * An Angular compilation which uses a Node.js Worker thread to load and execute
  * the TypeScript and Angular compilers. This allows for longer synchronous actions
@@ -32,7 +32,7 @@ export declare class ParallelCompilation extends AngularCompilation {
      * with the serializable esbuild compatible diagnostics.
      */
     protected collectDiagnostics(): never;
-    diagnoseFiles(): Promise<{
+    diagnoseFiles(modes?: DiagnosticModes): Promise<{
         errors?: PartialMessage[];
         warnings?: PartialMessage[];
     }>;

package/src/tools/esbuild/angular/compilation/parallel-compilation.js

@@ -106,8 +106,8 @@ class ParallelCompilation extends angular_compilation_1.AngularCompilation {
     collectDiagnostics() {
         throw new Error('Not implemented in ParallelCompilation.');
     }
-    diagnoseFiles() {
-        return this.#worker.run(undefined, { name: 'diagnose' });
+    diagnoseFiles(modes = angular_compilation_1.DiagnosticModes.All) {
+        return this.#worker.run(modes, { name: 'diagnose' });
     }
     emitAffectedFiles() {
         return this.#worker.run(undefined, { name: 'emit' });

package/src/tools/esbuild/angular/compilation/parallel-worker.d.ts

@@ -10,6 +10,7 @@
 /// <reference types="@types/node/ts4.8/worker_threads" />
 import type { PartialMessage } from 'esbuild';
 import { type MessagePort } from 'node:worker_threads';
+import type { DiagnosticModes } from './angular-compilation';
 export interface InitRequest {
     jit: boolean;
     tsconfig: string;
@@ -26,7 +27,7 @@ export declare function initialize(request: InitRequest): Promise<{
         allowJs: boolean | undefined;
     };
 }>;
-export declare function diagnose(): Promise<{
+export declare function diagnose(modes: DiagnosticModes): Promise<{
     errors?: PartialMessage[];
     warnings?: PartialMessage[];
 }>;

package/src/tools/esbuild/angular/compilation/parallel-worker.js

@@ -72,9 +72,9 @@ async function initialize(request) {
     };
 }
 exports.initialize = initialize;
-async function diagnose() {
+async function diagnose(modes) {
     (0, node_assert_1.default)(compilation);
-    const diagnostics = await compilation.diagnoseFiles();
+    const diagnostics = await compilation.diagnoseFiles(modes);
     return diagnostics;
 }
 exports.diagnose = diagnose;

package/src/tools/esbuild/angular/compiler-plugin.js

@@ -195,13 +195,6 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     hasCompilationErrors = await sharedTSCompilationState.waitUntilReady;
                     return result;
                 }
-                const diagnostics = await compilation.diagnoseFiles();
-                if (diagnostics.errors?.length) {
-                    (result.errors ??= []).push(...diagnostics.errors);
-                }
-                if (diagnostics.warnings?.length) {
-                    (result.warnings ??= []).push(...diagnostics.warnings);
-                }
                 // Update TypeScript file output cache for all affected files
                 try {
                     await (0, profiling_1.profileAsync)('NG_EMIT_TS', async () => {
@@ -222,6 +215,13 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         ],
                     });
                 }
+                const diagnostics = await compilation.diagnoseFiles(environment_options_1.useTypeChecking ? compilation_1.DiagnosticModes.All : compilation_1.DiagnosticModes.All & ~compilation_1.DiagnosticModes.Semantic);
+                if (diagnostics.errors?.length) {
+                    (result.errors ??= []).push(...diagnostics.errors);
+                }
+                if (diagnostics.warnings?.length) {
+                    (result.warnings ??= []).push(...diagnostics.warnings);
+                }
                 // Add errors from failed additional results.
                 // This must be done after emit to capture latest web worker results.
                 for (const { errors } of additionalResults.values()) {

package/src/tools/esbuild/application-code-bundle.js

@@ -230,7 +230,7 @@ function createServerPolyfillBundleOptions(options, target, sourceFileCache) {
 }
 exports.createServerPolyfillBundleOptions = createServerPolyfillBundleOptions;
 function getEsBuildCommonOptions(options) {
-    const { workspaceRoot, outExtension, optimizationOptions, sourcemapOptions, tsconfig, externalDependencies, outputNames, preserveSymlinks, jit, loaderExtensions, } = options;
+    const { workspaceRoot, outExtension, optimizationOptions, sourcemapOptions, tsconfig, externalDependencies, outputNames, preserveSymlinks, jit, loaderExtensions, jsonLogs, } = options;
     // Ensure unique hashes for i18n translation changes when using post-process inlining.
     // This hash value is added as a footer to each file and ensures that the output file names (with hashes)
     // change when translation files have changed. If this is not done the post processed files may have
@@ -250,7 +250,7 @@ function getEsBuildCommonOptions(options) {
         resolveExtensions: ['.ts', '.tsx', '.mjs', '.js'],
         metafile: true,
         legalComments: options.extractLicenses ? 'none' : 'eof',
-        logLevel: options.verbose ? 'debug' : 'silent',
+        logLevel: options.verbose && !jsonLogs ? 'debug' : 'silent',
         minifyIdentifiers: optimizationOptions.scripts && environment_options_1.allowMangle,
         minifySyntax: optimizationOptions.scripts,
         minifyWhitespace: optimizationOptions.scripts,

package/src/tools/esbuild/budget-stats.js

@@ -26,6 +26,11 @@ function generateBudgetStats(metafile, initialFiles) {
         if (!file.endsWith('.js') && !file.endsWith('.css')) {
             continue;
         }
+        // Exclude server bundles
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (entry['ng-platform-server']) {
+            continue;
+        }
         const initialRecord = initialFiles.get(file);
         let name = initialRecord?.name;
         if (name === undefined && entry.entryPoint) {

package/src/tools/esbuild/bundler-context.js

@@ -162,6 +162,12 @@ class BundlerContext {
                 // For non-incremental builds, perform a single build
                 result = await (0, esbuild_1.build)(this.#esbuildOptions);
             }
+            if (this.#esbuildOptions?.platform === 'node') {
+                for (const entry of Object.values(result.metafile.outputs)) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    entry['ng-platform-server'] = true;
+                }
+            }
         }
         catch (failure) {
             // Build failures will throw an exception which contains errors/warnings

package/src/tools/esbuild/bundler-execution-result.d.ts

@@ -33,6 +33,7 @@ export declare class ExecutionResult {
     outputFiles: BuildOutputFile[];
     assetFiles: BuildOutputAsset[];
     errors: (Message | PartialMessage)[];
+    prerenderedRoutes: string[];
     warnings: (Message | PartialMessage)[];
     externalMetadata?: ExternalResultMetadata;
     constructor(rebuildContexts: BundlerContext[], codeBundleCache?: SourceFileCache | undefined);
@@ -40,6 +41,7 @@ export declare class ExecutionResult {
     addAssets(assets: BuildOutputAsset[]): void;
     addError(error: PartialMessage | string): void;
     addErrors(errors: (PartialMessage | string)[]): void;
+    addPrerenderedRoutes(routes: string[]): void;
     addWarning(error: PartialMessage | string): void;
     addWarnings(errors: (PartialMessage | string)[]): void;
     /**

package/src/tools/esbuild/bundler-execution-result.js

@@ -19,6 +19,7 @@ class ExecutionResult {
     outputFiles = [];
     assetFiles = [];
     errors = [];
+    prerenderedRoutes = [];
     warnings = [];
     externalMetadata;
     constructor(rebuildContexts, codeBundleCache) {
@@ -44,6 +45,11 @@ class ExecutionResult {
             this.addError(error);
         }
     }
+    addPrerenderedRoutes(routes) {
+        this.prerenderedRoutes.push(...routes);
+        // Sort the prerendered routes.
+        this.prerenderedRoutes.sort((a, b) => a.localeCompare(b));
+    }
     addWarning(error) {
         if (typeof error === 'string') {
             this.warnings.push({ text: error, location: null });

package/src/tools/esbuild/compiler-plugin-options.js

@@ -9,7 +9,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompilerPluginOptions = void 0;
 function createCompilerPluginOptions(options, target, sourceFileCache) {
-    const { workspaceRoot, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, inlineStyleLanguage, jit, cacheOptions, tailwindConfiguration, publicPath, } = options;
+    const { workspaceRoot, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, inlineStyleLanguage, jit, cacheOptions, tailwindConfiguration, postcssConfiguration, publicPath, } = options;
     return {
         // JS/TS options
         pluginOptions: {
@@ -40,6 +40,7 @@ function createCompilerPluginOptions(options, target, sourceFileCache) {
             inlineStyleLanguage,
             preserveSymlinks,
             tailwindConfiguration,
+            postcssConfiguration,
             cacheOptions,
             publicPath,
         },

package/src/tools/esbuild/global-scripts.js

@@ -49,7 +49,7 @@ const virtual_module_plugin_1 = require("./virtual-module-plugin");
  * @returns An esbuild BuildOptions object.
  */
 function createGlobalScriptsBundleOptions(options, target, initial) {
-    const { globalScripts, optimizationOptions, outputNames, preserveSymlinks, sourcemapOptions, workspaceRoot, } = options;
+    const { globalScripts, optimizationOptions, outputNames, preserveSymlinks, sourcemapOptions, jsonLogs, workspaceRoot, } = options;
     const namespace = 'angular:script/global';
     const entryPoints = {};
     let found = false;
@@ -74,7 +74,7 @@ function createGlobalScriptsBundleOptions(options, target, initial) {
             mainFields: ['script', 'browser', 'main'],
             conditions: ['script'],
             resolveExtensions: ['.mjs', '.js'],
-            logLevel: options.verbose ? 'debug' : 'silent',
+            logLevel: options.verbose && !jsonLogs ? 'debug' : 'silent',
             metafile: true,
             minify: optimizationOptions.scripts,
             outdir: workspaceRoot,
@@ -91,8 +91,7 @@ function createGlobalScriptsBundleOptions(options, target, initial) {
                     // Add the `js` extension here so that esbuild generates an output file with the extension
                     transformPath: (path) => path.slice(namespace.length + 1) + '.js',
                     loadContent: (args, build) => (0, load_result_cache_1.createCachedLoad)(loadCache, async (args) => {
-                        const files = globalScripts.find(({ name }) => name === args.path.slice(0, -3))
-                            ?.files;
+                        const files = globalScripts.find(({ name }) => name === args.path.slice(0, -3))?.files;
                         (0, node_assert_1.default)(files, `Invalid operation: global scripts name not found [${args.path}]`);
                         // Global scripts are concatenated using magic-string instead of bundled via esbuild.
                         const bundleContent = new magic_string_1.Bundle();

package/src/tools/esbuild/global-styles.js

@@ -15,7 +15,7 @@ const node_assert_1 = __importDefault(require("node:assert"));
 const bundle_options_1 = require("./stylesheets/bundle-options");
 const virtual_module_plugin_1 = require("./virtual-module-plugin");
 function createGlobalStylesBundleOptions(options, target, initial) {
-    const { workspaceRoot, optimizationOptions, sourcemapOptions, outputNames, globalStyles, preserveSymlinks, externalDependencies, stylePreprocessorOptions, tailwindConfiguration, cacheOptions, publicPath, } = options;
+    const { workspaceRoot, optimizationOptions, sourcemapOptions, outputNames, globalStyles, preserveSymlinks, externalDependencies, stylePreprocessorOptions, tailwindConfiguration, postcssConfiguration, cacheOptions, publicPath, } = options;
     const namespace = 'angular:styles/global';
     const entryPoints = {};
     let found = false;
@@ -46,6 +46,7 @@ function createGlobalStylesBundleOptions(options, target, initial) {
                 },
             includePaths: stylePreprocessorOptions?.includePaths,
             tailwindConfiguration,
+            postcssConfiguration,
             cacheOptions,
             publicPath,
         }, loadCache);

package/src/tools/esbuild/stylesheets/bundle-options.d.ts

@@ -7,6 +7,7 @@
  */
 import type { BuildOptions } from 'esbuild';
 import { NormalizedCachedOptions } from '../../../utils/normalize-cache';
+import { PostcssConfiguration } from '../../../utils/postcss-configuration';
 import { LoadResultCache } from '../load-result-cache';
 export interface BundleStylesheetOptions {
     workspaceRoot: string;
@@ -25,6 +26,7 @@ export interface BundleStylesheetOptions {
         file: string;
         package: string;
     };
+    postcssConfiguration?: PostcssConfiguration;
     publicPath?: string;
     cacheOptions: NormalizedCachedOptions;
 }

package/src/tools/esbuild/stylesheets/bundle-options.js

@@ -26,6 +26,7 @@ function createStylesheetBundleOptions(options, cache, inlineComponentData) {
         includePaths,
         inlineComponentData,
         tailwindConfiguration: options.tailwindConfiguration,
+        postcssConfiguration: options.postcssConfiguration,
     }, cache);
     const plugins = [
         pluginFactory.create(sass_language_1.SassStylesheetLanguage),

package/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.d.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { OnLoadResult, Plugin, PluginBuild } from 'esbuild';
+import type { PostcssConfiguration } from '../../../utils/postcss-configuration';
 import { LoadResultCache } from '../load-result-cache';
 /**
  * An object containing the plugin options to use when processing stylesheets.
@@ -35,6 +36,12 @@ export interface StylesheetPluginOptions {
         file: string;
         package: string;
     };
+    /**
+     * Optional configuration object for custom postcss usage. If present, postcss will be
+     * 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;
 }
 export interface StylesheetLanguage {
     name: string;

package/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js

@@ -72,7 +72,9 @@ class StylesheetPluginFactory {
     }
     create(language) {
         // Return a noop plugin if no load actions are required
-        if (!language.process && !this.options.tailwindConfiguration) {
+        if (!language.process &&
+            !this.options.postcssConfiguration &&
+            !this.options.tailwindConfiguration) {
             return {
                 name: 'angular-' + language.name,
                 setup() { },
@@ -84,7 +86,23 @@ class StylesheetPluginFactory {
             if (this.postcssProcessor) {
                 return this.postcssProcessor;
             }
-            if (options.tailwindConfiguration) {
+            if (options.postcssConfiguration) {
+                const postCssInstanceKey = JSON.stringify(options.postcssConfiguration);
+                this.postcssProcessor = postcssProcessor.get(postCssInstanceKey)?.deref();
+                if (!this.postcssProcessor) {
+                    postcss ??= (await Promise.resolve().then(() => __importStar(require('postcss')))).default;
+                    this.postcssProcessor = postcss();
+                    for (const [pluginName, pluginOptions] of options.postcssConfiguration.plugins) {
+                        const { default: plugin } = await Promise.resolve(`${pluginName}`).then(s => __importStar(require(s)));
+                        if (typeof plugin !== 'function' || plugin.postcss !== true) {
+                            throw new Error(`Attempted to load invalid Postcss plugin: "${pluginName}"`);
+                        }
+                        this.postcssProcessor.use(plugin(pluginOptions));
+                    }
+                    postcssProcessor.set(postCssInstanceKey, new WeakRef(this.postcssProcessor));
+                }
+            }
+            else if (options.tailwindConfiguration) {
                 const { package: tailwindPackage, file: config } = options.tailwindConfiguration;
                 const postCssInstanceKey = tailwindPackage + ':' + config;
                 this.postcssProcessor = postcssProcessor.get(postCssInstanceKey)?.deref();
@@ -132,14 +150,12 @@ async function processStylesheet(language, data, filename, format, options, buil
             watchFiles: [filename],
         };
     }
-    // Return early if there are no contents to further process
-    if (!result.contents) {
+    // Return early if there are no contents to further process or there are errors
+    if (!result.contents || result.errors?.length) {
         return result;
     }
-    // Only use postcss if Tailwind processing is required.
-    // NOTE: If postcss is used for more than just Tailwind in the future this check MUST
-    // be updated to account for the additional use.
-    if (postcssProcessor && !result.errors?.length && hasTailwindKeywords(result.contents)) {
+    // Only use postcss if Tailwind processing is required or custom postcss is present.
+    if (postcssProcessor && (options.postcssConfiguration || hasTailwindKeywords(result.contents))) {
         const postcssResult = await compileString(typeof result.contents === 'string'
             ? result.contents
             : Buffer.from(result.contents).toString('utf-8'), filename, postcssProcessor, options);

package/src/tools/esbuild/utils.d.ts

@@ -6,19 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { logging } from '@angular-devkit/core';
-import { BuildOptions, Metafile, OutputFile, PartialMessage } from 'esbuild';
-import { NormalizedOutputOptions } from '../../builders/application/options';
+import { BuildOptions, Metafile, OutputFile } from 'esbuild';
+import { NormalizedApplicationBuildOptions, NormalizedOutputOptions } from '../../builders/application/options';
 import { BudgetCalculatorResult } from '../../utils/bundle-calculator';
 import { BuildOutputFile, BuildOutputFileType, InitialFileRecord } from './bundler-context';
-import { BuildOutputAsset } from './bundler-execution-result';
-export declare function logBuildStats(logger: logging.LoggerApi, metafile: Metafile, initial: Map<string, InitialFileRecord>, budgetFailures: BudgetCalculatorResult[] | undefined, changedFiles?: Set<string>, estimatedTransferSizes?: Map<string, number>): void;
+import { BuildOutputAsset, ExecutionResult } from './bundler-execution-result';
+export declare function logBuildStats(metafile: Metafile, initial: Map<string, InitialFileRecord>, budgetFailures: BudgetCalculatorResult[] | undefined, colors: boolean, changedFiles?: Set<string>, estimatedTransferSizes?: Map<string, number>, ssrOutputEnabled?: boolean, verbose?: boolean): string;
 export declare function calculateEstimatedTransferSizes(outputFiles: OutputFile[]): Promise<Map<string, number>>;
 export declare function withSpinner<T>(text: string, action: () => T | Promise<T>): Promise<T>;
 export declare function withNoProgress<T>(text: string, action: () => T | Promise<T>): Promise<T>;
-export declare function logMessages(logger: logging.LoggerApi, { errors, warnings }: {
-    errors?: PartialMessage[];
-    warnings?: PartialMessage[];
-}): Promise<void>;
 /**
  * Generates a syntax feature object map for Angular applications based on a list of targets.
  * A full set of feature names can be found here: https://esbuild.github.io/api/#supported
@@ -41,3 +37,4 @@ export declare function transformSupportedBrowsersToTargets(supportedBrowsers: s
  * @see https://esbuild.github.io/api/#target
  */
 export declare function getSupportedNodeTargets(): string[];
+export declare function logMessages(logger: logging.LoggerApi, executionResult: ExecutionResult, options: NormalizedApplicationBuildOptions): Promise<void>;