@angular-devkit/build-angular 15.0.0-rc.1 → 15.0.0-rc.3

package/package.json

@@ -1,37 +1,37 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "15.0.0-rc.1",
+  "version": "15.0.0-rc.3",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.0",
-    "@angular-devkit/architect": "0.1500.0-rc.1",
-    "@angular-devkit/build-webpack": "0.1500.0-rc.1",
-    "@angular-devkit/core": "15.0.0-rc.1",
-    "@babel/core": "7.19.6",
-    "@babel/generator": "7.19.6",
+    "@angular-devkit/architect": "0.1500.0-rc.3",
+    "@angular-devkit/build-webpack": "0.1500.0-rc.3",
+    "@angular-devkit/core": "15.0.0-rc.3",
+    "@babel/core": "7.20.2",
+    "@babel/generator": "7.20.3",
     "@babel/helper-annotate-as-pure": "7.18.6",
-    "@babel/plugin-proposal-async-generator-functions": "7.19.1",
+    "@babel/plugin-proposal-async-generator-functions": "7.20.1",
     "@babel/plugin-transform-async-to-generator": "7.18.6",
     "@babel/plugin-transform-runtime": "7.19.6",
-    "@babel/preset-env": "7.19.4",
-    "@babel/runtime": "7.19.4",
+    "@babel/preset-env": "7.20.2",
+    "@babel/runtime": "7.20.1",
     "@babel/template": "7.18.10",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "15.0.0-rc.1",
+    "@ngtools/webpack": "15.0.0-rc.3",
     "ansi-colors": "4.1.3",
-    "autoprefixer": "10.4.12",
-    "babel-loader": "8.2.5",
+    "autoprefixer": "10.4.13",
+    "babel-loader": "9.1.0",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "^4.9.1",
-    "cacache": "17.0.1",
+    "cacache": "17.0.2",
     "chokidar": "3.5.3",
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.16",
     "css-loader": "6.7.1",
-    "esbuild-wasm": "0.15.12",
+    "esbuild-wasm": "0.15.13",
     "glob": "8.0.3",
     "https-proxy-agent": "5.0.1",
     "inquirer": "8.2.4",
@@ -41,8 +41,8 @@
     "less-loader": "11.1.0",
     "license-webpack-plugin": "4.0.2",
     "loader-utils": "3.2.0",
+    "magic-string": "0.26.7",
     "mini-css-extract-plugin": "2.6.1",
-    "minimatch": "5.1.0",
     "open": "8.4.0",
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "6.0.1",
@@ -52,7 +52,7 @@
     "regenerator-runtime": "0.13.10",
     "resolve-url-loader": "5.0.0",
     "rxjs": "6.6.7",
-    "sass": "1.55.0",
+    "sass": "1.56.0",
     "sass-loader": "13.1.0",
     "semver": "7.3.8",
     "source-map-loader": "4.0.1",
@@ -60,7 +60,7 @@
     "terser": "5.15.1",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
-    "tslib": "2.4.0",
+    "tslib": "2.4.1",
     "webpack": "5.74.0",
     "webpack-dev-middleware": "5.3.3",
     "webpack-dev-server": "4.11.1",
@@ -68,7 +68,7 @@
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.15.12"
+    "esbuild": "0.15.13"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^15.0.0-next",

package/src/builders/browser-esbuild/compiler-plugin.js

@@ -188,8 +188,8 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     location: { file: pluginOptions.tsconfig },
                     notes: [
                         {
-                            text: `To control ECMA version and features use the Browerslist configuration. ' +
-              'For more information, see https://angular.io/guide/build#configuring-browser-compatibility'`,
+                            text: 'To control ECMA version and features use the Browerslist configuration. ' +
+                                'For more information, see https://angular.io/guide/build#configuring-browser-compatibility',
                         },
                     ],
                 });

package/src/builders/browser-esbuild/css-resource-plugin.js

@@ -33,6 +33,14 @@ function createCssResourcePlugin() {
                 if (args.kind !== 'url-token' || ((_a = args.pluginData) === null || _a === void 0 ? void 0 : _a[CSS_RESOURCE_RESOLUTION])) {
                     return null;
                 }
+                // If root-relative, absolute or protocol relative url, mark as external to leave the
+                // path/URL in place.
+                if (/^((?:\w+:)?\/\/|data:|chrome:|#|\/)/.test(args.path)) {
+                    return {
+                        path: args.path,
+                        external: true,
+                    };
+                }
                 const { importer, kind, resolveDir, namespace, pluginData = {} } = args;
                 pluginData[CSS_RESOURCE_RESOLUTION] = true;
                 const result = await build.resolve(args.path, {

package/src/builders/browser-esbuild/index.js

@@ -46,6 +46,7 @@ const compiler_plugin_1 = require("./compiler-plugin");
 const esbuild_1 = require("./esbuild");
 const experimental_warnings_1 = require("./experimental-warnings");
 const options_1 = require("./options");
+const sass_plugin_1 = require("./sass-plugin");
 const stylesheets_1 = require("./stylesheets");
 const watcher_1 = require("./watcher");
 /**
@@ -208,6 +209,11 @@ function createCodeBundleOptions(options, target, sourceFileCache) {
             // loader to perform the downlevel transformation.
             // NOTE: If esbuild adds support in the future, the babel support for async generators can be disabled.
             'async-await': false,
+            // V8 currently has a performance defect involving object spread operations that can cause signficant
+            // degradation in runtime performance. By not supporting the language feature here, a downlevel form
+            // will be used instead which provides a workaround for the performance issue.
+            // For more details: https://bugs.chromium.org/p/v8/issues/detail?id=11536
+            'object-rest-spread': false,
         },
         mainFields: ['es2020', 'browser', 'module', 'main'],
         conditions: ['es2020', 'es2015', 'module'],
@@ -345,6 +351,7 @@ async function* buildEsbuildBrowser(initialOptions, context) {
     yield result.output;
     // Finish if watch mode is not enabled
     if (!initialOptions.watch) {
+        (0, sass_plugin_1.shutdownSassWorkerPool)();
         return;
     }
     context.logger.info('Watch mode enabled. Watching for file changes...');
@@ -378,6 +385,7 @@ async function* buildEsbuildBrowser(initialOptions, context) {
         await watcher.close();
         // Cleanup incremental rebuild state
         result.dispose();
+        (0, sass_plugin_1.shutdownSassWorkerPool)();
     }
 }
 exports.buildEsbuildBrowser = buildEsbuildBrowser;

package/src/builders/browser-esbuild/sass-plugin.d.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { Plugin } from 'esbuild';
+export declare function shutdownSassWorkerPool(): void;
 export declare function createSassPlugin(options: {
     sourcemap: boolean;
     loadPaths?: string[];

package/src/builders/browser-esbuild/sass-plugin.js

@@ -6,54 +6,92 @@
  * 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.createSassPlugin = void 0;
+exports.createSassPlugin = exports.shutdownSassWorkerPool = void 0;
+const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
 const node_url_1 = require("node:url");
+const sass_service_1 = require("../../sass/sass-service");
+let sassWorkerPool;
+function isSassException(error) {
+    return !!error && typeof error === 'object' && 'sassMessage' in error;
+}
+function shutdownSassWorkerPool() {
+    sassWorkerPool === null || sassWorkerPool === void 0 ? void 0 : sassWorkerPool.close();
+    sassWorkerPool = undefined;
+}
+exports.shutdownSassWorkerPool = shutdownSassWorkerPool;
 function createSassPlugin(options) {
     return {
         name: 'angular-sass',
         setup(build) {
-            let sass;
             build.onLoad({ filter: /\.s[ac]ss$/ }, async (args) => {
                 // Lazily load Sass when a Sass file is found
-                sass !== null && sass !== void 0 ? sass : (sass = await Promise.resolve().then(() => __importStar(require('sass'))));
+                sassWorkerPool !== null && sassWorkerPool !== void 0 ? sassWorkerPool : (sassWorkerPool = new sass_service_1.SassWorkerImplementation(true));
+                const warnings = [];
                 try {
-                    const warnings = [];
-                    // Use sync version as async version is slower.
-                    const { css, sourceMap, loadedUrls } = sass.compile(args.path, {
+                    const data = await (0, promises_1.readFile)(args.path, 'utf-8');
+                    const { css, sourceMap, loadedUrls } = await sassWorkerPool.compileStringAsync(data, {
+                        url: (0, node_url_1.pathToFileURL)(args.path),
                         style: 'expanded',
                         loadPaths: options.loadPaths,
                         sourceMap: options.sourcemap,
                         sourceMapIncludeSources: options.sourcemap,
                         quietDeps: true,
+                        importers: [
+                            {
+                                findFileUrl: async (url, { previousResolvedModules }) => {
+                                    let result = await build.resolve(url, {
+                                        kind: 'import-rule',
+                                        // This should ideally be the directory of the importer file from Sass
+                                        // but that is not currently available from the Sass importer API.
+                                        resolveDir: build.initialOptions.absWorkingDir,
+                                    });
+                                    // Workaround to support Yarn PnP without access to the importer file from Sass
+                                    if (!result.path && (previousResolvedModules === null || previousResolvedModules === void 0 ? void 0 : previousResolvedModules.size)) {
+                                        for (const previous of previousResolvedModules) {
+                                            result = await build.resolve(url, {
+                                                kind: 'import-rule',
+                                                resolveDir: previous,
+                                            });
+                                        }
+                                    }
+                                    // Check for package deep imports
+                                    if (!result.path) {
+                                        const parts = url.split('/');
+                                        const hasScope = parts.length > 2 && parts[0].startsWith('@');
+                                        if (hasScope || parts.length > 1) {
+                                            const [nameOrScope, nameOrFirstPath, ...pathPart] = parts;
+                                            const packageName = hasScope
+                                                ? `${nameOrScope}/${nameOrFirstPath}`
+                                                : nameOrScope;
+                                            const packageResult = await build.resolve(packageName + '/package.json', {
+                                                kind: 'import-rule',
+                                                // This should ideally be the directory of the importer file from Sass
+                                                // but that is not currently available from the Sass importer API.
+                                                resolveDir: build.initialOptions.absWorkingDir,
+                                            });
+                                            if (packageResult.path) {
+                                                return (0, node_url_1.pathToFileURL)((0, node_path_1.join)((0, node_path_1.dirname)(packageResult.path), !hasScope ? nameOrFirstPath : '', ...pathPart));
+                                            }
+                                        }
+                                    }
+                                    return result.path ? (0, node_url_1.pathToFileURL)(result.path) : null;
+                                },
+                            },
+                        ],
                         logger: {
-                            warn: (text, _options) => {
+                            warn: (text, { deprecation, span }) => {
                                 warnings.push({
-                                    text,
+                                    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,
                                 });
                             },
                         },
@@ -68,15 +106,16 @@ function createSassPlugin(options) {
                     };
                 }
                 catch (error) {
-                    if (error instanceof sass.Exception) {
+                    if (isSassException(error)) {
                         const file = error.span.url ? (0, node_url_1.fileURLToPath)(error.span.url) : undefined;
                         return {
                             loader: 'css',
                             errors: [
                                 {
-                                    text: error.toString(),
+                                    text: error.message,
                                 },
                             ],
+                            warnings,
                             watchFiles: file ? [file] : undefined,
                         };
                     }

package/src/builders/browser-esbuild/stylesheets.js

@@ -36,17 +36,14 @@ const css_resource_plugin_1 = require("./css-resource-plugin");
 const esbuild_1 = require("./esbuild");
 const sass_plugin_1 = require("./sass-plugin");
 async function bundleStylesheet(entry, options) {
-    var _a, _b, _c;
-    const loadPaths = (_a = options.includePaths) !== null && _a !== void 0 ? _a : [];
-    // Needed to resolve node packages.
-    loadPaths.push(path.join(options.workspaceRoot, 'node_modules'));
+    var _a, _b;
     // Execute esbuild
     const result = await (0, esbuild_1.bundle)({
         ...entry,
         absWorkingDir: options.workspaceRoot,
         bundle: true,
-        entryNames: (_b = options.outputNames) === null || _b === void 0 ? void 0 : _b.bundles,
-        assetNames: (_c = options.outputNames) === null || _c === void 0 ? void 0 : _c.media,
+        entryNames: (_a = options.outputNames) === null || _a === void 0 ? void 0 : _a.bundles,
+        assetNames: (_b = options.outputNames) === null || _b === void 0 ? void 0 : _b.media,
         logLevel: 'silent',
         minify: options.optimization,
         sourcemap: options.sourcemap,
@@ -59,7 +56,7 @@ async function bundleStylesheet(entry, options) {
         conditions: ['style', 'sass'],
         mainFields: ['style', 'sass'],
         plugins: [
-            (0, sass_plugin_1.createSassPlugin)({ sourcemap: !!options.sourcemap, loadPaths }),
+            (0, sass_plugin_1.createSassPlugin)({ sourcemap: !!options.sourcemap, loadPaths: options.includePaths }),
             (0, css_resource_plugin_1.createCssResourcePlugin)(),
         ],
     });

package/src/builders/browser-esbuild/watcher.js

@@ -33,6 +33,7 @@ function createWatcher(options) {
     });
     const nextQueue = [];
     let currentChanges;
+    let nextWaitTimeout;
     watcher.on('all', (event, path) => {
         switch (event) {
             case 'add':
@@ -50,11 +51,18 @@ function createWatcher(options) {
             default:
                 return;
         }
-        const next = nextQueue.shift();
-        if (next) {
-            const value = currentChanges;
-            currentChanges = undefined;
-            next(value);
+        // Wait 250ms from next change to better capture groups of file save operations.
+        if (!nextWaitTimeout) {
+            nextWaitTimeout = setTimeout(() => {
+                nextWaitTimeout = undefined;
+                const next = nextQueue.shift();
+                if (next) {
+                    const value = currentChanges;
+                    currentChanges = undefined;
+                    next(value);
+                }
+            }, 250);
+            nextWaitTimeout === null || nextWaitTimeout === void 0 ? void 0 : nextWaitTimeout.unref();
         }
     });
     return {
@@ -80,6 +88,9 @@ function createWatcher(options) {
         async close() {
             try {
                 await watcher.close();
+                if (nextWaitTimeout) {
+                    clearTimeout(nextWaitTimeout);
+                }
             }
             finally {
                 let next;

package/src/builders/server/index.js

@@ -43,6 +43,7 @@ const purge_cache_1 = require("../../utils/purge-cache");
 const version_1 = require("../../utils/version");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const configs_1 = require("../../webpack/configs");
+const helpers_1 = require("../../webpack/utils/helpers");
 const stats_1 = require("../../webpack/utils/stats");
 /**
  * @experimental Direct usage of this function is considered experimental.
@@ -127,23 +128,19 @@ async function initialize(options, context, webpackConfigurationTransform) {
 function getPlatformServerExportsConfig(wco) {
     // Add `@angular/platform-server` exports.
     // This is needed so that DI tokens can be referenced and set at runtime outside of the bundle.
-    try {
-        // Only add `@angular/platform-server` exports when it is installed.
-        // In some cases this builder is used when `@angular/platform-server` is not installed.
-        // Example: when using `@nguniversal/common/clover` which does not need `@angular/platform-server`.
-        require.resolve('@angular/platform-server', { paths: [wco.root] });
-    }
-    catch {
-        return {};
-    }
-    return {
-        module: {
-            rules: [
-                {
-                    loader: require.resolve('./platform-server-exports-loader'),
-                    include: [path.resolve(wco.root, wco.buildOptions.main)],
-                },
-            ],
-        },
-    };
+    // Only add `@angular/platform-server` exports when it is installed.
+    // In some cases this builder is used when `@angular/platform-server` is not installed.
+    // Example: when using `@nguniversal/common/clover` which does not need `@angular/platform-server`.
+    return (0, helpers_1.isPlatformServerInstalled)(wco.root)
+        ? {
+            module: {
+                rules: [
+                    {
+                        loader: require.resolve('./platform-server-exports-loader'),
+                        include: [path.resolve(wco.root, wco.buildOptions.main)],
+                    },
+                ],
+            },
+        }
+        : {};
 }

package/src/sass/rebasing-importer.d.ts

@@ -0,0 +1,98 @@
+/**
+ * @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
+ */
+/// <reference types="node" />
+/// <reference types="node" />
+import { RawSourceMap } from '@ampproject/remapping';
+import { Dirent } from 'node:fs';
+import type { FileImporter, Importer, ImporterResult } from 'sass';
+/**
+ * A Sass Importer base class that provides the load logic to rebase all `url()` functions
+ * within a stylesheet. The rebasing will ensure that the URLs in the output of the Sass compiler
+ * reflect the final filesystem location of the output CSS file.
+ *
+ * This class provides the core of the rebasing functionality. To ensure that each file is processed
+ * by this importer's load implementation, the Sass compiler requires the importer's canonicalize
+ * function to return a non-null value with the resolved location of the requested stylesheet.
+ * Concrete implementations of this class must provide this canonicalize functionality for rebasing
+ * to be effective.
+ */
+declare abstract class UrlRebasingImporter implements Importer<'sync'> {
+    private entryDirectory;
+    private rebaseSourceMaps?;
+    /**
+     * @param entryDirectory The directory of the entry stylesheet that was passed to the Sass compiler.
+     * @param rebaseSourceMaps When provided, rebased files will have an intermediate sourcemap added to the Map
+     * which can be used to generate a final sourcemap that contains original sources.
+     */
+    constructor(entryDirectory: string, rebaseSourceMaps?: Map<string, RawSourceMap> | undefined);
+    abstract canonicalize(url: string, options: {
+        fromImport: boolean;
+    }): URL | null;
+    load(canonicalUrl: URL): ImporterResult | null;
+}
+/**
+ * Provides the Sass importer logic to resolve relative stylesheet imports via both import and use rules
+ * and also rebase any `url()` function usage within those stylesheets. The rebasing will ensure that
+ * the URLs in the output of the Sass compiler reflect the final filesystem location of the output CSS file.
+ */
+export declare class RelativeUrlRebasingImporter extends UrlRebasingImporter {
+    private directoryCache;
+    constructor(entryDirectory: string, directoryCache?: Map<string, Dirent[]>, rebaseSourceMaps?: Map<string, RawSourceMap>);
+    canonicalize(url: string, options: {
+        fromImport: boolean;
+    }): URL | null;
+    /**
+     * Attempts to resolve a provided URL to a stylesheet file using the Sass compiler's resolution algorithm.
+     * Based on https://github.com/sass/dart-sass/blob/44d6bb6ac72fe6b93f5bfec371a1fffb18e6b76d/lib/src/importer/utils.dart
+     * @param url The file protocol URL to resolve.
+     * @param fromImport If true, URL was from an import rule; otherwise from a use rule.
+     * @param checkDirectory If true, try checking for a directory with the base name containing an index file.
+     * @returns A full resolved URL of the stylesheet file or `null` if not found.
+     */
+    private resolveImport;
+    /**
+     * Checks an array of potential stylesheet files to determine if there is a valid
+     * stylesheet file. More than one discovered file may indicate an error.
+     * @param found An array of discovered stylesheet files.
+     * @returns A fully resolved URL for a stylesheet file or `null` if not found.
+     * @throws If there are ambiguous files discovered.
+     */
+    private checkFound;
+}
+/**
+ * Provides the Sass importer logic to resolve module (npm package) stylesheet imports via both import and
+ * use rules and also rebase any `url()` function usage within those stylesheets. The rebasing will ensure that
+ * the URLs in the output of the Sass compiler reflect the final filesystem location of the output CSS file.
+ */
+export declare class ModuleUrlRebasingImporter extends RelativeUrlRebasingImporter {
+    private finder;
+    constructor(entryDirectory: string, directoryCache: Map<string, Dirent[]>, rebaseSourceMaps: Map<string, RawSourceMap> | undefined, finder: FileImporter<'sync'>['findFileUrl']);
+    canonicalize(url: string, options: {
+        fromImport: boolean;
+    }): URL | null;
+}
+/**
+ * Provides the Sass importer logic to resolve load paths located stylesheet imports via both import and
+ * use rules and also rebase any `url()` function usage within those stylesheets. The rebasing will ensure that
+ * the URLs in the output of the Sass compiler reflect the final filesystem location of the output CSS file.
+ */
+export declare class LoadPathsUrlRebasingImporter extends RelativeUrlRebasingImporter {
+    private loadPaths;
+    constructor(entryDirectory: string, directoryCache: Map<string, Dirent[]>, rebaseSourceMaps: Map<string, RawSourceMap> | undefined, loadPaths: Iterable<string>);
+    canonicalize(url: string, options: {
+        fromImport: boolean;
+    }): URL | null;
+}
+/**
+ * Workaround for Sass not calling instance methods with `this`.
+ * The `canonicalize` and `load` methods will be bound to the class instance.
+ * @param importer A Sass importer to bind.
+ * @returns The bound Sass importer.
+ */
+export declare function sassBindWorkaround<T extends Importer>(importer: T): T;
+export {};

package/src/sass/rebasing-importer.js

@@ -0,0 +1,281 @@
+"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.sassBindWorkaround = exports.LoadPathsUrlRebasingImporter = exports.ModuleUrlRebasingImporter = exports.RelativeUrlRebasingImporter = void 0;
+const magic_string_1 = __importDefault(require("magic-string"));
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("node:path");
+const node_url_1 = require("node:url");
+/**
+ * A Regular expression used to find all `url()` functions within a stylesheet.
+ * From packages/angular_devkit/build_angular/src/webpack/plugins/postcss-cli-resources.ts
+ */
+const URL_REGEXP = /url(?:\(\s*(['"]?))(.*?)(?:\1\s*\))/g;
+/**
+ * A Sass Importer base class that provides the load logic to rebase all `url()` functions
+ * within a stylesheet. The rebasing will ensure that the URLs in the output of the Sass compiler
+ * reflect the final filesystem location of the output CSS file.
+ *
+ * This class provides the core of the rebasing functionality. To ensure that each file is processed
+ * by this importer's load implementation, the Sass compiler requires the importer's canonicalize
+ * function to return a non-null value with the resolved location of the requested stylesheet.
+ * Concrete implementations of this class must provide this canonicalize functionality for rebasing
+ * to be effective.
+ */
+class UrlRebasingImporter {
+    /**
+     * @param entryDirectory The directory of the entry stylesheet that was passed to the Sass compiler.
+     * @param rebaseSourceMaps When provided, rebased files will have an intermediate sourcemap added to the Map
+     * which can be used to generate a final sourcemap that contains original sources.
+     */
+    constructor(entryDirectory, rebaseSourceMaps) {
+        this.entryDirectory = entryDirectory;
+        this.rebaseSourceMaps = rebaseSourceMaps;
+    }
+    load(canonicalUrl) {
+        const stylesheetPath = (0, node_url_1.fileURLToPath)(canonicalUrl);
+        let contents = (0, node_fs_1.readFileSync)(stylesheetPath, 'utf-8');
+        // Rebase any URLs that are found
+        if (contents.includes('url(')) {
+            const stylesheetDirectory = (0, node_path_1.dirname)(stylesheetPath);
+            let match;
+            URL_REGEXP.lastIndex = 0;
+            let updatedContents;
+            while ((match = URL_REGEXP.exec(contents))) {
+                const originalUrl = match[2];
+                // If root-relative, absolute or protocol relative url, leave as-is
+                if (/^((?:\w+:)?\/\/|data:|chrome:|#|\/)/.test(originalUrl)) {
+                    continue;
+                }
+                const rebasedPath = (0, node_path_1.relative)(this.entryDirectory, (0, node_path_1.join)(stylesheetDirectory, originalUrl));
+                // Normalize path separators and escape characters
+                // https://developer.mozilla.org/en-US/docs/Web/CSS/url#syntax
+                const rebasedUrl = './' + rebasedPath.replace(/\\/g, '/').replace(/[()\s'"]/g, '\\$&');
+                updatedContents !== null && updatedContents !== void 0 ? updatedContents : (updatedContents = new magic_string_1.default(contents));
+                updatedContents.update(match.index, match.index + match[0].length, `url(${rebasedUrl})`);
+            }
+            if (updatedContents) {
+                contents = updatedContents.toString();
+                if (this.rebaseSourceMaps) {
+                    // Generate an intermediate source map for the rebasing changes
+                    const map = updatedContents.generateMap({
+                        hires: true,
+                        includeContent: true,
+                        source: canonicalUrl.href,
+                    });
+                    this.rebaseSourceMaps.set(canonicalUrl.href, map);
+                }
+            }
+        }
+        let syntax;
+        switch ((0, node_path_1.extname)(stylesheetPath).toLowerCase()) {
+            case 'css':
+                syntax = 'css';
+                break;
+            case 'sass':
+                syntax = 'indented';
+                break;
+            default:
+                syntax = 'scss';
+                break;
+        }
+        return {
+            contents,
+            syntax,
+            sourceMapUrl: canonicalUrl,
+        };
+    }
+}
+/**
+ * Provides the Sass importer logic to resolve relative stylesheet imports via both import and use rules
+ * and also rebase any `url()` function usage within those stylesheets. The rebasing will ensure that
+ * the URLs in the output of the Sass compiler reflect the final filesystem location of the output CSS file.
+ */
+class RelativeUrlRebasingImporter extends UrlRebasingImporter {
+    constructor(entryDirectory, directoryCache = new Map(), rebaseSourceMaps) {
+        super(entryDirectory, rebaseSourceMaps);
+        this.directoryCache = directoryCache;
+    }
+    canonicalize(url, options) {
+        return this.resolveImport(url, options.fromImport, true);
+    }
+    /**
+     * Attempts to resolve a provided URL to a stylesheet file using the Sass compiler's resolution algorithm.
+     * Based on https://github.com/sass/dart-sass/blob/44d6bb6ac72fe6b93f5bfec371a1fffb18e6b76d/lib/src/importer/utils.dart
+     * @param url The file protocol URL to resolve.
+     * @param fromImport If true, URL was from an import rule; otherwise from a use rule.
+     * @param checkDirectory If true, try checking for a directory with the base name containing an index file.
+     * @returns A full resolved URL of the stylesheet file or `null` if not found.
+     */
+    resolveImport(url, fromImport, checkDirectory) {
+        var _a;
+        let stylesheetPath;
+        try {
+            stylesheetPath = (0, node_url_1.fileURLToPath)(url);
+        }
+        catch {
+            // Only file protocol URLs are supported by this importer
+            return null;
+        }
+        const directory = (0, node_path_1.dirname)(stylesheetPath);
+        const extension = (0, node_path_1.extname)(stylesheetPath);
+        const hasStyleExtension = extension === '.scss' || extension === '.sass' || extension === '.css';
+        // Remove the style extension if present to allow adding the `.import` suffix
+        const filename = (0, node_path_1.basename)(stylesheetPath, hasStyleExtension ? extension : undefined);
+        let entries;
+        try {
+            entries = this.directoryCache.get(directory);
+            if (!entries) {
+                entries = (0, node_fs_1.readdirSync)(directory, { withFileTypes: true });
+                this.directoryCache.set(directory, entries);
+            }
+        }
+        catch {
+            return null;
+        }
+        const importPotentials = new Set();
+        const defaultPotentials = new Set();
+        if (hasStyleExtension) {
+            if (fromImport) {
+                importPotentials.add(filename + '.import' + extension);
+                importPotentials.add('_' + filename + '.import' + extension);
+            }
+            defaultPotentials.add(filename + extension);
+            defaultPotentials.add('_' + filename + extension);
+        }
+        else {
+            if (fromImport) {
+                importPotentials.add(filename + '.import.scss');
+                importPotentials.add(filename + '.import.sass');
+                importPotentials.add(filename + '.import.css');
+                importPotentials.add('_' + filename + '.import.scss');
+                importPotentials.add('_' + filename + '.import.sass');
+                importPotentials.add('_' + filename + '.import.css');
+            }
+            defaultPotentials.add(filename + '.scss');
+            defaultPotentials.add(filename + '.sass');
+            defaultPotentials.add(filename + '.css');
+            defaultPotentials.add('_' + filename + '.scss');
+            defaultPotentials.add('_' + filename + '.sass');
+            defaultPotentials.add('_' + filename + '.css');
+        }
+        const foundDefaults = [];
+        const foundImports = [];
+        let hasPotentialIndex = false;
+        for (const entry of entries) {
+            // Record if the name should be checked as a directory with an index file
+            if (checkDirectory && !hasStyleExtension && entry.name === filename && entry.isDirectory()) {
+                hasPotentialIndex = true;
+            }
+            if (!entry.isFile()) {
+                continue;
+            }
+            if (importPotentials.has(entry.name)) {
+                foundImports.push((0, node_path_1.join)(directory, entry.name));
+            }
+            if (defaultPotentials.has(entry.name)) {
+                foundDefaults.push((0, node_path_1.join)(directory, entry.name));
+            }
+        }
+        // `foundImports` will only contain elements if `options.fromImport` is true
+        const result = (_a = this.checkFound(foundImports)) !== null && _a !== void 0 ? _a : this.checkFound(foundDefaults);
+        if (result === null && hasPotentialIndex) {
+            // Check for index files using filename as a directory
+            return this.resolveImport(url + '/index', fromImport, false);
+        }
+        return result;
+    }
+    /**
+     * Checks an array of potential stylesheet files to determine if there is a valid
+     * stylesheet file. More than one discovered file may indicate an error.
+     * @param found An array of discovered stylesheet files.
+     * @returns A fully resolved URL for a stylesheet file or `null` if not found.
+     * @throws If there are ambiguous files discovered.
+     */
+    checkFound(found) {
+        if (found.length === 0) {
+            // Not found
+            return null;
+        }
+        // More than one found file may be an error
+        if (found.length > 1) {
+            // Presence of CSS files alongside a Sass file does not cause an error
+            const foundWithoutCss = found.filter((element) => (0, node_path_1.extname)(element) !== '.css');
+            // If the length is zero then there are two or more css files
+            // If the length is more than one than there are two or more sass/scss files
+            if (foundWithoutCss.length !== 1) {
+                throw new Error('Ambiguous import detected.');
+            }
+            // Return the non-CSS file (sass/scss files have priority)
+            // https://github.com/sass/dart-sass/blob/44d6bb6ac72fe6b93f5bfec371a1fffb18e6b76d/lib/src/importer/utils.dart#L44-L47
+            return (0, node_url_1.pathToFileURL)(foundWithoutCss[0]);
+        }
+        return (0, node_url_1.pathToFileURL)(found[0]);
+    }
+}
+exports.RelativeUrlRebasingImporter = RelativeUrlRebasingImporter;
+/**
+ * Provides the Sass importer logic to resolve module (npm package) stylesheet imports via both import and
+ * use rules and also rebase any `url()` function usage within those stylesheets. The rebasing will ensure that
+ * the URLs in the output of the Sass compiler reflect the final filesystem location of the output CSS file.
+ */
+class ModuleUrlRebasingImporter extends RelativeUrlRebasingImporter {
+    constructor(entryDirectory, directoryCache, rebaseSourceMaps, finder) {
+        super(entryDirectory, directoryCache, rebaseSourceMaps);
+        this.finder = finder;
+    }
+    canonicalize(url, options) {
+        if (url.startsWith('file://')) {
+            return super.canonicalize(url, options);
+        }
+        const result = this.finder(url, options);
+        return result ? super.canonicalize(result.href, options) : null;
+    }
+}
+exports.ModuleUrlRebasingImporter = ModuleUrlRebasingImporter;
+/**
+ * Provides the Sass importer logic to resolve load paths located stylesheet imports via both import and
+ * use rules and also rebase any `url()` function usage within those stylesheets. The rebasing will ensure that
+ * the URLs in the output of the Sass compiler reflect the final filesystem location of the output CSS file.
+ */
+class LoadPathsUrlRebasingImporter extends RelativeUrlRebasingImporter {
+    constructor(entryDirectory, directoryCache, rebaseSourceMaps, loadPaths) {
+        super(entryDirectory, directoryCache, rebaseSourceMaps);
+        this.loadPaths = loadPaths;
+    }
+    canonicalize(url, options) {
+        if (url.startsWith('file://')) {
+            return super.canonicalize(url, options);
+        }
+        let result = null;
+        for (const loadPath of this.loadPaths) {
+            result = super.canonicalize((0, node_url_1.pathToFileURL)((0, node_path_1.join)(loadPath, url)).href, options);
+            if (result !== null) {
+                break;
+            }
+        }
+        return result;
+    }
+}
+exports.LoadPathsUrlRebasingImporter = LoadPathsUrlRebasingImporter;
+/**
+ * Workaround for Sass not calling instance methods with `this`.
+ * The `canonicalize` and `load` methods will be bound to the class instance.
+ * @param importer A Sass importer to bind.
+ * @returns The bound Sass importer.
+ */
+function sassBindWorkaround(importer) {
+    importer.canonicalize = importer.canonicalize.bind(importer);
+    importer.load = importer.load.bind(importer);
+    return importer;
+}
+exports.sassBindWorkaround = sassBindWorkaround;

package/src/sass/sass-service.d.ts

@@ -23,12 +23,14 @@ export interface FileImporterWithRequestContextOptions extends FileImporterOptio
  * the worker which can be up to two times faster than the asynchronous variant.
  */
 export declare class SassWorkerImplementation {
+    private rebase;
     private readonly workers;
     private readonly availableWorkers;
     private readonly requests;
     private readonly workerPath;
     private idCounter;
     private nextWorkerIndex;
+    constructor(rebase?: boolean);
     /**
      * Provides information about the Sass implementation.
      * This mimics enough of the `dart-sass` value to be used with the `sass-loader`.

package/src/sass/sass-service.js

@@ -23,7 +23,8 @@ const MAX_RENDER_WORKERS = environment_options_1.maxWorkers;
  * the worker which can be up to two times faster than the asynchronous variant.
  */
 class SassWorkerImplementation {
-    constructor() {
+    constructor(rebase = false) {
+        this.rebase = rebase;
         this.workers = [];
         this.availableWorkers = [];
         this.requests = new Map();
@@ -73,8 +74,9 @@ class SassWorkerImplementation {
                 }
             }
             const callback = (error, result) => {
+                var _a;
                 if (error) {
-                    const url = error === null || error === void 0 ? void 0 : error.span.url;
+                    const url = (_a = error.span) === null || _a === void 0 ? void 0 : _a.url;
                     if (url) {
                         error.span.url = (0, node_url_1.pathToFileURL)(url);
                     }
@@ -87,12 +89,14 @@ class SassWorkerImplementation {
                 }
                 resolve(result);
             };
-            const request = this.createRequest(workerIndex, callback, importers);
+            const request = this.createRequest(workerIndex, callback, logger, importers);
             this.requests.set(request.id, request);
             this.workers[workerIndex].postMessage({
                 id: request.id,
                 source,
                 hasImporter: !!(importers === null || importers === void 0 ? void 0 : importers.length),
+                hasLogger: !!logger,
+                rebase: this.rebase,
                 options: {
                     ...serializableOptions,
                     // URL is not serializable so to convert to string here and back to URL in the worker.
@@ -122,12 +126,24 @@ class SassWorkerImplementation {
             transferList: [workerImporterPort],
         });
         worker.on('message', (response) => {
+            var _a;
             const request = this.requests.get(response.id);
             if (!request) {
                 return;
             }
             this.requests.delete(response.id);
             this.availableWorkers.push(request.workerIndex);
+            if (response.warnings && ((_a = request.logger) === null || _a === void 0 ? void 0 : _a.warn)) {
+                for (const { message, span, ...options } of response.warnings) {
+                    request.logger.warn(message, {
+                        ...options,
+                        span: span && {
+                            ...span,
+                            url: span.url ? (0, node_url_1.pathToFileURL)(span.url) : undefined,
+                        },
+                    });
+                }
+            }
             if (response.result) {
                 request.callback(undefined, {
                     ...response.result,
@@ -184,11 +200,12 @@ class SassWorkerImplementation {
         }
         return null;
     }
-    createRequest(workerIndex, callback, importers) {
+    createRequest(workerIndex, callback, logger, importers) {
         return {
             id: this.idCounter++,
             workerIndex,
             callback,
+            logger,
             importers,
         };
     }

package/src/sass/worker.js

@@ -6,51 +6,99 @@
  * 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 });
+const remapping_1 = __importDefault(require("@ampproject/remapping"));
+const node_path_1 = require("node:path");
+const node_url_1 = require("node:url");
+const node_worker_threads_1 = require("node:worker_threads");
 const sass_1 = require("sass");
-const url_1 = require("url");
-const worker_threads_1 = require("worker_threads");
-if (!worker_threads_1.parentPort || !worker_threads_1.workerData) {
+const rebasing_importer_1 = require("./rebasing-importer");
+if (!node_worker_threads_1.parentPort || !node_worker_threads_1.workerData) {
     throw new Error('Sass worker must be executed as a Worker.');
 }
 // The importer variables are used to proxy import requests to the main thread
-const { workerImporterPort, importerSignal } = worker_threads_1.workerData;
-worker_threads_1.parentPort.on('message', ({ id, hasImporter, source, options }) => {
-    if (!worker_threads_1.parentPort) {
+const { workerImporterPort, importerSignal } = node_worker_threads_1.workerData;
+node_worker_threads_1.parentPort.on('message', (message) => {
+    var _a, _b;
+    if (!node_worker_threads_1.parentPort) {
         throw new Error('"parentPort" is not defined. Sass worker must be executed as a Worker.');
     }
+    const { id, hasImporter, hasLogger, source, options, rebase } = message;
+    const entryDirectory = (0, node_path_1.dirname)(options.url);
+    let warnings;
     try {
+        const directoryCache = new Map();
+        const rebaseSourceMaps = options.sourceMap ? new Map() : undefined;
         if (hasImporter) {
             // When a custom importer function is present, the importer request must be proxied
             // back to the main thread where it can be executed.
             // This process must be synchronous from the perspective of dart-sass. The `Atomics`
             // functions combined with the shared memory `importSignal` and the Node.js
             // `receiveMessageOnPort` function are used to ensure synchronous behavior.
-            options.importers = [
-                {
-                    findFileUrl: (url, options) => {
-                        var _a;
-                        Atomics.store(importerSignal, 0, 0);
-                        workerImporterPort.postMessage({ id, url, options });
-                        Atomics.wait(importerSignal, 0, 0);
-                        const result = (_a = (0, worker_threads_1.receiveMessageOnPort)(workerImporterPort)) === null || _a === void 0 ? void 0 : _a.message;
-                        return result ? (0, url_1.pathToFileURL)(result) : null;
-                    },
+            const proxyImporter = {
+                findFileUrl: (url, options) => {
+                    var _a;
+                    Atomics.store(importerSignal, 0, 0);
+                    workerImporterPort.postMessage({ id, url, options });
+                    Atomics.wait(importerSignal, 0, 0);
+                    const result = (_a = (0, node_worker_threads_1.receiveMessageOnPort)(workerImporterPort)) === null || _a === void 0 ? void 0 : _a.message;
+                    return result ? (0, node_url_1.pathToFileURL)(result) : null;
                 },
+            };
+            options.importers = [
+                rebase
+                    ? (0, rebasing_importer_1.sassBindWorkaround)(new rebasing_importer_1.ModuleUrlRebasingImporter(entryDirectory, directoryCache, rebaseSourceMaps, proxyImporter.findFileUrl))
+                    : proxyImporter,
             ];
         }
+        if (rebase && ((_a = options.loadPaths) === null || _a === void 0 ? void 0 : _a.length)) {
+            (_b = options.importers) !== null && _b !== void 0 ? _b : (options.importers = []);
+            options.importers.push((0, rebasing_importer_1.sassBindWorkaround)(new rebasing_importer_1.LoadPathsUrlRebasingImporter(entryDirectory, directoryCache, rebaseSourceMaps, options.loadPaths)));
+            options.loadPaths = undefined;
+        }
+        let relativeImporter;
+        if (rebase) {
+            relativeImporter = (0, rebasing_importer_1.sassBindWorkaround)(new rebasing_importer_1.RelativeUrlRebasingImporter(entryDirectory, directoryCache, rebaseSourceMaps));
+        }
         // The synchronous Sass render function can be up to two times faster than the async variant
         const result = (0, sass_1.compileString)(source, {
             ...options,
             // URL is not serializable so to convert to string in the parent and back to URL here.
-            url: options.url ? (0, url_1.pathToFileURL)(options.url) : undefined,
+            url: (0, node_url_1.pathToFileURL)(options.url),
+            // The `importer` option (singular) handles relative imports
+            importer: relativeImporter,
+            logger: hasLogger
+                ? {
+                    warn(message, { deprecation, span, stack }) {
+                        warnings !== null && warnings !== void 0 ? warnings : (warnings = []);
+                        warnings.push({
+                            message,
+                            deprecation,
+                            stack,
+                            span: span && convertSourceSpan(span),
+                        });
+                    },
+                }
+                : undefined,
         });
-        worker_threads_1.parentPort.postMessage({
+        if (result.sourceMap && (rebaseSourceMaps === null || rebaseSourceMaps === void 0 ? void 0 : rebaseSourceMaps.size)) {
+            // Merge the intermediate rebasing source maps into the final Sass generated source map.
+            // Casting is required due to small but compatible differences in typings between the packages.
+            result.sourceMap = (0, remapping_1.default)(result.sourceMap, 
+            // To prevent an infinite lookup loop, skip getting the source when the rebasing source map
+            // is referencing its original self.
+            (file, context) => (file !== context.importer ? rebaseSourceMaps.get(file) : null));
+        }
+        node_worker_threads_1.parentPort.postMessage({
             id,
+            warnings,
             result: {
                 ...result,
                 // URL is not serializable so to convert to string here and back to URL in the parent.
-                loadedUrls: result.loadedUrls.map((p) => (0, url_1.fileURLToPath)(p)),
+                loadedUrls: result.loadedUrls.map((p) => (0, node_url_1.fileURLToPath)(p)),
             },
         });
     }
@@ -58,24 +106,11 @@ worker_threads_1.parentPort.on('message', ({ id, hasImporter, source, options })
         // Needed because V8 will only serialize the message and stack properties of an Error instance.
         if (error instanceof sass_1.Exception) {
             const { span, message, stack, sassMessage, sassStack } = error;
-            worker_threads_1.parentPort.postMessage({
+            node_worker_threads_1.parentPort.postMessage({
                 id,
+                warnings,
                 error: {
-                    span: {
-                        text: span.text,
-                        context: span.context,
-                        end: {
-                            column: span.end.column,
-                            offset: span.end.offset,
-                            line: span.end.line,
-                        },
-                        start: {
-                            column: span.start.column,
-                            offset: span.start.offset,
-                            line: span.start.line,
-                        },
-                        url: span.url ? (0, url_1.fileURLToPath)(span.url) : undefined,
-                    },
+                    span: convertSourceSpan(span),
                     message,
                     stack,
                     sassMessage,
@@ -85,10 +120,40 @@ worker_threads_1.parentPort.on('message', ({ id, hasImporter, source, options })
         }
         else if (error instanceof Error) {
             const { message, stack } = error;
-            worker_threads_1.parentPort.postMessage({ id, error: { message, stack } });
+            node_worker_threads_1.parentPort.postMessage({ id, warnings, error: { message, stack } });
         }
         else {
-            worker_threads_1.parentPort.postMessage({ id, error: { message: 'An unknown error has occurred.' } });
+            node_worker_threads_1.parentPort.postMessage({
+                id,
+                warnings,
+                error: { message: 'An unknown error has occurred.' },
+            });
         }
     }
 });
+/**
+ * Converts a Sass SourceSpan object into a serializable form.
+ * The SourceSpan object contains a URL property which must be converted into a string.
+ * Also, most of the interface's properties are get accessors and are not automatically
+ * serialized when sent back from the worker.
+ *
+ * @param span The Sass SourceSpan object to convert.
+ * @returns A serializable form of the SourceSpan object.
+ */
+function convertSourceSpan(span) {
+    return {
+        text: span.text,
+        context: span.context,
+        end: {
+            column: span.end.column,
+            offset: span.end.offset,
+            line: span.end.line,
+        },
+        start: {
+            column: span.start.column,
+            offset: span.start.offset,
+            line: span.start.line,
+        },
+        url: span.url ? (0, node_url_1.fileURLToPath)(span.url) : undefined,
+    };
+}

package/src/webpack/configs/common.js

@@ -86,7 +86,7 @@ async function getCommonConfig(wco) {
     if (isPlatformServer) {
         // Fixes Critical dependency: the request of a dependency is an expression
         extraPlugins.push(new webpack_2.ContextReplacementPlugin(/@?hapi|express[\\/]/));
-        if (Array.isArray(entryPoints['main'])) {
+        if ((0, helpers_1.isPlatformServerInstalled)(wco.root) && Array.isArray(entryPoints['main'])) {
             // This import must come before any imports (direct or transitive) that rely on DOM built-ins being
             // available, such as `@angular/elements`.
             entryPoints['main'].unshift('@angular/platform-server/init');

package/src/webpack/configs/styles.js

@@ -48,7 +48,7 @@ const helpers_1 = require("../utils/helpers");
 // eslint-disable-next-line max-lines-per-function
 function getStylesConfig(wco) {
     var _a, _b, _c;
-    const { root, buildOptions } = wco;
+    const { root, buildOptions, logger } = wco;
     const extraPlugins = [];
     extraPlugins.push(new plugins_1.AnyComponentStyleBudgetChecker(buildOptions.budgets));
     const cssSourceMap = buildOptions.sourceMap.styles;
@@ -93,7 +93,7 @@ function getStylesConfig(wco) {
         }
         catch {
             const relativeTailwindConfigPath = path.relative(wco.root, tailwindConfigPath);
-            wco.logger.warn(`Tailwind CSS configuration file found (${relativeTailwindConfigPath})` +
+            logger.warn(`Tailwind CSS configuration file found (${relativeTailwindConfigPath})` +
                 ` but the 'tailwindcss' package is not installed.` +
                 ` To enable Tailwind CSS, please install the 'tailwindcss' package.`);
         }
@@ -131,14 +131,21 @@ function getStylesConfig(wco) {
         optionGenerator.config = false;
         return optionGenerator;
     };
-    // load component css as raw strings
-    const componentsSourceMap = !!(cssSourceMap &&
-        // Never use component css sourcemap when style optimizations are on.
-        // It will just increase bundle size without offering good debug experience.
-        !buildOptions.optimization.styles.minify &&
-        // Inline all sourcemap types except hidden ones, which are the same as no sourcemaps
-        // for component css.
-        !buildOptions.sourceMap.hidden);
+    let componentsSourceMap = !!cssSourceMap;
+    if (cssSourceMap) {
+        if (buildOptions.optimization.styles.minify) {
+            // Never use component css sourcemap when style optimizations are on.
+            // It will just increase bundle size without offering good debug experience.
+            logger.warn('Components styles sourcemaps are not generated when styles optimization is enabled.');
+            componentsSourceMap = false;
+        }
+        else if (buildOptions.sourceMap.hidden) {
+            // Inline all sourcemap types except hidden ones, which are the same as no sourcemaps
+            // for component css.
+            logger.warn('Components styles sourcemaps are not generated when sourcemaps are hidden.');
+            componentsSourceMap = false;
+        }
+    }
     // extract global css from js files into own css file.
     extraPlugins.push(new mini_css_extract_plugin_1.default({ filename: `[name]${hashFormat.extract}.css` }));
     if (!buildOptions.hmr) {

package/src/webpack/utils/helpers.d.ts

@@ -33,3 +33,8 @@ export declare function globalScriptsByBundleName(scripts: ScriptElement[]): {
 }[];
 export declare function assetPatterns(root: string, assets: AssetPatternClass[]): ObjectPattern[];
 export declare function getStatsOptions(verbose?: boolean): WebpackStatsOptions;
+/**
+ * @param root the workspace root
+ * @returns `true` when `@angular/platform-server` is installed.
+ */
+export declare function isPlatformServerInstalled(root: string): boolean;

package/src/webpack/utils/helpers.js

@@ -33,7 +33,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStatsOptions = exports.assetPatterns = exports.globalScriptsByBundleName = exports.getCacheSettings = exports.normalizeGlobalStyles = exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
+exports.isPlatformServerInstalled = exports.getStatsOptions = exports.assetPatterns = exports.globalScriptsByBundleName = exports.getCacheSettings = exports.normalizeGlobalStyles = exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
 const crypto_1 = require("crypto");
 const glob_1 = __importDefault(require("glob"));
 const path = __importStar(require("path"));
@@ -278,3 +278,17 @@ function getStatsOptions(verbose = false) {
         : webpackOutputOptions;
 }
 exports.getStatsOptions = getStatsOptions;
+/**
+ * @param root the workspace root
+ * @returns `true` when `@angular/platform-server` is installed.
+ */
+function isPlatformServerInstalled(root) {
+    try {
+        require.resolve('@angular/platform-server', { paths: [root] });
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+exports.isPlatformServerInstalled = isPlatformServerInstalled;