@angular/build 18.0.0-next.3

package/src/tools/esbuild/load-result-cache.js

@@ -0,0 +1,75 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MemoryLoadResultCache = exports.createCachedLoad = void 0;
+const node_path_1 = require("node:path");
+function createCachedLoad(cache, callback) {
+    if (cache === undefined) {
+        return callback;
+    }
+    return async (args) => {
+        const loadCacheKey = `${args.namespace}:${args.path}`;
+        let result = cache.get(loadCacheKey);
+        if (result === undefined) {
+            result = await callback(args);
+            // Do not cache null or undefined
+            if (result) {
+                // Ensure requested path is included if it was a resolved file
+                if (args.namespace === 'file') {
+                    result.watchFiles ??= [];
+                    result.watchFiles.push(args.path);
+                }
+                await cache.put(loadCacheKey, result);
+            }
+        }
+        return result;
+    };
+}
+exports.createCachedLoad = createCachedLoad;
+class MemoryLoadResultCache {
+    #loadResults = new Map();
+    #fileDependencies = new Map();
+    get(path) {
+        return this.#loadResults.get(path);
+    }
+    async put(path, result) {
+        this.#loadResults.set(path, result);
+        if (result.watchFiles) {
+            for (const watchFile of result.watchFiles) {
+                // Normalize the watch file path to ensure OS consistent paths
+                const normalizedWatchFile = (0, node_path_1.normalize)(watchFile);
+                let affected = this.#fileDependencies.get(normalizedWatchFile);
+                if (affected === undefined) {
+                    affected = new Set();
+                    this.#fileDependencies.set(normalizedWatchFile, affected);
+                }
+                affected.add(path);
+            }
+        }
+    }
+    invalidate(path) {
+        const affectedPaths = this.#fileDependencies.get(path);
+        let found = false;
+        if (affectedPaths) {
+            for (const affected of affectedPaths) {
+                if (this.#loadResults.delete(affected)) {
+                    found = true;
+                }
+            }
+            this.#fileDependencies.delete(path);
+        }
+        return found;
+    }
+    get watchFiles() {
+        // this.#loadResults.keys() is not included here because the keys
+        // are namespaced request paths and not disk-based file paths.
+        return [...this.#fileDependencies.keys()];
+    }
+}
+exports.MemoryLoadResultCache = MemoryLoadResultCache;

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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 declare function resetCumulativeDurations(): void;
+export declare function logCumulativeDurations(): void;
+export declare function profileAsync<T>(name: string, action: () => Promise<T>, cumulative?: boolean): Promise<T>;
+export declare function profileSync<T>(name: string, action: () => T, cumulative?: boolean): T;

package/src/tools/esbuild/profiling.js

@@ -0,0 +1,78 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.profileSync = exports.profileAsync = exports.logCumulativeDurations = exports.resetCumulativeDurations = void 0;
+const environment_options_1 = require("../../utils/environment-options");
+let cumulativeDurations;
+function resetCumulativeDurations() {
+    cumulativeDurations?.clear();
+}
+exports.resetCumulativeDurations = resetCumulativeDurations;
+function logCumulativeDurations() {
+    if (!environment_options_1.debugPerformance || !cumulativeDurations) {
+        return;
+    }
+    for (const [name, durations] of cumulativeDurations) {
+        let total = 0;
+        let min;
+        let max;
+        for (const duration of durations) {
+            total += duration;
+            if (min === undefined || duration < min) {
+                min = duration;
+            }
+            if (max === undefined || duration > max) {
+                max = duration;
+            }
+        }
+        const average = total / durations.length;
+        // eslint-disable-next-line no-console
+        console.log(`DURATION[${name}]: ${total.toFixed(9)}s [count: ${durations.length}; avg: ${average.toFixed(9)}s; min: ${min?.toFixed(9)}s; max: ${max?.toFixed(9)}s]`);
+    }
+}
+exports.logCumulativeDurations = logCumulativeDurations;
+function recordDuration(name, startTime, cumulative) {
+    const duration = Number(process.hrtime.bigint() - startTime) / 10 ** 9;
+    if (cumulative) {
+        cumulativeDurations ??= new Map();
+        const durations = cumulativeDurations.get(name) ?? [];
+        durations.push(duration);
+        cumulativeDurations.set(name, durations);
+    }
+    else {
+        // eslint-disable-next-line no-console
+        console.log(`DURATION[${name}]: ${duration.toFixed(9)}s`);
+    }
+}
+async function profileAsync(name, action, cumulative) {
+    if (!environment_options_1.debugPerformance) {
+        return action();
+    }
+    const startTime = process.hrtime.bigint();
+    try {
+        return await action();
+    }
+    finally {
+        recordDuration(name, startTime, cumulative);
+    }
+}
+exports.profileAsync = profileAsync;
+function profileSync(name, action, cumulative) {
+    if (!environment_options_1.debugPerformance) {
+        return action();
+    }
+    const startTime = process.hrtime.bigint();
+    try {
+        return action();
+    }
+    finally {
+        recordDuration(name, startTime, cumulative);
+    }
+}
+exports.profileSync = profileSync;

package/src/tools/esbuild/rxjs-esm-resolution-plugin.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+import type { Plugin } from 'esbuild';
+/**
+ * Creates a plugin that forces ESM resolution of rxjs.
+ * This is needed as when targeting node, the CJS version is used to the current package conditional exports.
+ * @see: https://github.com/ReactiveX/rxjs/blob/2947583bb33e97f3db9e6d9f6cea70c62a173060/package.json#L19.
+ *
+ * NOTE: This can be removed when and if rxjs adds an import condition that allows ESM usage on Node.js.
+ *
+ * @returns An esbuild plugin.
+ */
+export declare function createRxjsEsmResolutionPlugin(): Plugin;

package/src/tools/esbuild/rxjs-esm-resolution-plugin.js

@@ -0,0 +1,44 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRxjsEsmResolutionPlugin = void 0;
+const RXJS_ESM_RESOLUTION = Symbol('RXJS_ESM_RESOLUTION');
+/**
+ * Creates a plugin that forces ESM resolution of rxjs.
+ * This is needed as when targeting node, the CJS version is used to the current package conditional exports.
+ * @see: https://github.com/ReactiveX/rxjs/blob/2947583bb33e97f3db9e6d9f6cea70c62a173060/package.json#L19.
+ *
+ * NOTE: This can be removed when and if rxjs adds an import condition that allows ESM usage on Node.js.
+ *
+ * @returns An esbuild plugin.
+ */
+function createRxjsEsmResolutionPlugin() {
+    return {
+        name: 'angular-rxjs-resolution',
+        setup(build) {
+            build.onResolve({ filter: /^rxjs/ }, async (args) => {
+                if (args.pluginData?.[RXJS_ESM_RESOLUTION]) {
+                    return null;
+                }
+                const { importer, kind, resolveDir, namespace, pluginData = {} } = args;
+                pluginData[RXJS_ESM_RESOLUTION] = true;
+                const result = await build.resolve(args.path, {
+                    importer,
+                    kind,
+                    namespace,
+                    pluginData,
+                    resolveDir,
+                });
+                result.path = result.path.replace(/([\\/]dist[\\/])cjs([\\/])/, '$1esm$2');
+                return result;
+            });
+        },
+    };
+}
+exports.createRxjsEsmResolutionPlugin = createRxjsEsmResolutionPlugin;

package/src/tools/esbuild/sourcemap-ignorelist-plugin.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+import type { Plugin } from 'esbuild';
+/**
+ * Creates an esbuild plugin that updates generated sourcemaps to include the Chrome
+ * DevTools ignore list extension. All source files that originate from a node modules
+ * directory are added to the ignore list by this plugin.
+ *
+ * For more information, see https://developer.chrome.com/articles/x-google-ignore-list/
+ * @returns An esbuild plugin.
+ */
+export declare function createSourcemapIgnorelistPlugin(): Plugin;

package/src/tools/esbuild/sourcemap-ignorelist-plugin.js

@@ -0,0 +1,73 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSourcemapIgnorelistPlugin = void 0;
+/**
+ * The field identifier for the sourcemap Chrome Devtools ignore list extension.
+ *
+ * Following the naming conventions from https://sourcemaps.info/spec.html#h.ghqpj1ytqjbm
+ */
+const IGNORE_LIST_ID = 'x_google_ignoreList';
+/**
+ * The UTF-8 bytes for the node modules check text used to avoid unnecessary parsing
+ * of a full source map if not present in the source map data.
+ */
+const NODE_MODULE_BYTES = Buffer.from('node_modules/', 'utf-8');
+/**
+ * Creates an esbuild plugin that updates generated sourcemaps to include the Chrome
+ * DevTools ignore list extension. All source files that originate from a node modules
+ * directory are added to the ignore list by this plugin.
+ *
+ * For more information, see https://developer.chrome.com/articles/x-google-ignore-list/
+ * @returns An esbuild plugin.
+ */
+function createSourcemapIgnorelistPlugin() {
+    return {
+        name: 'angular-sourcemap-ignorelist',
+        setup(build) {
+            if (!build.initialOptions.sourcemap) {
+                return;
+            }
+            build.onEnd((result) => {
+                if (!result.outputFiles) {
+                    return;
+                }
+                for (const file of result.outputFiles) {
+                    // Only process sourcemap files
+                    if (!file.path.endsWith('.map')) {
+                        continue;
+                    }
+                    // Create a Buffer object that shares the memory of the output file contents
+                    const contents = Buffer.from(file.contents.buffer, file.contents.byteOffset, file.contents.byteLength);
+                    // Avoid parsing sourcemaps that have no node modules references
+                    if (!contents.includes(NODE_MODULE_BYTES)) {
+                        continue;
+                    }
+                    const map = JSON.parse(contents.toString('utf-8'));
+                    const ignoreList = [];
+                    // Check and store the index of each source originating from a node modules directory
+                    for (let index = 0; index < map.sources.length; ++index) {
+                        const location = map.sources[index].indexOf('node_modules/');
+                        if (location === 0 || (location > 0 && map.sources[index][location - 1] === '/')) {
+                            ignoreList.push(index);
+                        }
+                    }
+                    // Avoid regenerating the source map if nothing changed
+                    if (ignoreList.length === 0) {
+                        continue;
+                    }
+                    // Update the sourcemap in the output file
+                    map[IGNORE_LIST_ID] = ignoreList;
+                    file.contents = Buffer.from(JSON.stringify(map), 'utf-8');
+                }
+            });
+        },
+    };
+}
+exports.createSourcemapIgnorelistPlugin = createSourcemapIgnorelistPlugin;

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

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+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;
+    optimization: boolean;
+    inlineFonts: boolean;
+    preserveSymlinks?: boolean;
+    sourcemap: boolean | 'external' | 'inline' | 'linked';
+    outputNames: {
+        bundles: string;
+        media: string;
+    };
+    includePaths?: string[];
+    externalDependencies?: string[];
+    target: string[];
+    tailwindConfiguration?: {
+        file: string;
+        package: string;
+    };
+    postcssConfiguration?: PostcssConfiguration;
+    publicPath?: string;
+    cacheOptions: NormalizedCachedOptions;
+}
+export declare function createStylesheetBundleOptions(options: BundleStylesheetOptions, cache?: LoadResultCache, inlineComponentData?: Record<string, string>): BuildOptions & {
+    plugins: NonNullable<BuildOptions['plugins']>;
+};

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

@@ -0,0 +1,64 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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.createStylesheetBundleOptions = void 0;
+const node_path_1 = __importDefault(require("node:path"));
+const css_inline_fonts_plugin_1 = require("./css-inline-fonts-plugin");
+const css_language_1 = require("./css-language");
+const css_resource_plugin_1 = require("./css-resource-plugin");
+const less_language_1 = require("./less-language");
+const sass_language_1 = require("./sass-language");
+const stylesheet_plugin_factory_1 = require("./stylesheet-plugin-factory");
+function createStylesheetBundleOptions(options, cache, inlineComponentData) {
+    // Ensure preprocessor include paths are absolute based on the workspace root
+    const includePaths = options.includePaths?.map((includePath) => node_path_1.default.resolve(options.workspaceRoot, includePath));
+    const pluginFactory = new stylesheet_plugin_factory_1.StylesheetPluginFactory({
+        sourcemap: !!options.sourcemap,
+        includePaths,
+        inlineComponentData,
+        tailwindConfiguration: options.tailwindConfiguration,
+        postcssConfiguration: options.postcssConfiguration,
+    }, cache);
+    const plugins = [
+        pluginFactory.create(sass_language_1.SassStylesheetLanguage),
+        pluginFactory.create(less_language_1.LessStylesheetLanguage),
+        pluginFactory.create(css_language_1.CssStylesheetLanguage),
+        (0, css_resource_plugin_1.createCssResourcePlugin)(cache),
+    ];
+    if (options.inlineFonts) {
+        plugins.push((0, css_inline_fonts_plugin_1.createCssInlineFontsPlugin)({ cache, cacheOptions: options.cacheOptions }));
+    }
+    return {
+        absWorkingDir: options.workspaceRoot,
+        bundle: true,
+        entryNames: options.outputNames.bundles,
+        assetNames: options.outputNames.media,
+        logLevel: 'silent',
+        minify: options.optimization,
+        metafile: true,
+        sourcemap: options.sourcemap,
+        outdir: options.workspaceRoot,
+        write: false,
+        platform: 'browser',
+        target: options.target,
+        preserveSymlinks: options.preserveSymlinks,
+        external: options.externalDependencies,
+        publicPath: options.publicPath,
+        conditions: ['style', 'sass', 'less'],
+        mainFields: ['style', 'sass'],
+        // Unlike JS, CSS does not have implicit file extensions in the general case.
+        // Preprocessor specific behavior is handled in each stylesheet language plugin.
+        resolveExtensions: [],
+        plugins,
+    };
+}
+exports.createStylesheetBundleOptions = createStylesheetBundleOptions;

package/src/tools/esbuild/stylesheets/css-inline-fonts-plugin.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+import type { Plugin } from 'esbuild';
+import { NormalizedCachedOptions } from '../../../utils/normalize-cache';
+import { LoadResultCache } from '../load-result-cache';
+/**
+ * Options for the createCssInlineFontsPlugin
+ * @see createCssInlineFontsPlugin
+ */
+export interface CssInlineFontsPluginOptions {
+    /** Disk cache normalized options */
+    cacheOptions?: NormalizedCachedOptions;
+    /** Load results cache. */
+    cache?: LoadResultCache;
+}
+/**
+ * Creates an esbuild {@link Plugin} that inlines fonts imported via import-rule.
+ * within the build configuration.
+ */
+export declare function createCssInlineFontsPlugin({ cache, cacheOptions, }: CssInlineFontsPluginOptions): Plugin;

package/src/tools/esbuild/stylesheets/css-inline-fonts-plugin.js

@@ -0,0 +1,57 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCssInlineFontsPlugin = void 0;
+const inline_fonts_1 = require("../../../utils/index-file/inline-fonts");
+const load_result_cache_1 = require("../load-result-cache");
+/**
+ * Creates an esbuild {@link Plugin} that inlines fonts imported via import-rule.
+ * within the build configuration.
+ */
+function createCssInlineFontsPlugin({ cache, cacheOptions, }) {
+    return {
+        name: 'angular-css-inline-fonts-plugin',
+        setup(build) {
+            const inlineFontsProcessor = new inline_fonts_1.InlineFontsProcessor({ cache: cacheOptions, minify: false });
+            build.onResolve({ filter: /fonts\.googleapis\.com|use\.typekit\.net/ }, (args) => {
+                // Only attempt to resolve import-rule tokens which only exist inside CSS.
+                if (args.kind !== 'import-rule') {
+                    return null;
+                }
+                if (!inlineFontsProcessor.canInlineRequest(args.path)) {
+                    return null;
+                }
+                return {
+                    path: args.path,
+                    namespace: 'css-inline-fonts',
+                };
+            });
+            build.onLoad({ filter: /./, namespace: 'css-inline-fonts' }, (0, load_result_cache_1.createCachedLoad)(cache, async (args) => {
+                try {
+                    return {
+                        contents: await inlineFontsProcessor.processURL(args.path),
+                        loader: 'css',
+                    };
+                }
+                catch (error) {
+                    return {
+                        loader: 'css',
+                        errors: [
+                            {
+                                text: `Failed to inline external stylesheet '${args.path}'.`,
+                                detail: error,
+                            },
+                        ],
+                    };
+                }
+            }));
+        },
+    };
+}
+exports.createCssInlineFontsPlugin = createCssInlineFontsPlugin;

package/src/tools/esbuild/stylesheets/css-language.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+import { StylesheetLanguage } from './stylesheet-plugin-factory';
+export declare const CssStylesheetLanguage: Readonly<StylesheetLanguage>;

package/src/tools/esbuild/stylesheets/css-language.js

@@ -0,0 +1,15 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CssStylesheetLanguage = void 0;
+exports.CssStylesheetLanguage = Object.freeze({
+    name: 'css',
+    componentFilter: /^css;/,
+    fileFilter: /\.css$/,
+});

package/src/tools/esbuild/stylesheets/css-resource-plugin.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+import type { Plugin } from 'esbuild';
+import { LoadResultCache } from '../load-result-cache';
+/**
+ * Creates an esbuild {@link Plugin} that loads all CSS url token references using the
+ * built-in esbuild `file` loader. A plugin is used to allow for all file extensions
+ * and types to be supported without needing to manually specify all extensions
+ * within the build configuration.
+ *
+ * @returns An esbuild {@link Plugin} instance.
+ */
+export declare function createCssResourcePlugin(cache?: LoadResultCache): Plugin;

package/src/tools/esbuild/stylesheets/css-resource-plugin.js

@@ -0,0 +1,114 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCssResourcePlugin = void 0;
+const promises_1 = require("node:fs/promises");
+const node_path_1 = require("node:path");
+const load_result_cache_1 = require("../load-result-cache");
+const CSS_RESOURCE_NAMESPACE = 'angular:css-resource';
+/**
+ * Symbol marker used to indicate CSS resource resolution is being attempted.
+ * This is used to prevent an infinite loop within the plugin's resolve hook.
+ */
+const CSS_RESOURCE_RESOLUTION = Symbol('CSS_RESOURCE_RESOLUTION');
+/**
+ * Creates an esbuild {@link Plugin} that loads all CSS url token references using the
+ * built-in esbuild `file` loader. A plugin is used to allow for all file extensions
+ * and types to be supported without needing to manually specify all extensions
+ * within the build configuration.
+ *
+ * @returns An esbuild {@link Plugin} instance.
+ */
+function createCssResourcePlugin(cache) {
+    return {
+        name: 'angular-css-resource',
+        setup(build) {
+            build.onResolve({ filter: /.*/ }, async (args) => {
+                const { importer, path, kind, resolveDir, namespace, pluginData = {} } = args;
+                // Only attempt to resolve url tokens which only exist inside CSS.
+                // Also, skip this plugin if already attempting to resolve the url-token.
+                if (kind !== 'url-token' || pluginData[CSS_RESOURCE_RESOLUTION]) {
+                    return null;
+                }
+                let [containingDir, resourceUrl] = path.split('||file:', 2);
+                if (resourceUrl === undefined) {
+                    // This can happen due to early exit checks in rebasing-importer
+                    // logic such as when the url is an external URL.
+                    resourceUrl = containingDir;
+                    containingDir = '';
+                }
+                // If root-relative, absolute or protocol relative url, mark as external to leave the
+                // path/URL in place.
+                if (/^((?:\w+:)?\/\/|data:|chrome:|#|\/)/.test(resourceUrl)) {
+                    return {
+                        path: resourceUrl,
+                        external: true,
+                    };
+                }
+                pluginData[CSS_RESOURCE_RESOLUTION] = true;
+                const result = await build.resolve(resourceUrl, {
+                    importer,
+                    kind,
+                    namespace,
+                    pluginData,
+                    resolveDir: (0, node_path_1.join)(resolveDir, containingDir),
+                });
+                if (result.errors.length) {
+                    const error = result.errors[0];
+                    if (resourceUrl[0] === '~') {
+                        error.notes = [
+                            {
+                                location: null,
+                                text: 'You can remove the tilde and use a relative path to reference it, which should remove this error.',
+                            },
+                        ];
+                    }
+                    else if (resourceUrl[0] === '^') {
+                        error.notes = [
+                            {
+                                location: null,
+                                text: 'You can remove the caret and add the path to the `externalDependencies` build option,' +
+                                    ' which should remove this error.',
+                            },
+                        ];
+                    }
+                    const extension = importer && (0, node_path_1.extname)(importer);
+                    if (extension !== '.css') {
+                        error.notes.push({
+                            location: null,
+                            text: 'Preprocessor stylesheets may not show the exact file location of the error.',
+                        });
+                    }
+                }
+                // Return results that are not files since these are most likely specific to another plugin
+                // and cannot be loaded by this plugin.
+                if (result.namespace !== 'file') {
+                    return result;
+                }
+                // All file results are considered CSS resources and will be loaded via the file loader
+                return {
+                    ...result,
+                    // Use a relative path to prevent fully resolved paths in the metafile (JSON stats file).
+                    // This is only necessary for custom namespaces. esbuild will handle the file namespace.
+                    path: (0, node_path_1.relative)(build.initialOptions.absWorkingDir ?? '', result.path),
+                    namespace: CSS_RESOURCE_NAMESPACE,
+                };
+            });
+            build.onLoad({ filter: /./, namespace: CSS_RESOURCE_NAMESPACE }, (0, load_result_cache_1.createCachedLoad)(cache, async (args) => {
+                const resourcePath = (0, node_path_1.join)(build.initialOptions.absWorkingDir ?? '', args.path);
+                return {
+                    contents: await (0, promises_1.readFile)(resourcePath),
+                    loader: 'file',
+                    watchFiles: [resourcePath],
+                };
+            }));
+        },
+    };
+}
+exports.createCssResourcePlugin = createCssResourcePlugin;