@angular-devkit/build-angular 17.1.0-next.2 → 17.1.0-next.3

package/src/builders/dev-server/vite-server.js

@@ -51,7 +51,6 @@ const supported_browsers_1 = require("../../utils/supported-browsers");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const application_1 = require("../application");
 const browser_esbuild_1 = require("../browser-esbuild");
-const load_proxy_config_1 = require("./load-proxy-config");
 // eslint-disable-next-line max-lines-per-function
 async function* serveWithVite(serverOptions, builderName, context, transformers, extensions) {
     // Get the browser configuration from the target name.
@@ -122,14 +121,10 @@ async function* serveWithVite(serverOptions, builderName, context, transformers,
         deferred?.();
     });
     const build = builderName === '@angular-devkit/build-angular:browser-esbuild'
-        ? browser_esbuild_1.buildEsbuildBrowser
-        : application_1.buildApplicationInternal;
+        ? browser_esbuild_1.buildEsbuildBrowser.bind(undefined, browserOptions, context, { write: false }, extensions?.buildPlugins)
+        : application_1.buildApplicationInternal.bind(undefined, browserOptions, context, { write: false }, { codePlugins: extensions?.buildPlugins });
     // TODO: Switch this to an architect schedule call when infrastructure settings are supported
-    for await (const result of build(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    browserOptions, context, {
-        write: false,
-    }, extensions?.buildPlugins)) {
+    for await (const result of build()) {
         (0, node_assert_1.default)(result.outputFiles, 'Builder did not provide result files.');
         // If build failed, nothing to serve
         if (!result.success) {
@@ -331,7 +326,7 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
 }
 // eslint-disable-next-line max-lines-per-function
 async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssr, prebundleTransformer, target, prebundleLoaderExtensions, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
-    const proxy = await (0, load_proxy_config_1.loadProxyConfiguration)(serverOptions.workspaceRoot, serverOptions.proxyConfig, true);
+    const proxy = await (0, utils_2.loadProxyConfiguration)(serverOptions.workspaceRoot, serverOptions.proxyConfig, true);
     // dynamically import Vite for ESM compatibility
     const { normalizePath } = await (0, load_esm_1.loadEsmModule)('vite');
     // Path will not exist on disk and only used to provide separate path for Vite requests
@@ -532,11 +527,9 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                                 return;
                             }
                             transformIndexHtmlAndAddHeaders(url, rawHtml, res, next, async (html) => {
-                                const protocol = serverOptions.ssl ? 'https' : 'http';
-                                const route = `${protocol}://${req.headers.host}${req.originalUrl}`;
                                 const { content } = await (0, render_page_1.renderPage)({
                                     document: html,
-                                    route,
+                                    route: new URL(req.originalUrl ?? '/', server.resolvedUrls?.local[0]).toString(),
                                     serverContext: 'ssr',
                                     loadBundle: (uri) => 
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/builders/ssr-dev-server/index.js

@@ -36,8 +36,8 @@ const core_1 = require("@angular-devkit/core");
 const path_1 = require("path");
 const rxjs_1 = require("rxjs");
 const url = __importStar(require("url"));
-const error_1 = require("../../utils/error");
-const utils_1 = require("./utils");
+const utils_1 = require("../../utils");
+const utils_2 = require("./utils");
 /** Log messages to ignore and not rely to the logger */
 const IGNORED_STDOUT_MESSAGES = [
     'server listening on',
@@ -78,7 +78,7 @@ function execute(options, context) {
   DON'T USE IT FOR PRODUCTION!
   ****************************************************************************************
  `);
-    return (0, rxjs_1.zip)(browserTargetRun, serverTargetRun, (0, utils_1.getAvailablePort)()).pipe((0, rxjs_1.switchMap)(([br, sr, nodeServerPort]) => {
+    return (0, rxjs_1.zip)(browserTargetRun, serverTargetRun, (0, utils_2.getAvailablePort)()).pipe((0, rxjs_1.switchMap)(([br, sr, nodeServerPort]) => {
         return (0, rxjs_1.combineLatest)([br.output, sr.output]).pipe(
         // This is needed so that if both server and browser emit close to each other
         // we only emit once. This typically happens on the first build.
@@ -101,7 +101,7 @@ function execute(options, context) {
                 context.logger.info('\nCompiled successfully.');
             }
         }), (0, rxjs_1.debounce)(([builderOutput]) => builderOutput.success && !options.inspect
-            ? (0, utils_1.waitUntilServerIsListening)(nodeServerPort)
+            ? (0, utils_2.waitUntilServerIsListening)(nodeServerPort)
             : rxjs_1.EMPTY), (0, rxjs_1.finalize)(() => {
             void br.stop();
             void sr.stop();
@@ -162,7 +162,7 @@ function startNodeServer(serverOutput, port, logger, inspectMode = false) {
         args.unshift('--inspect-brk');
     }
     return (0, rxjs_1.of)(null).pipe((0, rxjs_1.delay)(0), // Avoid EADDRINUSE error since it will cause the kill event to be finish.
-    (0, rxjs_1.switchMap)(() => (0, utils_1.spawnAsObservable)('node', args, { env, shell: true })), (0, rxjs_1.tap)((res) => log({ stderr: res.stderr, stdout: res.stdout }, logger)), (0, rxjs_1.ignoreElements)(), 
+    (0, rxjs_1.switchMap)(() => (0, utils_2.spawnAsObservable)('node', args, { env, shell: true })), (0, rxjs_1.tap)((res) => log({ stderr: res.stderr, stdout: res.stdout }, logger)), (0, rxjs_1.ignoreElements)(), 
     // Emit a signal after the process has been started
     (0, rxjs_1.startWith)(undefined));
 }
@@ -171,7 +171,7 @@ async function initBrowserSync(browserSyncInstance, nodeServerPort, options, con
         return browserSyncInstance;
     }
     const { port: browserSyncPort, open, host, publicHost, proxyConfig } = options;
-    const bsPort = browserSyncPort || (await (0, utils_1.getAvailablePort)());
+    const bsPort = browserSyncPort || (await (0, utils_2.getAvailablePort)());
     const bsOptions = {
         proxy: {
             target: `localhost:${nodeServerPort}`,
@@ -283,33 +283,19 @@ function getSslConfig(root, options) {
     return ssl;
 }
 async function getProxyConfig(root, proxyConfig) {
-    const proxyPath = (0, path_1.resolve)(root, proxyConfig);
-    let proxySettings;
-    try {
-        proxySettings = require(proxyPath);
-    }
-    catch (error) {
-        (0, error_1.assertIsError)(error);
-        if (error.code === 'MODULE_NOT_FOUND') {
-            throw new Error(`Proxy config file ${proxyPath} does not exist.`);
-        }
-        throw error;
-    }
-    const proxies = Array.isArray(proxySettings) ? proxySettings : [proxySettings];
+    const proxy = await (0, utils_1.loadProxyConfiguration)(root, proxyConfig, false);
     const createdProxies = [];
     const { createProxyMiddleware } = await Promise.resolve().then(() => __importStar(require('http-proxy-middleware')));
-    for (const proxy of proxies) {
-        for (const [key, context] of Object.entries(proxy)) {
-            if (typeof key === 'string') {
-                createdProxies.push(createProxyMiddleware(key.replace(/^\*$/, '**').replace(/\/\*$/, ''), 
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                context));
-            }
-            else {
-                createdProxies.push(
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                createProxyMiddleware(key, context));
-            }
+    for (const [key, context] of Object.entries(proxy)) {
+        if (typeof key === 'string') {
+            createdProxies.push(createProxyMiddleware(key.replace(/^\*$/, '**').replace(/\/\*$/, ''), 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            context));
+        }
+        else {
+            createdProxies.push(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            createProxyMiddleware(key, context));
         }
     }
     return createdProxies;

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

@@ -46,7 +46,7 @@ function createAngularCompilerHost(compilerOptions, hostOptions) {
             return null;
         }
         const result = await hostOptions.transformStylesheet(data, context.containingFile, context.resourceFile ?? undefined);
-        return result ? { content: result } : null;
+        return typeof result === 'string' ? { content: result } : null;
     };
     // Allow the AOT compiler to request the set of changed templates and styles
     host.getModifiedResourceFiles = function () {

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

@@ -35,7 +35,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompilerPlugin = void 0;
 const node_assert_1 = __importDefault(require("node:assert"));
-const node_fs_1 = require("node:fs");
 const path = __importStar(require("node:path"));
 const environment_options_1 = require("../../../utils/environment-options");
 const javascript_transformer_1 = require("../javascript-transformer");
@@ -54,18 +53,6 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
         async setup(build) {
             let setupWarnings = [];
             const preserveSymlinks = build.initialOptions.preserveSymlinks;
-            let tsconfigPath = pluginOptions.tsconfig;
-            if (!preserveSymlinks) {
-                // Use the real path of the tsconfig if not preserving symlinks.
-                // This ensures the TS source file paths are based on the real path of the configuration.
-                // NOTE: promises.realpath should not be used here since it uses realpath.native which
-                // can cause case conversion and other undesirable behavior on Windows systems.
-                // ref: https://github.com/nodejs/node/issues/7726
-                try {
-                    tsconfigPath = (0, node_fs_1.realpathSync)(tsconfigPath);
-                }
-                catch { }
-            }
             // Initialize a worker pool for JavaScript transformations
             const javascriptTransformer = new javascript_transformer_1.JavaScriptTransformer(pluginOptions, environment_options_1.maxWorkers);
             // Setup defines based on the values used by the Angular compiler-cli
@@ -132,14 +119,14 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         else {
                             stylesheetResult = await stylesheetBundler.bundleInline(data, containingFile, styleOptions.inlineStyleLanguage);
                         }
-                        const { contents, resourceFiles, referencedFiles, errors, warnings } = stylesheetResult;
+                        const { contents, outputFiles, metafile, referencedFiles, errors, warnings } = stylesheetResult;
                         if (errors) {
                             (result.errors ??= []).push(...errors);
                         }
                         (result.warnings ??= []).push(...warnings);
                         additionalResults.set(stylesheetFile ?? containingFile, {
-                            outputFiles: resourceFiles,
-                            metafile: stylesheetResult.metafile,
+                            outputFiles,
+                            metafile,
                         });
                         if (referencedFiles) {
                             referencedFileTracker.add(containingFile, referencedFiles);
@@ -185,7 +172,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 // In watch mode, previous build state will be reused.
                 let referencedFiles;
                 try {
-                    const initializationResult = await compilation.initialize(tsconfigPath, hostOptions, createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks));
+                    const initializationResult = await compilation.initialize(pluginOptions.tsconfig, hostOptions, createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks));
                     shouldTsIgnoreJs = !initializationResult.compilerOptions.allowJs;
                     referencedFiles = initializationResult.referencedFiles;
                 }
@@ -401,22 +388,19 @@ function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserve
 function bundleWebWorker(build, pluginOptions, workerFile) {
     try {
         return build.esbuild.buildSync({
+            ...build.initialOptions,
             platform: 'browser',
             write: false,
             bundle: true,
             metafile: true,
             format: 'esm',
-            mainFields: ['es2020', 'es2015', 'browser', 'module', 'main'],
-            logLevel: 'silent',
-            sourcemap: pluginOptions.sourcemap,
             entryNames: 'worker-[hash]',
             entryPoints: [workerFile],
-            absWorkingDir: build.initialOptions.absWorkingDir,
-            outdir: build.initialOptions.outdir,
-            minifyIdentifiers: build.initialOptions.minifyIdentifiers,
-            minifySyntax: build.initialOptions.minifySyntax,
-            minifyWhitespace: build.initialOptions.minifyWhitespace,
-            target: build.initialOptions.target,
+            sourcemap: pluginOptions.sourcemap,
+            // Zone.js is not used in Web workers so no need to disable
+            supported: undefined,
+            // Plugins are not supported in sync esbuild calls
+            plugins: undefined,
         });
     }
     catch (error) {

package/src/tools/esbuild/angular/component-stylesheets.d.ts

@@ -26,9 +26,7 @@ export declare class ComponentStylesheetBundler {
         errors: import("esbuild").Message[] | undefined;
         warnings: import("esbuild").Message[];
         contents: string;
-        map: string | undefined;
-        path: string | undefined;
-        resourceFiles: OutputFile[];
+        outputFiles: OutputFile[];
         metafile: import("esbuild").Metafile | undefined;
         referencedFiles: Set<string> | undefined;
     }>;
@@ -36,12 +34,11 @@ export declare class ComponentStylesheetBundler {
         errors: import("esbuild").Message[] | undefined;
         warnings: import("esbuild").Message[];
         contents: string;
-        map: string | undefined;
-        path: string | undefined;
-        resourceFiles: OutputFile[];
+        outputFiles: OutputFile[];
         metafile: import("esbuild").Metafile | undefined;
         referencedFiles: Set<string> | undefined;
     }>;
     invalidate(files: Iterable<string>): void;
     dispose(): Promise<void>;
+    private extractResult;
 }

package/src/tools/esbuild/angular/component-stylesheets.js

@@ -52,7 +52,7 @@ class ComponentStylesheetBundler {
                 return buildOptions;
             });
         });
-        return extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles);
+        return this.extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles);
     }
     async bundleInline(data, filename, language) {
         // Use a hash of the inline stylesheet content to ensure a consistent identifier. External stylesheets will resolve
@@ -92,7 +92,7 @@ class ComponentStylesheetBundler {
             });
         });
         // Extract the result of the bundling from the output files
-        return extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles);
+        return this.extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles);
     }
     invalidate(files) {
         if (!this.incremental) {
@@ -112,51 +112,46 @@ class ComponentStylesheetBundler {
         this.#inlineContexts.clear();
         await Promise.allSettled(contexts.map((context) => context.dispose()));
     }
-}
-exports.ComponentStylesheetBundler = ComponentStylesheetBundler;
-function extractResult(result, referencedFiles) {
-    let contents = '';
-    let map;
-    let outputPath;
-    const resourceFiles = [];
-    if (!result.errors) {
-        for (const outputFile of result.outputFiles) {
-            const filename = node_path_1.default.basename(outputFile.path);
-            if (outputFile.type === bundler_context_1.BuildOutputFileType.Media) {
-                // The output files could also contain resources (images/fonts/etc.) that were referenced
-                resourceFiles.push(outputFile);
-            }
-            else if (filename.endsWith('.css')) {
-                outputPath = outputFile.path;
-                contents = outputFile.text;
-            }
-            else if (filename.endsWith('.css.map')) {
-                map = outputFile.text;
-            }
-            else {
-                throw new Error(`Unexpected non CSS/Media file "${filename}" outputted during component stylesheet processing.`);
+    extractResult(result, referencedFiles) {
+        let contents = '';
+        let metafile;
+        const outputFiles = [];
+        if (!result.errors) {
+            for (const outputFile of result.outputFiles) {
+                const filename = node_path_1.default.basename(outputFile.path);
+                // Needed for Bazel as otherwise the files will not be written in the correct place.
+                outputFile.path = node_path_1.default.join(this.options.workspaceRoot, outputFile.path);
+                if (outputFile.type === bundler_context_1.BuildOutputFileType.Media) {
+                    // The output files could also contain resources (images/fonts/etc.) that were referenced
+                    outputFiles.push(outputFile);
+                }
+                else if (filename.endsWith('.css')) {
+                    contents = outputFile.text;
+                }
+                else if (filename.endsWith('.css.map')) {
+                    outputFiles.push(outputFile);
+                }
+                else {
+                    throw new Error(`Unexpected non CSS/Media file "${filename}" outputted during component stylesheet processing.`);
+                }
             }
+            metafile = result.metafile;
+            // Remove entryPoint fields from outputs to prevent the internal component styles from being
+            // treated as initial files. Also mark the entry as a component resource for stat reporting.
+            Object.values(metafile.outputs).forEach((output) => {
+                delete output.entryPoint;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                output['ng-component'] = true;
+            });
         }
+        return {
+            errors: result.errors,
+            warnings: result.warnings,
+            contents,
+            outputFiles,
+            metafile,
+            referencedFiles,
+        };
     }
-    let metafile;
-    if (!result.errors) {
-        metafile = result.metafile;
-        // Remove entryPoint fields from outputs to prevent the internal component styles from being
-        // treated as initial files. Also mark the entry as a component resource for stat reporting.
-        Object.values(metafile.outputs).forEach((output) => {
-            delete output.entryPoint;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            output['ng-component'] = true;
-        });
-    }
-    return {
-        errors: result.errors,
-        warnings: result.warnings,
-        contents,
-        map,
-        path: outputPath,
-        resourceFiles,
-        metafile,
-        referencedFiles,
-    };
 }
+exports.ComponentStylesheetBundler = ComponentStylesheetBundler;

package/src/tools/esbuild/angular/jit-plugin-callbacks.js

@@ -92,8 +92,8 @@ function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles
         else {
             stylesheetResult = await stylesheetBundler.bundleInline(entry.contents, entry.path, inlineStyleLanguage);
         }
-        const { contents, resourceFiles, errors, warnings, metafile, referencedFiles } = stylesheetResult;
-        additionalResultFiles.set(entry.path, { outputFiles: resourceFiles, metafile });
+        const { contents, outputFiles, errors, warnings, metafile, referencedFiles } = stylesheetResult;
+        additionalResultFiles.set(entry.path, { outputFiles, metafile });
         return {
             errors,
             warnings,

package/src/tools/esbuild/bundler-context.d.ts

@@ -20,6 +20,7 @@ export type BundleContextResult = {
         server?: Set<string>;
         browser?: Set<string>;
     };
+    externalConfiguration?: string[];
 };
 export interface InitialFileRecord {
     entrypoint: boolean;
@@ -35,7 +36,6 @@ export declare enum BuildOutputFileType {
 }
 export interface BuildOutputFile extends OutputFile {
     type: BuildOutputFileType;
-    fullOutputPath: string;
     clone: () => BuildOutputFile;
 }
 export type BundlerOptionsFactory<T extends BuildOptions = BuildOptions> = (loadCache: LoadResultCache | undefined) => T;

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

@@ -6,9 +6,13 @@
  * 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
  */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BundlerContext = exports.BuildOutputFileType = void 0;
 const esbuild_1 = require("esbuild");
+const node_assert_1 = __importDefault(require("node:assert"));
 const node_path_1 = require("node:path");
 const load_result_cache_1 = require("./load-result-cache");
 const utils_1 = require("./utils");
@@ -71,6 +75,7 @@ class BundlerContext {
         const externalImportsBrowser = new Set();
         const externalImportsServer = new Set();
         const outputFiles = [];
+        let externalConfiguration;
         for (const result of individualResults) {
             warnings.push(...result.warnings);
             if (result.errors) {
@@ -87,6 +92,12 @@ class BundlerContext {
             outputFiles.push(...result.outputFiles);
             result.externalImports.browser?.forEach((value) => externalImportsBrowser.add(value));
             result.externalImports.server?.forEach((value) => externalImportsServer.add(value));
+            if (result.externalConfiguration) {
+                externalConfiguration ??= new Set();
+                for (const value of result.externalConfiguration) {
+                    externalConfiguration.add(value);
+                }
+            }
         }
         if (errors !== undefined) {
             return { errors, warnings };
@@ -101,6 +112,7 @@ class BundlerContext {
                 browser: externalImportsBrowser,
                 server: externalImportsServer,
             },
+            externalConfiguration: externalConfiguration ? [...externalConfiguration] : undefined,
         };
     }
     /**
@@ -250,10 +262,13 @@ class BundlerContext {
                 externalImports.add(importData.path);
             }
         }
-        const platformIsServer = this.#esbuildOptions?.platform === 'node';
+        (0, node_assert_1.default)(this.#esbuildOptions, 'esbuild options cannot be undefined.');
+        const { platform, assetNames = '' } = this.#esbuildOptions;
+        const platformIsServer = platform === 'node';
+        const mediaDirname = (0, node_path_1.dirname)(assetNames);
         const outputFiles = result.outputFiles.map((file) => {
             let fileType;
-            if ((0, node_path_1.dirname)(file.path) === 'media') {
+            if ((0, node_path_1.dirname)(file.path) === mediaDirname) {
                 fileType = BuildOutputFileType.Media;
             }
             else {
@@ -269,6 +284,7 @@ class BundlerContext {
             externalImports: {
                 [platformIsServer ? 'server' : 'browser']: externalImports,
             },
+            externalConfiguration: this.#esbuildOptions.external,
             errors: undefined,
         };
     }

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

@@ -32,7 +32,7 @@ function createCompilerPluginOptions(options, target, sourceFileCache) {
             // Hidden component stylesheet sourcemaps are inaccessible which is effectively
             // the same as being disabled. Disabling has the advantage of avoiding the overhead
             // of sourcemap processing.
-            !!sourcemapOptions.styles && (sourcemapOptions.hidden ? false : 'inline'),
+            sourcemapOptions.styles && !sourcemapOptions.hidden ? 'linked' : false,
             outputNames,
             includePaths: stylePreprocessorOptions?.includePaths,
             externalDependencies,

package/src/tools/esbuild/index-html-generator.js

@@ -45,7 +45,7 @@ async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang)
     const hints = [];
     const { indexHtmlOptions, externalPackages, optimizationOptions, crossOrigin, subresourceIntegrity, baseHref, } = buildOptions;
     (0, node_assert_1.default)(indexHtmlOptions, 'indexHtmlOptions cannot be undefined.');
-    if (!externalPackages) {
+    if (!externalPackages && indexHtmlOptions.preloadInitial) {
         for (const [key, value] of initialFiles) {
             if (value.entrypoint) {
                 // Entry points are already referenced in the HTML
@@ -87,6 +87,7 @@ async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang)
         },
         crossOrigin: crossOrigin,
         deployUrl: buildOptions.publicPath,
+        postTransform: indexHtmlOptions.transformer,
     });
     indexHtmlGenerator.readAsset = readAsset;
     const transformResult = await indexHtmlGenerator.process({
@@ -110,6 +111,7 @@ async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang)
     const { InlineCriticalCssProcessor } = await Promise.resolve().then(() => __importStar(require('../../utils/index-file/inline-critical-css')));
     const inlineCriticalCssProcessor = new InlineCriticalCssProcessor({
         minify: false, // CSS has already been minified during the build.
+        deployUrl: buildOptions.publicPath,
         readAsset,
     });
     const { content, errors, warnings } = await inlineCriticalCssProcessor.process(contentWithoutCriticalCssInlined, {

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

@@ -13,7 +13,7 @@ export interface BundleStylesheetOptions {
     optimization: boolean;
     inlineFonts: boolean;
     preserveSymlinks?: boolean;
-    sourcemap: boolean | 'external' | 'inline';
+    sourcemap: boolean | 'external' | 'inline' | 'linked';
     outputNames: {
         bundles: string;
         media: string;

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

@@ -49,7 +49,15 @@ let postcss;
  *
  * Based on https://tailwindcss.com/docs/functions-and-directives
  */
-const TAILWIND_KEYWORDS = ['@tailwind', '@layer', '@apply', '@config', 'theme(', 'screen('];
+const TAILWIND_KEYWORDS = [
+    '@tailwind',
+    '@layer',
+    '@apply',
+    '@config',
+    'theme(',
+    'screen(',
+    '@screen', // Undocumented in version 3, see: https://github.com/tailwindlabs/tailwindcss/discussions/7516.
+];
 /**
  * Cached postcss instances that can be re-used between various StylesheetPluginFactory instances.
  */

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

@@ -7,6 +7,7 @@
  */
 import { BuilderContext } from '@angular-devkit/architect';
 import { BuildOptions, Metafile, OutputFile, PartialMessage } from 'esbuild';
+import { NormalizedOutputOptions } from '../../builders/application/options';
 import { BudgetCalculatorResult } from '../../utils/bundle-calculator';
 import { BuildOutputFile, BuildOutputFileType, InitialFileRecord } from './bundler-context';
 import { BuildOutputAsset } from './bundler-execution-result';
@@ -25,12 +26,11 @@ export declare function logMessages(context: BuilderContext, { errors, warnings
  * @returns An object that can be used with the esbuild build `supported` option.
  */
 export declare function getFeatureSupport(target: string[]): BuildOptions['supported'];
-export declare function writeResultFiles(outputFiles: BuildOutputFile[], assetFiles: BuildOutputAsset[] | undefined, outputPath: string): Promise<void>;
+export declare function writeResultFiles(outputFiles: BuildOutputFile[], assetFiles: BuildOutputAsset[] | undefined, { base, browser, media, server }: NormalizedOutputOptions): Promise<void>;
 export declare function emitFilesToDisk<T = BuildOutputAsset | BuildOutputFile>(files: T[], writeFileCallback: (file: T) => Promise<void>): Promise<void>;
 export declare function createOutputFileFromText(path: string, text: string, type: BuildOutputFileType): BuildOutputFile;
 export declare function createOutputFileFromData(path: string, data: Uint8Array, type: BuildOutputFileType): BuildOutputFile;
 export declare function convertOutputFile(file: OutputFile, type: BuildOutputFileType): BuildOutputFile;
-export declare function getFullOutputPath(file: BuildOutputFile): string;
 /**
  * Transform browserlists result to esbuild target.
  * @see https://esbuild.github.io/api/#target