@angular-devkit/build-angular 14.2.0-next.1 → 14.2.0

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "14.2.0-next.1",
+  "version": "14.2.0",
   "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.1402.0-next.1",
-    "@angular-devkit/build-webpack": "0.1402.0-next.1",
-    "@angular-devkit/core": "14.2.0-next.1",
+    "@angular-devkit/architect": "0.1402.0",
+    "@angular-devkit/build-webpack": "0.1402.0",
+    "@angular-devkit/core": "14.2.0",
     "@babel/core": "7.18.10",
     "@babel/generator": "7.18.12",
     "@babel/helper-annotate-as-pure": "7.18.6",
@@ -20,16 +20,16 @@
     "@babel/runtime": "7.18.9",
     "@babel/template": "7.18.10",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "14.2.0-next.1",
+    "@ngtools/webpack": "14.2.0",
     "ansi-colors": "4.1.3",
     "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "^4.9.1",
-    "cacache": "16.1.1",
+    "cacache": "16.1.2",
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.16",
     "css-loader": "6.7.1",
-    "esbuild-wasm": "0.15.1",
+    "esbuild-wasm": "0.15.5",
     "glob": "8.0.3",
     "https-proxy-agent": "5.0.1",
     "inquirer": "8.2.4",
@@ -48,7 +48,7 @@
     "postcss": "8.4.16",
     "postcss-import": "14.1.0",
     "postcss-loader": "7.0.1",
-    "postcss-preset-env": "7.7.2",
+    "postcss-preset-env": "7.8.0",
     "regenerator-runtime": "0.13.9",
     "resolve-url-loader": "5.0.0",
     "rxjs": "6.6.7",
@@ -57,7 +57,7 @@
     "semver": "7.3.7",
     "source-map-loader": "4.0.0",
     "source-map-support": "0.5.21",
-    "stylus": "0.58.1",
+    "stylus": "0.59.0",
     "stylus-loader": "7.0.0",
     "terser": "5.14.2",
     "text-table": "0.2.0",
@@ -70,7 +70,7 @@
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.15.1"
+    "esbuild": "0.15.5"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^14.0.0 || ^14.0.0-next || ^14.1.0-next",
@@ -80,7 +80,7 @@
     "ng-packagr": "^14.0.0 || ^14.0.0-next || ^14.1.0-next",
     "protractor": "^7.0.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",
-    "typescript": ">=4.6.2 <4.8"
+    "typescript": ">=4.6.2 <4.9"
   },
   "peerDependenciesMeta": {
     "@angular/localize": {

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

@@ -208,7 +208,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 // Create the Angular specific program that contains the Angular compiler
                 const angularProgram = new compilerCli.NgtscProgram(rootNames, compilerOptions, host);
                 const angularCompiler = angularProgram.compiler;
-                const { ignoreForDiagnostics, ignoreForEmit } = angularCompiler;
+                const { ignoreForDiagnostics } = angularCompiler;
                 const typeScriptProgram = angularProgram.getTsProgram();
                 const builder = typescript_1.default.createAbstractBuilder(typeScriptProgram, host);
                 await angularCompiler.analyzeAsync();

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

@@ -57,7 +57,7 @@ const stylesheets_1 = require("./stylesheets");
  */
 // eslint-disable-next-line max-lines-per-function
 async function buildEsbuildBrowser(options, context) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     const startTime = Date.now();
     // Only AOT is currently supported
     if (options.aot !== true) {
@@ -86,21 +86,28 @@ async function buildEsbuildBrowser(options, context) {
     }
     // Create reverse lookup used during index HTML generation
     const entryPointNameLookup = new Map(Object.entries(entryPoints).map(([name, filePath]) => [path.relative(workspaceRoot, filePath), name]));
-    // Execute esbuild
-    const result = await bundleCode(workspaceRoot, entryPoints, outputNames, options, optimizationOptions, sourcemapOptions, tsconfig);
+    const [codeResults, styleResults] = await Promise.all([
+        // Execute esbuild to bundle the application code
+        bundleCode(workspaceRoot, entryPoints, outputNames, options, optimizationOptions, sourcemapOptions, tsconfig),
+        // Execute esbuild to bundle the global stylesheets
+        bundleGlobalStylesheets(workspaceRoot, outputNames, options, optimizationOptions, sourcemapOptions),
+    ]);
     // Log all warnings and errors generated during bundling
-    await (0, esbuild_1.logMessages)(context, result);
+    await (0, esbuild_1.logMessages)(context, {
+        errors: [...codeResults.errors, ...styleResults.errors],
+        warnings: [...codeResults.warnings, ...styleResults.warnings],
+    });
     // Return if the bundling failed to generate output files or there are errors
-    if (!result.outputFiles || result.errors.length) {
+    if (!codeResults.outputFiles || codeResults.errors.length) {
         return { success: false };
     }
-    // Structure the bundling output files
+    // Structure the code bundling output files
     const initialFiles = [];
     const outputFiles = [];
-    for (const outputFile of result.outputFiles) {
+    for (const outputFile of codeResults.outputFiles) {
         // Entries in the metafile are relative to the `absWorkingDir` option which is set to the workspaceRoot
         const relativeFilePath = path.relative(workspaceRoot, outputFile.path);
-        const entryPoint = (_c = (_b = result.metafile) === null || _b === void 0 ? void 0 : _b.outputs[relativeFilePath]) === null || _c === void 0 ? void 0 : _c.entryPoint;
+        const entryPoint = (_c = (_b = codeResults.metafile) === null || _b === void 0 ? void 0 : _b.outputs[relativeFilePath]) === null || _c === void 0 ? void 0 : _c.entryPoint;
         outputFile.path = relativeFilePath;
         if (entryPoint) {
             // An entryPoint value indicates an initial file
@@ -112,6 +119,13 @@ async function buildEsbuildBrowser(options, context) {
         }
         outputFiles.push(outputFile);
     }
+    // Add global stylesheets output files
+    outputFiles.push(...styleResults.outputFiles);
+    initialFiles.push(...styleResults.initialFiles);
+    // Return if the global stylesheet bundling has errors
+    if (styleResults.errors.length) {
+        return { success: false };
+    }
     // Create output directory if needed
     try {
         await fs_1.promises.mkdir(outputPath, { recursive: true });
@@ -121,56 +135,11 @@ async function buildEsbuildBrowser(options, context) {
         context.logger.error('Unable to create output directory: ' + e.message);
         return { success: false };
     }
-    // Process global stylesheets
-    if (options.styles) {
-        // resolveGlobalStyles is temporarily reused from the Webpack builder code
-        const { entryPoints: stylesheetEntrypoints, noInjectNames } = (0, configs_1.resolveGlobalStyles)(options.styles, workspaceRoot, 
-        // preserveSymlinks is always true here to allow the bundler to handle the option
-        true, 
-        // skipResolution to leverage the bundler's more comprehensive resolution
-        true);
-        for (const [name, files] of Object.entries(stylesheetEntrypoints)) {
-            const virtualEntryData = files
-                .map((file) => `@import '${file.replace(/\\/g, '/')}';`)
-                .join('\n');
-            const sheetResult = await (0, stylesheets_1.bundleStylesheetText)(virtualEntryData, { virtualName: `angular:style/global;${name}`, resolvePath: workspaceRoot }, {
-                workspaceRoot,
-                optimization: !!optimizationOptions.styles.minify,
-                sourcemap: !!sourcemapOptions.styles && (sourcemapOptions.hidden ? 'external' : true),
-                outputNames: noInjectNames.includes(name) ? { media: outputNames.media } : outputNames,
-                includePaths: (_e = options.stylePreprocessorOptions) === null || _e === void 0 ? void 0 : _e.includePaths,
-                preserveSymlinks: options.preserveSymlinks,
-                externalDependencies: options.externalDependencies,
-            });
-            await (0, esbuild_1.logMessages)(context, sheetResult);
-            if (!sheetResult.path) {
-                // Failed to process the stylesheet
-                assert.ok(sheetResult.errors.length, `Global stylesheet processing for '${name}' failed with no errors.`);
-                return { success: false };
-            }
-            // The virtual stylesheets will be named `stdin` by esbuild. This must be replaced
-            // with the actual name of the global style and the leading directory separator must
-            // also be removed to make the path relative.
-            const sheetPath = sheetResult.path.replace('stdin', name);
-            outputFiles.push(createOutputFileFromText(sheetPath, sheetResult.contents));
-            if (sheetResult.map) {
-                outputFiles.push(createOutputFileFromText(sheetPath + '.map', sheetResult.map));
-            }
-            if (!noInjectNames.includes(name)) {
-                initialFiles.push({
-                    file: sheetPath,
-                    name,
-                    extension: '.css',
-                });
-            }
-            outputFiles.push(...sheetResult.resourceFiles);
-        }
-    }
     // Generate index HTML file
     if (options.index) {
         const entrypoints = (0, package_chunk_sort_1.generateEntryPoints)({
-            scripts: (_f = options.scripts) !== null && _f !== void 0 ? _f : [],
-            styles: (_g = options.styles) !== null && _g !== void 0 ? _g : [],
+            scripts: (_e = options.scripts) !== null && _e !== void 0 ? _e : [],
+            styles: (_f = options.styles) !== null && _f !== void 0 ? _f : [],
         });
         // Create an index HTML generator that reads from the in-memory output files
         const indexHtmlGenerator = new index_html_generator_1.IndexHtmlGenerator({
@@ -301,4 +270,57 @@ async function bundleCode(workspaceRoot, entryPoints, outputNames, options, opti
         },
     });
 }
+async function bundleGlobalStylesheets(workspaceRoot, outputNames, options, optimizationOptions, sourcemapOptions) {
+    var _a;
+    const outputFiles = [];
+    const initialFiles = [];
+    const errors = [];
+    const warnings = [];
+    // resolveGlobalStyles is temporarily reused from the Webpack builder code
+    const { entryPoints: stylesheetEntrypoints, noInjectNames } = (0, configs_1.resolveGlobalStyles)(options.styles || [], workspaceRoot, 
+    // preserveSymlinks is always true here to allow the bundler to handle the option
+    true, 
+    // skipResolution to leverage the bundler's more comprehensive resolution
+    true);
+    for (const [name, files] of Object.entries(stylesheetEntrypoints)) {
+        const virtualEntryData = files
+            .map((file) => `@import '${file.replace(/\\/g, '/')}';`)
+            .join('\n');
+        const sheetResult = await (0, stylesheets_1.bundleStylesheetText)(virtualEntryData, { virtualName: `angular:style/global;${name}`, resolvePath: workspaceRoot }, {
+            workspaceRoot,
+            optimization: !!optimizationOptions.styles.minify,
+            sourcemap: !!sourcemapOptions.styles && (sourcemapOptions.hidden ? 'external' : true),
+            outputNames: noInjectNames.includes(name) ? { media: outputNames.media } : outputNames,
+            includePaths: (_a = options.stylePreprocessorOptions) === null || _a === void 0 ? void 0 : _a.includePaths,
+            preserveSymlinks: options.preserveSymlinks,
+            externalDependencies: options.externalDependencies,
+        });
+        errors.push(...sheetResult.errors);
+        warnings.push(...sheetResult.warnings);
+        if (!sheetResult.path) {
+            // Failed to process the stylesheet
+            assert.ok(sheetResult.errors.length, `Global stylesheet processing for '${name}' failed with no errors.`);
+            continue;
+        }
+        // The virtual stylesheets will be named `stdin` by esbuild. This must be replaced
+        // with the actual name of the global style and the leading directory separator must
+        // also be removed to make the path relative.
+        const sheetPath = sheetResult.path.replace('stdin', name);
+        let sheetContents = sheetResult.contents;
+        if (sheetResult.map) {
+            outputFiles.push(createOutputFileFromText(sheetPath + '.map', sheetResult.map));
+            sheetContents = sheetContents.replace('sourceMappingURL=stdin.css.map', `sourceMappingURL=${name}.css.map`);
+        }
+        outputFiles.push(createOutputFileFromText(sheetPath, sheetContents));
+        if (!noInjectNames.includes(name)) {
+            initialFiles.push({
+                file: sheetPath,
+                name,
+                extension: '.css',
+            });
+        }
+        outputFiles.push(...sheetResult.resourceFiles);
+    }
+    return { outputFiles, initialFiles, errors, warnings };
+}
 exports.default = (0, architect_1.createBuilder)(buildEsbuildBrowser);

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

@@ -37,11 +37,9 @@ function createSassPlugin(options) {
         name: 'angular-sass',
         setup(build) {
             let sass;
-            build.onStart(async () => {
-                // Lazily load Sass
-                sass = await Promise.resolve().then(() => __importStar(require('sass')));
-            });
-            build.onLoad({ filter: /\.s[ac]ss$/ }, (args) => {
+            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'))));
                 try {
                     const warnings = [];
                     // Use sync version as async version is slower.
@@ -61,7 +59,7 @@ function createSassPlugin(options) {
                     });
                     return {
                         loader: 'css',
-                        contents: `${css}\n${sourceMapToUrlComment(sourceMap)}`,
+                        contents: sourceMap ? `${css}\n${sourceMapToUrlComment(sourceMap)}` : css,
                         watchFiles: loadedUrls.map((url) => (0, url_1.fileURLToPath)(url)),
                         warnings,
                     };
@@ -87,9 +85,6 @@ function createSassPlugin(options) {
 }
 exports.createSassPlugin = createSassPlugin;
 function sourceMapToUrlComment(sourceMap) {
-    if (!sourceMap) {
-        return '';
-    }
     const urlSourceMap = Buffer.from(JSON.stringify(sourceMap), 'utf-8').toString('base64');
     return `/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${urlSourceMap} */`;
 }

package/src/webpack/plugins/postcss-cli-resources.js

@@ -131,7 +131,7 @@ function default_1(options) {
                 return;
             }
             const value = decl.value;
-            const urlRegex = /url(?:\(\s*['"]?)(.*?)(?:['"]?\s*\))/g;
+            const urlRegex = /url(?:\(\s*(['"]?))(.*?)(?:\1\s*\))/g;
             const segments = [];
             let match;
             let lastIndex = 0;
@@ -139,9 +139,8 @@ function default_1(options) {
             // We want to load it relative to the file that imports
             const inputFile = decl.source && decl.source.input.file;
             const context = (inputFile && path.dirname(inputFile)) || loader.context;
-            // eslint-disable-next-line no-cond-assign
             while ((match = urlRegex.exec(value))) {
-                const originalUrl = match[1];
+                const originalUrl = match[2];
                 let processedUrl;
                 try {
                     processedUrl = await process(originalUrl, context, resourceCache);