@angular-devkit/build-angular 15.0.0-next.5 → 15.0.0-next.6

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "15.0.0-next.5",
+  "version": "15.0.0-next.6",
   "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-next.5",
-    "@angular-devkit/build-webpack": "0.1500.0-next.5",
-    "@angular-devkit/core": "15.0.0-next.5",
+    "@angular-devkit/architect": "0.1500.0-next.6",
+    "@angular-devkit/build-webpack": "0.1500.0-next.6",
+    "@angular-devkit/core": "15.0.0-next.6",
     "@babel/core": "7.19.3",
     "@babel/generator": "7.19.5",
     "@babel/helper-annotate-as-pure": "7.18.6",
@@ -20,13 +20,13 @@
     "@babel/runtime": "7.19.4",
     "@babel/template": "7.18.10",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "15.0.0-next.5",
+    "@ngtools/webpack": "15.0.0-next.6",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.12",
     "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "^4.9.1",
-    "cacache": "16.1.3",
+    "cacache": "17.0.0",
     "chokidar": "3.5.3",
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.16",
@@ -47,10 +47,9 @@
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "6.0.1",
     "piscina": "3.2.0",
-    "postcss": "8.4.17",
-    "postcss-import": "15.0.0",
+    "postcss": "8.4.18",
     "postcss-loader": "7.0.1",
-    "regenerator-runtime": "0.13.9",
+    "regenerator-runtime": "0.13.10",
     "resolve-url-loader": "5.0.0",
     "rxjs": "6.6.7",
     "sass": "1.55.0",
@@ -74,6 +73,7 @@
   "peerDependencies": {
     "@angular/compiler-cli": "^15.0.0-next",
     "@angular/localize": "^15.0.0-next",
+    "@angular/platform-server": "^15.0.0-next",
     "@angular/service-worker": "^15.0.0-next",
     "karma": "^6.3.0",
     "ng-packagr": "^15.0.0-next",
@@ -85,6 +85,9 @@
     "@angular/localize": {
       "optional": true
     },
+    "@angular/platform-server": {
+      "optional": true
+    },
     "@angular/service-worker": {
       "optional": true
     },

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

@@ -10,7 +10,7 @@ import ts from 'typescript';
 import { BundleStylesheetOptions } from './stylesheets';
 export declare class SourceFileCache extends Map<string, ts.SourceFile> {
     readonly modifiedFiles: Set<string>;
-    readonly babelFileCache: Map<string, string>;
+    readonly babelFileCache: Map<string, Uint8Array>;
     invalidate(files: Iterable<string>): void;
 }
 export interface CompilerPluginOptions {

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

@@ -349,7 +349,8 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 // would need to be added to the key as well.
                 let contents = babelDataCache.get(data);
                 if (contents === undefined) {
-                    contents = await transformWithBabel(args.path, data, pluginOptions);
+                    const transformedData = await transformWithBabel(args.path, data, pluginOptions);
+                    contents = Buffer.from(transformedData, 'utf-8');
                     babelDataCache.set(data, contents);
                 }
                 return {
@@ -366,7 +367,8 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 let contents = (_a = pluginOptions.sourceFileCache) === null || _a === void 0 ? void 0 : _a.babelFileCache.get(args.path);
                 if (contents === undefined) {
                     const data = await fs_1.promises.readFile(args.path, 'utf-8');
-                    contents = await transformWithBabel(args.path, data, pluginOptions);
+                    const transformedData = await transformWithBabel(args.path, data, pluginOptions);
+                    contents = Buffer.from(transformedData, 'utf-8');
                     (_b = pluginOptions.sourceFileCache) === null || _b === void 0 ? void 0 : _b.babelFileCache.set(args.path, contents);
                 }
                 return {

package/src/builders/karma/index.d.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { BuilderContext, BuilderOutput } from '@angular-devkit/architect';
-import { ConfigOptions } from 'karma';
+import type { ConfigOptions } from 'karma';
 import { Observable } from 'rxjs';
 import { Configuration } from 'webpack';
 import { ExecutionTransformer } from '../../transforms';

package/src/builders/karma/index.js

@@ -33,7 +33,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.execute = void 0;
 const architect_1 = require("@angular-devkit/architect");
 const core_1 = require("@angular-devkit/core");
-const karma_1 = require("karma");
 const module_1 = require("module");
 const path = __importStar(require("path"));
 const rxjs_1 = require("rxjs");
@@ -91,7 +90,7 @@ function execute(options, context, transforms = {}) {
         }
         const karmaOptions = options.karmaConfig
             ? {}
-            : getBuiltInKarmaConfig(context.workspaceRoot, projectName);
+            : getBuiltInKarmaConfig(karma, context.workspaceRoot, projectName);
         karmaOptions.singleRun = singleRun;
         // Convert browsers from a string to an array
         if (options.browsers) {
@@ -130,7 +129,7 @@ function execute(options, context, transforms = {}) {
             webpackConfig,
             logger: context.logger,
         };
-        const parsedKarmaConfig = await karma_1.config.parseConfig(options.karmaConfig && path.resolve(context.workspaceRoot, options.karmaConfig), transforms.karmaOptions ? transforms.karmaOptions(karmaOptions) : karmaOptions, { promiseConfig: true, throwErrors: true });
+        const parsedKarmaConfig = await karma.config.parseConfig(options.karmaConfig && path.resolve(context.workspaceRoot, options.karmaConfig), transforms.karmaOptions ? transforms.karmaOptions(karmaOptions) : karmaOptions, { promiseConfig: true, throwErrors: true });
         return [karma, parsedKarmaConfig];
     }), (0, operators_1.switchMap)(([karma, karmaConfig]) => new rxjs_1.Observable((subscriber) => {
         var _a, _b, _c;
@@ -154,7 +153,7 @@ function execute(options, context, transforms = {}) {
     })), (0, operators_1.defaultIfEmpty)({ success: false }));
 }
 exports.execute = execute;
-function getBuiltInKarmaConfig(workspaceRoot, projectName) {
+function getBuiltInKarmaConfig(karma, workspaceRoot, projectName) {
     let coverageFolderName = projectName.charAt(0) === '@' ? projectName.slice(1) : projectName;
     if (/[A-Z]/.test(coverageFolderName)) {
         coverageFolderName = core_1.strings.dasherize(coverageFolderName);
@@ -184,7 +183,7 @@ function getBuiltInKarmaConfig(workspaceRoot, projectName) {
         reporters: ['progress', 'kjhtml'],
         port: 9876,
         colors: true,
-        logLevel: karma_1.constants.LOG_INFO,
+        logLevel: karma.constants.LOG_INFO,
         autoWatch: true,
         browsers: ['Chrome'],
         restartOnFileChange: true,

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

@@ -5,7 +5,17 @@
  * 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 { CompileResult, StringOptionsWithImporter, StringOptionsWithoutImporter } from 'sass';
+import { CompileResult, FileImporter, StringOptionsWithImporter, StringOptionsWithoutImporter } from 'sass';
+declare type FileImporterOptions = Parameters<FileImporter['findFileUrl']>[1];
+export interface FileImporterWithRequestContextOptions extends FileImporterOptions {
+    /**
+     * This is a custom option and is required as SASS does not provide context from which the file is being resolved.
+     * This breaks Yarn PNP as transitive deps cannot be resolved from the workspace root.
+     *
+     * Workaround until https://github.com/sass/sass/issues/3247 is addressed.
+     */
+    previousResolvedModules?: Set<string>;
+}
 /**
  * A Sass renderer implementation that provides an interface that can be used by Webpack's
  * `sass-loader`. The implementation uses a Worker thread to perform the Sass rendering
@@ -45,3 +55,4 @@ export declare class SassWorkerImplementation {
     private createRequest;
     private isImporter;
 }
+export {};

package/src/sass/sass-service.js

@@ -8,9 +8,9 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SassWorkerImplementation = void 0;
-const path_1 = require("path");
-const url_1 = require("url");
-const worker_threads_1 = require("worker_threads");
+const node_path_1 = require("node:path");
+const node_url_1 = require("node:url");
+const node_worker_threads_1 = require("node:worker_threads");
 const environment_options_1 = require("../utils/environment-options");
 /**
  * The maximum number of Workers that will be created to execute render requests.
@@ -27,7 +27,7 @@ class SassWorkerImplementation {
         this.workers = [];
         this.availableWorkers = [];
         this.requests = new Map();
-        this.workerPath = (0, path_1.join)(__dirname, './worker.js');
+        this.workerPath = (0, node_path_1.join)(__dirname, './worker.js');
         this.idCounter = 1;
         this.nextWorkerIndex = 0;
     }
@@ -76,7 +76,7 @@ class SassWorkerImplementation {
                 if (error) {
                     const url = error === null || error === void 0 ? void 0 : error.span.url;
                     if (url) {
-                        error.span.url = (0, url_1.pathToFileURL)(url);
+                        error.span.url = (0, node_url_1.pathToFileURL)(url);
                     }
                     reject(error);
                     return;
@@ -96,7 +96,7 @@ class SassWorkerImplementation {
                 options: {
                     ...serializableOptions,
                     // URL is not serializable so to convert to string here and back to URL in the worker.
-                    url: url ? (0, url_1.fileURLToPath)(url) : undefined,
+                    url: url ? (0, node_url_1.fileURLToPath)(url) : undefined,
                 },
             });
         });
@@ -115,9 +115,9 @@ class SassWorkerImplementation {
         this.requests.clear();
     }
     createWorker() {
-        const { port1: mainImporterPort, port2: workerImporterPort } = new worker_threads_1.MessageChannel();
+        const { port1: mainImporterPort, port2: workerImporterPort } = new node_worker_threads_1.MessageChannel();
         const importerSignal = new Int32Array(new SharedArrayBuffer(4));
-        const worker = new worker_threads_1.Worker(this.workerPath, {
+        const worker = new node_worker_threads_1.Worker(this.workerPath, {
             workerData: { workerImporterPort, importerSignal },
             transferList: [workerImporterPort],
         });
@@ -132,7 +132,7 @@ class SassWorkerImplementation {
                 request.callback(undefined, {
                     ...response.result,
                     // URL is not serializable so in the worker we convert to string and here back to URL.
-                    loadedUrls: response.result.loadedUrls.map((p) => (0, url_1.pathToFileURL)(p)),
+                    loadedUrls: response.result.loadedUrls.map((p) => (0, node_url_1.pathToFileURL)(p)),
                 });
             }
             else {
@@ -147,8 +147,16 @@ class SassWorkerImplementation {
                 Atomics.notify(importerSignal, 0);
                 return;
             }
-            this.processImporters(request.importers, url, options)
+            this.processImporters(request.importers, url, {
+                ...options,
+                previousResolvedModules: request.previousResolvedModules,
+            })
                 .then((result) => {
+                var _a;
+                if (result) {
+                    (_a = request.previousResolvedModules) !== null && _a !== void 0 ? _a : (request.previousResolvedModules = new Set());
+                    request.previousResolvedModules.add((0, node_path_1.dirname)(result));
+                }
                 mainImporterPort.postMessage(result);
             })
                 .catch((error) => {
@@ -171,7 +179,7 @@ class SassWorkerImplementation {
             // File importer (Can be sync or aync).
             const result = await importer.findFileUrl(url, options);
             if (result) {
-                return (0, url_1.fileURLToPath)(result);
+                return (0, node_url_1.fileURLToPath)(result);
             }
         }
         return null;

package/src/webpack/configs/styles.js

@@ -34,10 +34,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStylesConfig = void 0;
-const fs = __importStar(require("fs"));
 const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
-const path = __importStar(require("path"));
-const url_1 = require("url");
+const fs = __importStar(require("node:fs"));
+const path = __importStar(require("node:path"));
+const node_url_1 = require("node:url");
 const sass_service_1 = require("../../sass/sass-service");
 const sass_service_legacy_1 = require("../../sass/sass-service-legacy");
 const environment_options_1 = require("../../utils/environment-options");
@@ -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, projectRoot, buildOptions } = wco;
+    const { root, buildOptions } = wco;
     const extraPlugins = [];
     extraPlugins.push(new plugins_1.AnyComponentStyleBudgetChecker(buildOptions.budgets));
     const cssSourceMap = buildOptions.sourceMap.styles;
@@ -101,10 +101,8 @@ function getStylesConfig(wco) {
             extraPostcssPlugins.push(require(tailwindPackagePath)({ config: tailwindConfigPath }));
         }
     }
-    const postcssImports = require('postcss-import');
     const autoprefixer = require('autoprefixer');
     const postcssOptionsCreator = (inlineSourcemaps, extracted) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const optionGenerator = (loader) => ({
             map: inlineSourcemaps
                 ? {
@@ -113,20 +111,6 @@ function getStylesConfig(wco) {
                 }
                 : undefined,
             plugins: [
-                postcssImports({
-                    load: (filename) => {
-                        return new Promise((resolve, reject) => {
-                            loader.fs.readFile(filename, (err, data) => {
-                                if (err) {
-                                    reject(err);
-                                    return;
-                                }
-                                const content = data.toString();
-                                resolve(content);
-                            });
-                        });
-                    },
-                }),
                 (0, plugins_1.PostcssCliResources)({
                     baseHref: buildOptions.baseHref,
                     deployUrl: buildOptions.deployUrl,
@@ -165,6 +149,16 @@ function getStylesConfig(wco) {
     const postCss = require('postcss');
     const postCssLoaderPath = require.resolve('postcss-loader');
     const componentStyleLoaders = [
+        {
+            loader: require.resolve('css-loader'),
+            options: {
+                url: false,
+                sourceMap: componentsSourceMap,
+                importLoaders: 1,
+                exportType: 'string',
+                esModule: false,
+            },
+        },
         {
             loader: postCssLoaderPath,
             options: {
@@ -182,6 +176,7 @@ function getStylesConfig(wco) {
             options: {
                 url: false,
                 sourceMap: !!cssSourceMap,
+                importLoaders: 1,
             },
         },
         {
@@ -261,7 +256,6 @@ function getStylesConfig(wco) {
                             // Component styles are all styles except defined global styles
                             {
                                 use: componentStyleLoaders,
-                                type: 'asset/source',
                                 resourceQuery: /\?ngResource/,
                             },
                         ],
@@ -370,28 +364,41 @@ function getSassResolutionImporter(loaderContext, root, preserveSymlinks) {
         mainFiles: ['_index', 'index', '...'],
     });
     return {
-        findFileUrl: async (url, { fromImport }) => {
+        findFileUrl: async (url, { fromImport, previousResolvedModules }) => {
             if (url.charAt(0) === '.') {
                 // Let Sass handle relative imports.
                 return null;
             }
-            let file;
             const resolve = fromImport ? resolveImport : resolveModule;
-            try {
-                file = await resolve(root, url);
-            }
-            catch {
-                // Try to resolve a partial file
-                // @use '@material/button/button' as mdc-button;
-                // `@material/button/button` -> `@material/button/_button`
-                const lastSlashIndex = url.lastIndexOf('/');
-                const underscoreIndex = lastSlashIndex + 1;
-                if (underscoreIndex > 0 && url.charAt(underscoreIndex) !== '_') {
-                    const partialFileUrl = `${url.slice(0, underscoreIndex)}_${url.slice(underscoreIndex)}`;
-                    file = await resolve(root, partialFileUrl).catch(() => undefined);
+            // Try to resolve from root of workspace
+            let result = await tryResolve(resolve, root, url);
+            // Try to resolve from previously resolved modules.
+            if (!result && previousResolvedModules) {
+                for (const path of previousResolvedModules) {
+                    result = await tryResolve(resolve, path, url);
+                    if (result) {
+                        break;
+                    }
                 }
             }
-            return file ? (0, url_1.pathToFileURL)(file) : null;
+            return result ? (0, node_url_1.pathToFileURL)(result) : null;
         },
     };
 }
+async function tryResolve(resolve, root, url) {
+    try {
+        return await resolve(root, url);
+    }
+    catch {
+        // Try to resolve a partial file
+        // @use '@material/button/button' as mdc-button;
+        // `@material/button/button` -> `@material/button/_button`
+        const lastSlashIndex = url.lastIndexOf('/');
+        const underscoreIndex = lastSlashIndex + 1;
+        if (underscoreIndex > 0 && url.charAt(underscoreIndex) !== '_') {
+            const partialFileUrl = `${url.slice(0, underscoreIndex)}_${url.slice(underscoreIndex)}`;
+            return resolve(root, partialFileUrl).catch(() => undefined);
+        }
+    }
+    return undefined;
+}