@nx/angular 21.0.0-canary.20250430-07b881d → 21.0.0-canary.20250501-8f50358

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "21.0.0-canary.20250430-07b881d",
+  "version": "21.0.0-canary.20250501-8f50358",
   "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, Playwright 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": {
@@ -67,14 +67,14 @@
     "semver": "^7.5.3",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "21.0.0-canary.20250430-07b881d",
-    "@nx/js": "21.0.0-canary.20250430-07b881d",
-    "@nx/eslint": "21.0.0-canary.20250430-07b881d",
-    "@nx/webpack": "21.0.0-canary.20250430-07b881d",
-    "@nx/rspack": "21.0.0-canary.20250430-07b881d",
-    "@nx/module-federation": "21.0.0-canary.20250430-07b881d",
-    "@nx/web": "21.0.0-canary.20250430-07b881d",
-    "@nx/workspace": "21.0.0-canary.20250430-07b881d",
+    "@nx/devkit": "21.0.0-canary.20250501-8f50358",
+    "@nx/js": "21.0.0-canary.20250501-8f50358",
+    "@nx/eslint": "21.0.0-canary.20250501-8f50358",
+    "@nx/webpack": "21.0.0-canary.20250501-8f50358",
+    "@nx/rspack": "21.0.0-canary.20250501-8f50358",
+    "@nx/module-federation": "21.0.0-canary.20250501-8f50358",
+    "@nx/web": "21.0.0-canary.20250501-8f50358",
+    "@nx/workspace": "21.0.0-canary.20250501-8f50358",
     "piscina": "^4.4.0"
   },
   "peerDependencies": {

package/src/executors/ng-packagr-lite/ng-packagr-adjustments/ng-package/entry-point/entry-point.d.ts

@@ -1,7 +1,3 @@
-import { type DestinationFiles, NgEntryPoint as NgEntryPointBase } from 'ng-packagr/lib/ng-package/entry-point/entry-point';
-export declare class NgEntryPoint extends NgEntryPointBase {
-    /**
-     * Point the FESM2022 files to the ESM2022 files.
-     */
-    get destinationFiles(): DestinationFiles;
-}
+import type { NgEntryPoint as NgEntryPointBase } from 'ng-packagr/lib/ng-package/entry-point/entry-point';
+import type { NgPackageConfig } from 'ng-packagr/ng-package.schema';
+export declare function createNgEntryPoint(packageJson: Record<string, any>, ngPackageJson: NgPackageConfig, basePath: string, secondaryData?: Record<string, any>): NgEntryPointBase;

package/src/executors/ng-packagr-lite/ng-packagr-adjustments/ng-package/entry-point/entry-point.js

@@ -1,17 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NgEntryPoint = void 0;
-const entry_point_1 = require("ng-packagr/lib/ng-package/entry-point/entry-point");
+exports.createNgEntryPoint = createNgEntryPoint;
 const node_path_1 = require("node:path");
-class NgEntryPoint extends entry_point_1.NgEntryPoint {
-    /**
-     * Point the FESM2022 files to the ESM2022 files.
-     */
-    get destinationFiles() {
-        const result = super.destinationFiles;
-        result.fesm2022 = result.esm2022;
-        result.fesm2022Dir = (0, node_path_1.dirname)(result.esm2022);
-        return result;
+const ng_packagr_version_1 = require("../../../../utilities/ng-packagr/ng-packagr-version");
+const package_imports_1 = require("../../../../utilities/ng-packagr/package-imports");
+function createNgEntryPoint(packageJson, ngPackageJson, basePath, secondaryData) {
+    const { major: ngPackagrMajorVersion } = (0, ng_packagr_version_1.getNgPackagrVersionInfo)();
+    const { NgEntryPoint: NgEntryPointBase } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/lib/ng-package/entry-point/entry-point', ngPackagrMajorVersion);
+    class NgEntryPoint extends NgEntryPointBase {
+        /**
+         * Point the FESM2022 files to the ESM2022 files.
+         */
+        get destinationFiles() {
+            const result = super.destinationFiles;
+            result.fesm2022 = result.esm2022;
+            result.fesm2022Dir = (0, node_path_1.dirname)(result.esm2022);
+            return result;
+        }
     }
+    return new NgEntryPoint(packageJson, ngPackageJson, basePath, secondaryData);
 }
-exports.NgEntryPoint = NgEntryPoint;

package/src/executors/ng-packagr-lite/ng-packagr-adjustments/ng-package/entry-point/write-bundles.di.d.ts

@@ -1,2 +1,2 @@
-import { TransformProvider } from 'ng-packagr/lib/graph/transform.di';
-export declare const WRITE_BUNDLES_TRANSFORM: TransformProvider;
+import type { TransformProvider } from 'ng-packagr/lib/graph/transform.di';
+export declare function getWriteBundlesTransformProvider(): TransformProvider;

package/src/executors/ng-packagr-lite/ng-packagr-adjustments/ng-package/entry-point/write-bundles.di.js

@@ -1,12 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WRITE_BUNDLES_TRANSFORM = void 0;
-const transform_di_1 = require("ng-packagr/lib/graph/transform.di");
-const write_bundles_di_1 = require("ng-packagr/lib/ng-package/entry-point/write-bundles.di");
-const options_di_1 = require("ng-packagr/lib/ng-package/options.di");
+exports.getWriteBundlesTransformProvider = getWriteBundlesTransformProvider;
+const ng_packagr_version_1 = require("../../../../utilities/ng-packagr/ng-packagr-version");
+const package_imports_1 = require("../../../../utilities/ng-packagr/package-imports");
 const write_bundles_transform_1 = require("./write-bundles.transform");
-exports.WRITE_BUNDLES_TRANSFORM = (0, transform_di_1.provideTransform)({
-    provide: write_bundles_di_1.WRITE_BUNDLES_TRANSFORM_TOKEN,
-    useFactory: write_bundles_transform_1.writeBundlesTransform,
-    deps: [options_di_1.OPTIONS_TOKEN],
-});
+function getWriteBundlesTransformProvider() {
+    const { major: ngPackagrMajorVersion } = (0, ng_packagr_version_1.getNgPackagrVersionInfo)();
+    const { provideTransform } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/lib/graph/transform.di', ngPackagrMajorVersion);
+    const { WRITE_BUNDLES_TRANSFORM_TOKEN } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/lib/ng-package/entry-point/write-bundles.di', ngPackagrMajorVersion);
+    const { OPTIONS_TOKEN } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/lib/ng-package/options.di', ngPackagrMajorVersion);
+    return provideTransform({
+        provide: WRITE_BUNDLES_TRANSFORM_TOKEN,
+        useFactory: write_bundles_transform_1.writeBundlesTransform,
+        deps: [OPTIONS_TOKEN],
+    });
+}

package/src/executors/ng-packagr-lite/ng-packagr-adjustments/ng-package/entry-point/write-bundles.transform.js

@@ -9,36 +9,41 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.writeBundlesTransform = void 0;
-const build_graph_1 = require("ng-packagr/lib/graph/build-graph");
-const transform_1 = require("ng-packagr/lib/graph/transform");
-const nodes_1 = require("ng-packagr/lib/ng-package/nodes");
-const package_1 = require("ng-packagr/lib/ng-package/package");
 const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
+const ng_packagr_version_1 = require("../../../../utilities/ng-packagr/ng-packagr-version");
+const package_imports_1 = require("../../../../utilities/ng-packagr/package-imports");
 const entry_point_1 = require("./entry-point");
-const writeBundlesTransform = (_options) => (0, transform_1.transformFromPromise)(async (graph) => {
-    const updatedGraph = new build_graph_1.BuildGraph();
-    for (const entry of graph.entries()) {
-        if ((0, nodes_1.isEntryPoint)(entry)) {
-            const entryPoint = toCustomNgEntryPoint(entry.data.entryPoint);
-            entry.data.entryPoint = entryPoint;
-            entry.data.destinationFiles = entryPoint.destinationFiles;
-            for (const [path, outputCache] of entry.cache.outputCache.entries()) {
-                // write the outputs to the file system
-                await (0, promises_1.mkdir)((0, node_path_1.dirname)(path), { recursive: true });
-                await (0, promises_1.writeFile)(path, outputCache.content);
+const writeBundlesTransform = (_options) => {
+    const { major: ngPackagrMajorVersion } = (0, ng_packagr_version_1.getNgPackagrVersionInfo)();
+    const { BuildGraph } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/lib/graph/build-graph', ngPackagrMajorVersion);
+    const { transformFromPromise } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/lib/graph/transform', ngPackagrMajorVersion);
+    const { isEntryPoint, isPackage } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/lib/ng-package/nodes', ngPackagrMajorVersion);
+    const { NgPackage } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/lib/ng-package/package', ngPackagrMajorVersion);
+    return transformFromPromise(async (graph) => {
+        const updatedGraph = new BuildGraph();
+        for (const entry of graph.entries()) {
+            if (isEntryPoint(entry)) {
+                const entryPoint = toCustomNgEntryPoint(entry.data.entryPoint);
+                entry.data.entryPoint = entryPoint;
+                entry.data.destinationFiles = entryPoint.destinationFiles;
+                for (const [path, outputCache] of entry.cache.outputCache.entries()) {
+                    // write the outputs to the file system
+                    await (0, promises_1.mkdir)((0, node_path_1.dirname)(path), { recursive: true });
+                    await (0, promises_1.writeFile)(path, outputCache.content);
+                }
             }
+            else if (isPackage(entry)) {
+                entry.data = new NgPackage(entry.data.src, toCustomNgEntryPoint(entry.data.primary), entry.data.secondaries.map((secondary) => toCustomNgEntryPoint(secondary)));
+            }
+            updatedGraph.put(entry);
         }
-        else if ((0, nodes_1.isPackage)(entry)) {
-            entry.data = new package_1.NgPackage(entry.data.src, toCustomNgEntryPoint(entry.data.primary), entry.data.secondaries.map((secondary) => toCustomNgEntryPoint(secondary)));
-        }
-        updatedGraph.put(entry);
-    }
-    return updatedGraph;
-});
+        return updatedGraph;
+    });
+};
 exports.writeBundlesTransform = writeBundlesTransform;
 function toCustomNgEntryPoint(entryPoint) {
-    return new entry_point_1.NgEntryPoint(entryPoint.packageJson, entryPoint.ngPackageJson, entryPoint.basePath, 
+    return (0, entry_point_1.createNgEntryPoint)(entryPoint.packageJson, entryPoint.ngPackageJson, entryPoint.basePath, 
     // @ts-expect-error this is a TS private property, but it can be accessed at runtime
     entryPoint.secondaryData);
 }

package/src/executors/ng-packagr-lite/ng-packagr-adjustments/ng-packagr.d.ts

@@ -1,2 +1,2 @@
-import { NgPackagr } from 'ng-packagr';
+import { type NgPackagr } from 'ng-packagr';
 export declare function getNgPackagrInstance(): Promise<NgPackagr>;

package/src/executors/ng-packagr-lite/ng-packagr-adjustments/ng-packagr.js

@@ -3,9 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getNgPackagrInstance = getNgPackagrInstance;
 const ng_packagr_1 = require("ng-packagr");
 async function getNgPackagrInstance() {
-    const { WRITE_BUNDLES_TRANSFORM } = await import('./ng-package/entry-point/write-bundles.di.js');
-    const { STYLESHEET_PROCESSOR } = await import('../../utilities/ng-packagr/stylesheet-processor.di.js');
+    const { getWriteBundlesTransformProvider } = await import('./ng-package/entry-point/write-bundles.di.js');
+    const { getStylesheetProcessorFactoryProvider } = await import('../../utilities/ng-packagr/stylesheet-processor.di.js');
     const packagr = (0, ng_packagr_1.ngPackagr)();
-    packagr.withProviders([WRITE_BUNDLES_TRANSFORM, STYLESHEET_PROCESSOR]);
+    packagr.withProviders([
+        getWriteBundlesTransformProvider(),
+        getStylesheetProcessorFactoryProvider(),
+    ]);
     return packagr;
 }

package/src/executors/package/ng-packagr-adjustments/ng-packagr.d.ts

@@ -1,2 +1,2 @@
-import { NgPackagr } from 'ng-packagr';
+import { type NgPackagr } from 'ng-packagr';
 export declare function getNgPackagrInstance(): Promise<NgPackagr>;

package/src/executors/package/ng-packagr-adjustments/ng-packagr.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getNgPackagrInstance = getNgPackagrInstance;
 const ng_packagr_1 = require("ng-packagr");
 async function getNgPackagrInstance() {
-    const { STYLESHEET_PROCESSOR } = await import('../../utilities/ng-packagr/stylesheet-processor.di.js');
+    const { getStylesheetProcessorFactoryProvider } = await import('../../utilities/ng-packagr/stylesheet-processor.di.js');
     const packagr = (0, ng_packagr_1.ngPackagr)();
-    packagr.withProviders([STYLESHEET_PROCESSOR]);
+    packagr.withProviders([getStylesheetProcessorFactoryProvider()]);
     return packagr;
 }

package/src/executors/utilities/ng-packagr/ng-packagr-version.d.ts

@@ -0,0 +1,2 @@
+import { type VersionInfo } from '../angular-version-utils';
+export declare function getNgPackagrVersionInfo(): VersionInfo;

package/src/executors/utilities/ng-packagr/ng-packagr-version.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNgPackagrVersionInfo = getNgPackagrVersionInfo;
+const angular_version_utils_1 = require("../angular-version-utils");
+let ngPackagrVersionInfo;
+function getNgPackagrVersionInfo() {
+    if (!ngPackagrVersionInfo) {
+        ngPackagrVersionInfo = (0, angular_version_utils_1.getInstalledPackageVersionInfo)('ng-packagr');
+    }
+    return ngPackagrVersionInfo;
+}

package/src/executors/utilities/ng-packagr/package-imports.d.ts

@@ -0,0 +1 @@
+export declare function importNgPackagrPath<T>(path: string, ngPackagrMajorVersion: number): T;

package/src/executors/utilities/ng-packagr/package-imports.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.importNgPackagrPath = importNgPackagrPath;
+function importNgPackagrPath(path, ngPackagrMajorVersion) {
+    let finalPath = path;
+    if (ngPackagrMajorVersion >= 20 && !path.startsWith('ng-packagr/src/')) {
+        finalPath = path.replace(/^ng-packagr\//, 'ng-packagr/src/');
+    }
+    return require(finalPath);
+}

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

@@ -18,7 +18,7 @@ const color_1 = require("ng-packagr/lib/utils/color");
 const tailwindcss_1 = require("../tailwindcss");
 const devkit_1 = require("@nx/devkit");
 const semver_1 = require("semver");
-const angular_version_utils_1 = require("../../angular-version-utils");
+const ng_packagr_version_1 = require("../ng-packagr-version");
 const maxWorkersVariable = process.env['NG_BUILD_MAX_WORKERS'];
 const maxThreads = typeof maxWorkersVariable === 'string' && maxWorkersVariable !== ''
     ? +maxWorkersVariable
@@ -72,7 +72,7 @@ class StylesheetProcessor {
             currentDir = (0, path_1.dirname)(prevDir);
         }
         const browserslistData = (0, browserslist_1.default)(undefined, { path: this.basePath });
-        const { version: ngPackagrVersion } = (0, angular_version_utils_1.getInstalledPackageVersionInfo)('ng-packagr');
+        const { version: ngPackagrVersion } = (0, ng_packagr_version_1.getNgPackagrVersionInfo)();
         let tailwindConfigPath;
         let postcssConfiguration;
         if ((0, semver_1.gte)(ngPackagrVersion, '18.0.0')) {
@@ -163,7 +163,7 @@ class AsyncStylesheetProcessor {
             currentDir = (0, path_1.dirname)(prevDir);
         }
         const browserslistData = (0, browserslist_1.default)(undefined, { path: this.basePath });
-        const { version: ngPackagrVersion } = (0, angular_version_utils_1.getInstalledPackageVersionInfo)('ng-packagr');
+        const { version: ngPackagrVersion } = (0, ng_packagr_version_1.getNgPackagrVersionInfo)();
         let postcssConfiguration;
         if (ngPackagrVersion === '17.2.0') {
             const { loadPostcssConfiguration, } = require('ng-packagr/lib/styles/postcss-configuration');

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

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

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

@@ -1,22 +1,25 @@
 "use strict";
 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");
-exports.STYLESHEET_PROCESSOR = {
-    provide: stylesheet_processor_di_1.STYLESHEET_PROCESSOR_TOKEN,
-    useFactory: () => {
-        const { major: ngPackagrMajorVersion, version: ngPackagrVersion } = (0, angular_version_utils_1.getInstalledPackageVersionInfo)('ng-packagr');
-        if (ngPackagrMajorVersion >= 19) {
-            const { StylesheetProcessor } = require('./v19+/stylesheet-processor');
-            return StylesheetProcessor;
-        }
-        if (ngPackagrVersion !== '17.2.0') {
-            const { StylesheetProcessor } = require('./pre-v19/stylesheet-processor');
-            return StylesheetProcessor;
-        }
-        const { AsyncStylesheetProcessor, } = require('./pre-v19/stylesheet-processor');
-        return AsyncStylesheetProcessor;
-    },
-    deps: [],
-};
+exports.getStylesheetProcessorFactoryProvider = getStylesheetProcessorFactoryProvider;
+const ng_packagr_version_1 = require("./ng-packagr-version");
+const package_imports_1 = require("./package-imports");
+function getStylesheetProcessorFactoryProvider() {
+    const { major: ngPackagrMajorVersion, version: ngPackagrVersion } = (0, ng_packagr_version_1.getNgPackagrVersionInfo)();
+    const { STYLESHEET_PROCESSOR_TOKEN } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/lib/styles/stylesheet-processor.di', ngPackagrMajorVersion);
+    return {
+        provide: STYLESHEET_PROCESSOR_TOKEN,
+        useFactory: () => {
+            if (ngPackagrMajorVersion >= 19) {
+                const { getStylesheetProcessor, } = require('./v19+/stylesheet-processor');
+                return getStylesheetProcessor();
+            }
+            if (ngPackagrVersion !== '17.2.0') {
+                const { StylesheetProcessor, } = require('./pre-v19/stylesheet-processor');
+                return StylesheetProcessor;
+            }
+            const { AsyncStylesheetProcessor, } = require('./pre-v19/stylesheet-processor');
+            return AsyncStylesheetProcessor;
+        },
+        deps: [],
+    };
+}

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

@@ -4,20 +4,11 @@
  * Changes made:
  * - Add the project root to the search directories.
  */
-import { NgPackageEntryConfig } from 'ng-packagr/ng-entrypoint.schema';
-import { ComponentStylesheetBundler } from 'ng-packagr/lib/styles/component-stylesheets';
+import type { NgPackageEntryConfig } from 'ng-packagr/ng-entrypoint.schema';
 export declare enum CssUrl {
     inline = "inline",
     none = "none"
 }
-export declare class StylesheetProcessor extends ComponentStylesheetBundler {
-    protected readonly projectBasePath: string;
-    protected readonly basePath: string;
-    protected readonly cssUrl?: CssUrl;
-    protected readonly includePaths?: string[];
-    protected readonly sass?: NgPackageEntryConfig['lib']['sass'];
-    protected readonly cacheDirectory?: string | false;
-    protected readonly watch?: boolean;
-    constructor(projectBasePath: string, basePath: string, cssUrl?: CssUrl, includePaths?: string[], sass?: NgPackageEntryConfig['lib']['sass'], cacheDirectory?: string | false, watch?: boolean);
-    destroy(): void;
-}
+export declare function getStylesheetProcessor(): new (projectBasePath: string, basePath: string, cssUrl?: CssUrl, includePaths?: string[], sass?: NgPackageEntryConfig['lib']['sass'], cacheDirectory?: string | false, watch?: boolean) => {
+    [key: string]: any;
+};

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

@@ -6,61 +6,67 @@
  * - Add the project root to the search directories.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StylesheetProcessor = exports.CssUrl = void 0;
+exports.CssUrl = void 0;
+exports.getStylesheetProcessor = getStylesheetProcessor;
 const tslib_1 = require("tslib");
-const browserslist_1 = tslib_1.__importDefault(require("browserslist"));
-const component_stylesheets_1 = require("ng-packagr/lib/styles/component-stylesheets");
-const postcss_configuration_1 = require("ng-packagr/lib/styles/postcss-configuration");
 const devkit_1 = require("@nx/devkit");
+const browserslist_1 = tslib_1.__importDefault(require("browserslist"));
+const ng_packagr_version_1 = require("../ng-packagr-version");
+const package_imports_1 = require("../package-imports");
 var CssUrl;
 (function (CssUrl) {
     CssUrl["inline"] = "inline";
     CssUrl["none"] = "none";
 })(CssUrl || (exports.CssUrl = CssUrl = {}));
-class StylesheetProcessor extends component_stylesheets_1.ComponentStylesheetBundler {
-    constructor(projectBasePath, basePath, cssUrl, includePaths, sass, cacheDirectory, watch) {
-        // 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_1.default.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',
-        ];
-        const browserslistData = (0, browserslist_1.default)(undefined, { path: basePath });
-        let searchDirs = (0, postcss_configuration_1.generateSearchDirectories)([projectBasePath]);
-        const postcssConfiguration = (0, postcss_configuration_1.loadPostcssConfiguration)(searchDirs);
-        // (nx-specific): we support loading the TailwindCSS config from the root of the workspace
-        searchDirs = (0, postcss_configuration_1.generateSearchDirectories)([projectBasePath, devkit_1.workspaceRoot]);
-        super({
-            cacheDirectory: cacheDirectory,
-            postcssConfiguration: postcssConfiguration,
-            tailwindConfiguration: postcssConfiguration
-                ? undefined
-                : (0, postcss_configuration_1.getTailwindConfig)(searchDirs, projectBasePath),
-            sass: sass,
-            workspaceRoot: projectBasePath,
-            cssUrl: cssUrl,
-            target: transformSupportedBrowsersToTargets(browserslistData),
-            includePaths: includePaths,
-        }, 'css', watch);
-        this.projectBasePath = projectBasePath;
-        this.basePath = basePath;
-        this.cssUrl = cssUrl;
-        this.includePaths = includePaths;
-        this.sass = sass;
-        this.cacheDirectory = cacheDirectory;
-        this.watch = watch;
-    }
-    destroy() {
-        void super.dispose();
+function getStylesheetProcessor() {
+    const { major: ngPackagrMajorVersion } = (0, ng_packagr_version_1.getNgPackagrVersionInfo)();
+    const { ComponentStylesheetBundler } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/lib/styles/component-stylesheets', ngPackagrMajorVersion);
+    const { generateSearchDirectories, getTailwindConfig, loadPostcssConfiguration, } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/lib/styles/postcss-configuration', ngPackagrMajorVersion);
+    class StylesheetProcessor extends ComponentStylesheetBundler {
+        constructor(projectBasePath, basePath, cssUrl, includePaths, sass, cacheDirectory, watch) {
+            // 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_1.default.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',
+            ];
+            const browserslistData = (0, browserslist_1.default)(undefined, { path: basePath });
+            let searchDirs = generateSearchDirectories([projectBasePath]);
+            const postcssConfiguration = loadPostcssConfiguration(searchDirs);
+            // (nx-specific): we support loading the TailwindCSS config from the root of the workspace
+            searchDirs = generateSearchDirectories([projectBasePath, devkit_1.workspaceRoot]);
+            super({
+                cacheDirectory: cacheDirectory,
+                postcssConfiguration: postcssConfiguration,
+                tailwindConfiguration: postcssConfiguration
+                    ? undefined
+                    : getTailwindConfig(searchDirs, projectBasePath),
+                sass: sass,
+                workspaceRoot: projectBasePath,
+                cssUrl: cssUrl,
+                target: transformSupportedBrowsersToTargets(browserslistData),
+                includePaths: includePaths,
+            }, 'css', watch);
+            this.projectBasePath = projectBasePath;
+            this.basePath = basePath;
+            this.cssUrl = cssUrl;
+            this.includePaths = includePaths;
+            this.sass = sass;
+            this.cacheDirectory = cacheDirectory;
+            this.watch = watch;
+        }
+        destroy() {
+            void super.dispose();
+        }
     }
+    return StylesheetProcessor;
 }
-exports.StylesheetProcessor = StylesheetProcessor;
 function transformSupportedBrowsersToTargets(supportedBrowsers) {
     const transformed = [];
     // https://esbuild.github.io/api/#target