@angular/build 18.0.0-next.3

package/src/tools/esbuild/stylesheets/less-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 LessStylesheetLanguage: Readonly<StylesheetLanguage>;

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

@@ -0,0 +1,155 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LessStylesheetLanguage = void 0;
+const promises_1 = require("node:fs/promises");
+/**
+ * The lazy-loaded instance of the less stylesheet preprocessor.
+ * It is only imported and initialized if a less stylesheet is used.
+ */
+let lessPreprocessor;
+function isLessException(error) {
+    return !!error && typeof error === 'object' && 'column' in error;
+}
+exports.LessStylesheetLanguage = Object.freeze({
+    name: 'less',
+    componentFilter: /^less;/,
+    fileFilter: /\.less$/,
+    process(data, file, _, options, build) {
+        return compileString(data, file, options, build.resolve.bind(build), 
+        /* unsafeInlineJavaScript */ false);
+    },
+});
+async function compileString(data, filename, options, resolver, unsafeInlineJavaScript) {
+    const less = (lessPreprocessor ??= (await Promise.resolve().then(() => __importStar(require('less')))).default);
+    const resolverPlugin = {
+        install({ FileManager }, pluginManager) {
+            const resolverFileManager = new (class extends FileManager {
+                supportsSync() {
+                    return false;
+                }
+                supports() {
+                    return true;
+                }
+                async loadFile(filename, currentDirectory, options, environment) {
+                    // Attempt direct loading as a relative path to avoid resolution overhead
+                    try {
+                        return await super.loadFile(filename, currentDirectory, options, environment);
+                    }
+                    catch (error) {
+                        // Attempt a full resolution if not found
+                        const fullResult = await resolver(filename, {
+                            kind: 'import-rule',
+                            resolveDir: currentDirectory,
+                        });
+                        if (fullResult.path) {
+                            return {
+                                filename: fullResult.path,
+                                contents: await (0, promises_1.readFile)(fullResult.path, 'utf-8'),
+                            };
+                        }
+                        // Otherwise error by throwing the failing direct result
+                        throw error;
+                    }
+                }
+            })();
+            pluginManager.addFileManager(resolverFileManager);
+        },
+    };
+    try {
+        const result = await less.render(data, {
+            filename,
+            paths: options.includePaths,
+            plugins: [resolverPlugin],
+            rewriteUrls: 'all',
+            javascriptEnabled: unsafeInlineJavaScript,
+            sourceMap: options.sourcemap
+                ? {
+                    sourceMapFileInline: true,
+                    outputSourceFiles: true,
+                }
+                : undefined,
+        });
+        return {
+            contents: result.css,
+            loader: 'css',
+            watchFiles: [filename, ...result.imports],
+        };
+    }
+    catch (error) {
+        if (isLessException(error)) {
+            const location = convertExceptionLocation(error);
+            // Retry with a warning for less files requiring the deprecated inline JavaScript option
+            if (error.message.includes('Inline JavaScript is not enabled.')) {
+                const withJsResult = await compileString(data, filename, options, resolver, 
+                /* unsafeInlineJavaScript */ true);
+                withJsResult.warnings = [
+                    {
+                        text: 'Deprecated inline execution of JavaScript has been enabled ("javascriptEnabled")',
+                        location,
+                        notes: [
+                            {
+                                location: null,
+                                text: 'JavaScript found within less stylesheets may be executed at build time. [https://lesscss.org/usage/#less-options]',
+                            },
+                            {
+                                location: null,
+                                text: 'Support for "javascriptEnabled" may be removed from the Angular CLI starting with Angular v19.',
+                            },
+                        ],
+                    },
+                ];
+                return withJsResult;
+            }
+            return {
+                errors: [
+                    {
+                        text: error.message,
+                        location,
+                    },
+                ],
+                loader: 'css',
+                watchFiles: location.file ? [filename, location.file] : [filename],
+            };
+        }
+        throw error;
+    }
+}
+function convertExceptionLocation(exception) {
+    return {
+        file: exception.filename,
+        line: exception.line,
+        column: exception.column,
+        // Middle element represents the line containing the exception
+        lineText: exception.extract && exception.extract[Math.trunc(exception.extract.length / 2)],
+    };
+}

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

@@ -0,0 +1,10 @@
+/**
+ * @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 function shutdownSassWorkerPool(): void;
+export declare const SassStylesheetLanguage: Readonly<StylesheetLanguage>;

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

@@ -0,0 +1,185 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SassStylesheetLanguage = exports.shutdownSassWorkerPool = void 0;
+const node_path_1 = require("node:path");
+const node_url_1 = require("node:url");
+const cache_1 = require("../cache");
+let sassWorkerPool;
+let sassWorkerPoolPromise;
+function isSassException(error) {
+    return !!error && typeof error === 'object' && 'sassMessage' in error;
+}
+function shutdownSassWorkerPool() {
+    if (sassWorkerPool) {
+        sassWorkerPool.close();
+        sassWorkerPool = undefined;
+    }
+    else if (sassWorkerPoolPromise) {
+        void sassWorkerPoolPromise.then(shutdownSassWorkerPool);
+    }
+    sassWorkerPoolPromise = undefined;
+}
+exports.shutdownSassWorkerPool = shutdownSassWorkerPool;
+exports.SassStylesheetLanguage = Object.freeze({
+    name: 'sass',
+    componentFilter: /^s[ac]ss;/,
+    fileFilter: /\.s[ac]ss$/,
+    process(data, file, format, options, build) {
+        const syntax = format === 'sass' ? 'indented' : 'scss';
+        const resolveUrl = async (url, options) => {
+            let resolveDir = build.initialOptions.absWorkingDir;
+            if (options.containingUrl) {
+                resolveDir = (0, node_path_1.dirname)((0, node_url_1.fileURLToPath)(options.containingUrl));
+            }
+            const result = await build.resolve(url, {
+                kind: 'import-rule',
+                resolveDir,
+            });
+            return result;
+        };
+        return compileString(data, file, syntax, options, resolveUrl);
+    },
+});
+function parsePackageName(url) {
+    const parts = url.split('/');
+    const hasScope = parts.length >= 2 && parts[0].startsWith('@');
+    const [nameOrScope, nameOrFirstPath, ...pathPart] = parts;
+    const packageName = hasScope ? `${nameOrScope}/${nameOrFirstPath}` : nameOrScope;
+    return {
+        packageName,
+        get pathSegments() {
+            return !hasScope && nameOrFirstPath ? [nameOrFirstPath, ...pathPart] : pathPart;
+        },
+    };
+}
+async function compileString(data, filePath, syntax, options, resolveUrl) {
+    // Lazily load Sass when a Sass file is found
+    if (sassWorkerPool === undefined) {
+        if (sassWorkerPoolPromise === undefined) {
+            sassWorkerPoolPromise = Promise.resolve().then(() => __importStar(require('../../sass/sass-service'))).then((sassService) => new sassService.SassWorkerImplementation(true));
+        }
+        sassWorkerPool = await sassWorkerPoolPromise;
+    }
+    // Cache is currently local to individual compile requests.
+    // Caching follows Sass behavior where a given url will always resolve to the same value
+    // regardless of its importer's path.
+    // A null value indicates that the cached resolution attempt failed to find a location and
+    // later stage resolution should be attempted. This avoids potentially expensive repeat
+    // failing resolution attempts.
+    const resolutionCache = new cache_1.MemoryCache();
+    const packageRootCache = new cache_1.MemoryCache();
+    const warnings = [];
+    try {
+        const { css, sourceMap, loadedUrls } = await sassWorkerPool.compileStringAsync(data, {
+            url: (0, node_url_1.pathToFileURL)(filePath),
+            style: 'expanded',
+            syntax,
+            loadPaths: options.includePaths,
+            sourceMap: options.sourcemap,
+            sourceMapIncludeSources: options.sourcemap,
+            quietDeps: true,
+            importers: [
+                {
+                    findFileUrl: (url, options) => resolutionCache.getOrCreate(url, async () => {
+                        const result = await resolveUrl(url, options);
+                        if (result.path) {
+                            return (0, node_url_1.pathToFileURL)(result.path);
+                        }
+                        // Check for package deep imports
+                        const { packageName, pathSegments } = parsePackageName(url);
+                        // Caching package root locations is particularly beneficial for `@material/*` packages
+                        // which extensively use deep imports.
+                        const packageRoot = await packageRootCache.getOrCreate(packageName, async () => {
+                            // Use the required presence of a package root `package.json` file to resolve the location
+                            const packageResult = await resolveUrl(packageName + '/package.json', options);
+                            return packageResult.path ? (0, node_path_1.dirname)(packageResult.path) : null;
+                        });
+                        // Package not found could be because of an error or the specifier is intended to be found
+                        // via a later stage of the resolution process (`loadPaths`, etc.).
+                        // Errors are reported after the full completion of the resolution process. Exceptions for
+                        // not found packages should not be raised here.
+                        if (packageRoot) {
+                            return (0, node_url_1.pathToFileURL)((0, node_path_1.join)(packageRoot, ...pathSegments));
+                        }
+                        // Not found
+                        return null;
+                    }),
+                },
+            ],
+            logger: {
+                warn: (text, { deprecation, span }) => {
+                    warnings.push({
+                        text: deprecation ? 'Deprecation' : text,
+                        location: span && {
+                            file: span.url && (0, node_url_1.fileURLToPath)(span.url),
+                            lineText: span.context,
+                            // Sass line numbers are 0-based while esbuild's are 1-based
+                            line: span.start.line + 1,
+                            column: span.start.column,
+                        },
+                        notes: deprecation ? [{ text }] : undefined,
+                    });
+                },
+            },
+        });
+        return {
+            loader: 'css',
+            contents: sourceMap ? `${css}\n${sourceMapToUrlComment(sourceMap, (0, node_path_1.dirname)(filePath))}` : css,
+            watchFiles: loadedUrls.map((url) => (0, node_url_1.fileURLToPath)(url)),
+            warnings,
+        };
+    }
+    catch (error) {
+        if (isSassException(error)) {
+            const fileWithError = error.span.url ? (0, node_url_1.fileURLToPath)(error.span.url) : undefined;
+            return {
+                loader: 'css',
+                errors: [
+                    {
+                        text: error.message,
+                    },
+                ],
+                warnings,
+                watchFiles: fileWithError ? [filePath, fileWithError] : [filePath],
+            };
+        }
+        throw error;
+    }
+}
+function sourceMapToUrlComment(sourceMap, root) {
+    // Remove `file` protocol from all sourcemap sources and adjust to be relative to the input file.
+    // This allows esbuild to correctly process the paths.
+    sourceMap.sources = sourceMap.sources.map((source) => (0, node_path_1.relative)(root, (0, node_url_1.fileURLToPath)(source)));
+    const urlSourceMap = Buffer.from(JSON.stringify(sourceMap), 'utf-8').toString('base64');
+    return `/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${urlSourceMap} */`;
+}

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

@@ -0,0 +1,58 @@
+/**
+ * @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 { 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.
+ */
+export interface StylesheetPluginOptions {
+    /**
+     * Controls the use and creation of sourcemaps when processing the stylesheets.
+     * If true, sourcemap processing is enabled; if false, disabled.
+     */
+    sourcemap: boolean;
+    /**
+     * An optional array of paths that will be searched for stylesheets if the default
+     * resolution process for the stylesheet language does not succeed.
+     */
+    includePaths?: string[];
+    /**
+     * Optional component data for any inline styles from Component decorator `styles` fields.
+     * The key is an internal angular resource URI and the value is the stylesheet content.
+     */
+    inlineComponentData?: Record<string, string>;
+    /**
+     * Optional information used to load and configure Tailwind CSS. If present, the postcss
+     * will be added to the stylesheet processing with the Tailwind plugin setup as provided
+     * by the configuration file.
+     */
+    tailwindConfiguration?: {
+        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;
+    componentFilter: RegExp;
+    fileFilter: RegExp;
+    process?(data: string, file: string, format: string, options: StylesheetPluginOptions, build: PluginBuild): OnLoadResult | Promise<OnLoadResult>;
+}
+export declare class StylesheetPluginFactory {
+    private readonly options;
+    private readonly cache?;
+    private postcssProcessor?;
+    constructor(options: StylesheetPluginOptions, cache?: LoadResultCache | undefined);
+    create(language: Readonly<StylesheetLanguage>): Plugin;
+}