@nx/angular 18.1.2 → 18.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "18.1.2",
+  "version": "18.1.3",
   "private": false,
   "description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n\n- Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, and Cypress. \n\n- Generators to help scaffold code quickly (like: Micro Frontends, Libraries, both internal to your codebase and publishable to npm) \n\n- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -78,14 +78,14 @@
     "tslib": "^2.3.0",
     "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "18.1.2",
-    "@nx/js": "18.1.2",
-    "@nx/eslint": "18.1.2",
-    "@nx/webpack": "18.1.2",
-    "@nx/web": "18.1.2",
-    "@nx/workspace": "18.1.2",
+    "@nx/devkit": "18.1.3",
+    "@nx/js": "18.1.3",
+    "@nx/eslint": "18.1.3",
+    "@nx/webpack": "18.1.3",
+    "@nx/web": "18.1.3",
+    "@nx/workspace": "18.1.3",
     "piscina": "^4.2.1",
-    "@nrwl/angular": "18.1.2"
+    "@nrwl/angular": "18.1.3"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 15.0.0 < 18.0.0",

package/src/executors/utilities/ng-packagr/stylesheet-processor.d.ts

@@ -25,3 +25,25 @@ export declare class StylesheetProcessor {
     destroy(): void;
     private createRenderWorker;
 }
+/**
+ * This class is used when ng-packagr version is 17.2.0. The async `loadPostcssConfiguration` function
+ * introduced in ng-packagr 17.2.0 causes a memory leak due to multiple workers being created. We must
+ * keep this class to support any workspace that might be using ng-packagr 17.2.0 where that function
+ * need to be awaited.
+ */
+export declare class AsyncStylesheetProcessor {
+    private readonly projectBasePath;
+    private readonly basePath;
+    private readonly cssUrl?;
+    private readonly includePaths?;
+    private readonly cacheDirectory?;
+    private renderWorker;
+    constructor(projectBasePath: string, basePath: string, cssUrl?: CssUrl, includePaths?: string[], cacheDirectory?: string | false);
+    process({ filePath, content, }: {
+        filePath: string;
+        content: string;
+    }): Promise<string>;
+    /** Destory workers in pool. */
+    destroy(): void;
+    private createRenderWorker;
+}

package/src/executors/utilities/ng-packagr/stylesheet-processor.di.d.ts

@@ -1,2 +1,2 @@
-import { FactoryProvider } from 'injection-js';
+import type { FactoryProvider } from 'injection-js';
 export declare const STYLESHEET_PROCESSOR: FactoryProvider;

package/src/executors/utilities/ng-packagr/stylesheet-processor.di.js

@@ -2,9 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.STYLESHEET_PROCESSOR = void 0;
 const stylesheet_processor_di_1 = require("ng-packagr/lib/styles/stylesheet-processor.di");
+const angular_version_utils_1 = require("../angular-version-utils");
 const stylesheet_processor_1 = require("./stylesheet-processor");
 exports.STYLESHEET_PROCESSOR = {
     provide: stylesheet_processor_di_1.STYLESHEET_PROCESSOR_TOKEN,
-    useFactory: () => stylesheet_processor_1.StylesheetProcessor,
+    useFactory: () => {
+        const { version: ngPackagrVersion } = (0, angular_version_utils_1.getInstalledPackageVersionInfo)('ng-packagr');
+        return ngPackagrVersion !== '17.2.0'
+            ? stylesheet_processor_1.StylesheetProcessor
+            : stylesheet_processor_1.AsyncStylesheetProcessor;
+    },
     deps: [],
 };

package/src/executors/utilities/ng-packagr/stylesheet-processor.js

@@ -7,7 +7,7 @@
  * config at the root of the workspace.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StylesheetProcessor = exports.CssUrl = void 0;
+exports.AsyncStylesheetProcessor = exports.StylesheetProcessor = exports.CssUrl = void 0;
 const browserslist = require("browserslist");
 const fs_1 = require("fs");
 const path_1 = require("path");
@@ -28,6 +28,83 @@ var CssUrl;
     CssUrl["none"] = "none";
 })(CssUrl || (exports.CssUrl = CssUrl = {}));
 class StylesheetProcessor {
+    constructor(projectBasePath, basePath, cssUrl, includePaths, cacheDirectory) {
+        this.projectBasePath = projectBasePath;
+        this.basePath = basePath;
+        this.cssUrl = cssUrl;
+        this.includePaths = includePaths;
+        this.cacheDirectory = cacheDirectory;
+        // By default, browserslist defaults are too inclusive
+        // https://github.com/browserslist/browserslist/blob/83764ea81ffaa39111c204b02c371afa44a4ff07/index.js#L516-L522
+        // We change the default query to browsers that Angular support.
+        // https://angular.io/guide/browser-support
+        browserslist.defaults = [
+            'last 2 Chrome versions',
+            'last 1 Firefox version',
+            'last 2 Edge major versions',
+            'last 2 Safari major versions',
+            'last 2 iOS major versions',
+            'Firefox ESR',
+        ];
+    }
+    async process({ filePath, content, }) {
+        this.createRenderWorker();
+        return this.renderWorker.run({ content, filePath });
+    }
+    /** Destory workers in pool. */
+    destroy() {
+        void this.renderWorker?.destroy();
+    }
+    createRenderWorker() {
+        if (this.renderWorker) {
+            return;
+        }
+        const styleIncludePaths = [...this.includePaths];
+        let prevDir = null;
+        let currentDir = this.basePath;
+        while (currentDir !== prevDir) {
+            const p = (0, path_1.join)(currentDir, 'node_modules');
+            if ((0, fs_1.existsSync)(p)) {
+                styleIncludePaths.push(p);
+            }
+            prevDir = currentDir;
+            currentDir = (0, path_1.dirname)(prevDir);
+        }
+        const browserslistData = browserslist(undefined, { path: this.basePath });
+        const { version: ngPackagrVersion } = (0, angular_version_utils_1.getInstalledPackageVersionInfo)('ng-packagr');
+        let postcssConfiguration;
+        if ((0, semver_1.gte)(ngPackagrVersion, '17.3.0')) {
+            const { loadPostcssConfiguration, } = require('ng-packagr/lib/styles/postcss-configuration');
+            postcssConfiguration = loadPostcssConfiguration(this.projectBasePath);
+        }
+        this.renderWorker = new Piscina({
+            filename: require.resolve('ng-packagr/lib/styles/stylesheet-processor-worker'),
+            maxThreads,
+            env: {
+                ...process.env,
+                FORCE_COLOR: '' + color_1.colors.enabled,
+            },
+            workerData: {
+                postcssConfiguration,
+                tailwindConfigPath: (0, tailwindcss_1.getTailwindConfigPath)(this.projectBasePath, devkit_1.workspaceRoot),
+                projectBasePath: this.projectBasePath,
+                browserslistData,
+                targets: transformSupportedBrowsersToTargets(browserslistData),
+                cacheDirectory: this.cacheDirectory,
+                cssUrl: this.cssUrl,
+                styleIncludePaths,
+            },
+        });
+    }
+}
+exports.StylesheetProcessor = StylesheetProcessor;
+/**
+ * This class is used when ng-packagr version is 17.2.0. The async `loadPostcssConfiguration` function
+ * introduced in ng-packagr 17.2.0 causes a memory leak due to multiple workers being created. We must
+ * keep this class to support any workspace that might be using ng-packagr 17.2.0 where that function
+ * need to be awaited.
+ */
+class AsyncStylesheetProcessor {
     constructor(projectBasePath, basePath, cssUrl, includePaths, cacheDirectory) {
         this.projectBasePath = projectBasePath;
         this.basePath = basePath;
@@ -73,7 +150,7 @@ class StylesheetProcessor {
         const browserslistData = browserslist(undefined, { path: this.basePath });
         const { version: ngPackagrVersion } = (0, angular_version_utils_1.getInstalledPackageVersionInfo)('ng-packagr');
         let postcssConfiguration;
-        if ((0, semver_1.gte)(ngPackagrVersion, '17.2.0')) {
+        if (ngPackagrVersion === '17.2.0') {
             const { loadPostcssConfiguration } = await Promise.resolve().then(() => require('ng-packagr/lib/styles/postcss-configuration'));
             postcssConfiguration = await loadPostcssConfiguration(this.projectBasePath);
         }
@@ -97,7 +174,7 @@ class StylesheetProcessor {
         });
     }
 }
-exports.StylesheetProcessor = StylesheetProcessor;
+exports.AsyncStylesheetProcessor = AsyncStylesheetProcessor;
 function transformSupportedBrowsersToTargets(supportedBrowsers) {
     const transformed = [];
     // https://esbuild.github.io/api/#target