@nx/angular 17.0.3 → 17.0.4

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNgPackagrInstance = void 0;
+const ng_packagr_1 = require("ng-packagr");
+const angular_version_utils_1 = require("../../utilities/angular-version-utils");
+async function getNgPackagrInstance(options) {
+    const { major: angularMajorVersion } = (0, angular_version_utils_1.getInstalledAngularVersionInfo)();
+    if (angularMajorVersion >= 17) {
+        const { STYLESHEET_PROCESSOR } = await Promise.resolve().then(() => require('../../utilities/ng-packagr/stylesheet-processor.di'));
+        const packagr = (0, ng_packagr_1.ngPackagr)();
+        packagr.withProviders([STYLESHEET_PROCESSOR]);
+        return packagr;
+    }
+    const { NX_ENTRY_POINT_PROVIDERS } = await Promise.resolve().then(() => require('./ng-package/entry-point/entry-point.di'));
+    const { nxProvideOptions } = await Promise.resolve().then(() => require('./ng-package/options.di'));
+    const { NX_PACKAGE_PROVIDERS, NX_PACKAGE_TRANSFORM } = await Promise.resolve().then(() => require('./ng-package/package.di'));
+    const packagr = new ng_packagr_1.NgPackagr([
+        ...NX_PACKAGE_PROVIDERS,
+        ...NX_ENTRY_POINT_PROVIDERS,
+        nxProvideOptions({
+            tailwindConfig: options.tailwindConfig,
+            watch: options.watch,
+        }),
+    ]);
+    packagr.withBuildTransform(NX_PACKAGE_TRANSFORM.provide);
+    return packagr;
+}
+exports.getNgPackagrInstance = getNgPackagrInstance;

package/src/executors/package/ng-packagr-adjustments/ngc/compile-source-files.d.ts

@@ -2,7 +2,7 @@
  * Adapted from the original ng-packagr source.
  *
  * Changes made:
- * - Use custom cacheCompilerHost instead of the one provided by ng-packagr.
+ * - Use custom StylesheetProcessor instead of the one provided by ng-packagr.
  * - Support ngcc for Angular < 16.
  * - Support Angular Compiler `incrementalDriver` for Angular < 16.
  */

package/src/executors/package/ng-packagr-adjustments/ngc/compile-source-files.js

@@ -3,7 +3,7 @@
  * Adapted from the original ng-packagr source.
  *
  * Changes made:
- * - Use custom cacheCompilerHost instead of the one provided by ng-packagr.
+ * - Use custom StylesheetProcessor instead of the one provided by ng-packagr.
  * - Support ngcc for Angular < 16.
  * - Support Angular Compiler `incrementalDriver` for Angular < 16.
  */
@@ -11,11 +11,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileSourceFiles = void 0;
 const nodes_1 = require("ng-packagr/lib/ng-package/nodes");
 const log = require("ng-packagr/lib/utils/log");
-const ng_compiler_cli_1 = require("ng-packagr/lib/utils/ng-compiler-cli");
+const cache_compiler_host_1 = require("ng-packagr/lib/ts/cache-compiler-host");
 const node_path_1 = require("node:path");
 const ts = require("typescript");
 const angular_version_utils_1 = require("../../../utilities/angular-version-utils");
-const cache_compiler_host_1 = require("../ts/cache-compiler-host");
+const ng_compiler_cli_1 = require("../../../utilities/ng-compiler-cli");
 async function compileSourceFiles(graph, tsConfig, moduleResolutionCache, options, extraOptions, stylesheetProcessor, ngccProcessor) {
     const { NgtscProgram, formatDiagnostics } = await (0, ng_compiler_cli_1.ngCompilerCli)();
     const { cacheDirectory, watch, cacheEnabled } = options;
@@ -59,9 +59,7 @@ async function compileSourceFiles(graph, tsConfig, moduleResolutionCache, option
         cache.oldNgtscProgram = angularProgram;
     }
     else {
-        // When not in watch mode, the startup cost of the incremental analysis can be avoided by
-        // using an abstract builder that only wraps a TypeScript program.
-        builder = ts.createAbstractBuilder(typeScriptProgram, tsCompilerHost);
+        builder = ts.createEmitAndSemanticDiagnosticsBuilderProgram(typeScriptProgram, tsCompilerHost);
     }
     // Update semantic diagnostics cache
     const affectedFiles = new Set();
@@ -158,6 +156,15 @@ async function compileSourceFiles(graph, tsConfig, moduleResolutionCache, option
         throw new Error(formatDiagnostics(errorDiagnostics));
     }
     const transformers = angularCompiler.prepareEmit().transformers;
+    if ('getSemanticDiagnosticsOfNextAffectedFile' in builder) {
+        while (builder.emitNextAffectedFile((fileName, data, writeByteOrderMark, onError, sourceFiles) => {
+            if (fileName.endsWith('.tsbuildinfo')) {
+                tsCompilerHost.writeFile(fileName, data, writeByteOrderMark, onError, sourceFiles);
+            }
+        })) {
+            // empty
+        }
+    }
     const angularVersion = (0, angular_version_utils_1.getInstalledAngularVersionInfo)();
     const incrementalCompilation = angularVersion.major < 16
         ? angularCompiler.incrementalDriver

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

@@ -2,10 +2,8 @@
  * Adapted from the original ng-packagr source.
  *
  * Changes made:
- * - Added the filePath parameter to the cache key.
  * - Refactored caching to take into account TailwindCSS processing.
- * - Added PostCSS plugins needed to support TailwindCSS.
- * - Added watch mode parameter.
+ * - Added PostCSS plugin needed to support TailwindCSS.
  */
 export declare enum CssUrl {
     inline = "inline",
@@ -17,25 +15,22 @@ export interface Result {
     error?: string;
 }
 export declare class StylesheetProcessor {
+    private readonly projectBasePath;
     private readonly basePath;
     private readonly cssUrl?;
     private readonly includePaths?;
-    private readonly cacheDirectory?;
-    private readonly watch?;
+    private cacheDirectory?;
     private readonly tailwindConfig?;
     private browserslistData;
     private targets;
     private postCssProcessor;
     private esbuild;
     private styleIncludePaths;
-    private tailwindSetup;
-    constructor(basePath: string, cssUrl?: CssUrl, includePaths?: string[], cacheDirectory?: string | false, watch?: boolean, tailwindConfig?: string);
+    constructor(projectBasePath: string, basePath: string, cssUrl?: CssUrl, includePaths?: string[], cacheDirectory?: string | false, tailwindConfig?: string);
     process({ filePath, content, }: {
         filePath: string;
         content: string;
     }): Promise<string>;
-    private getCachedResult;
-    private containsTailwindDirectives;
-    private createPostCssPlugins;
+    private createPostCssProcessor;
     private renderCss;
 }

package/src/executors/package/ng-packagr-adjustments/styles/stylesheet-processor.js

@@ -3,10 +3,8 @@
  * Adapted from the original ng-packagr source.
  *
  * Changes made:
- * - Added the filePath parameter to the cache key.
  * - Refactored caching to take into account TailwindCSS processing.
- * - Added PostCSS plugins needed to support TailwindCSS.
- * - Added watch mode parameter.
+ * - Added PostCSS plugin needed to support TailwindCSS.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StylesheetProcessor = exports.CssUrl = void 0;
@@ -16,11 +14,10 @@ const esbuild_executor_1 = require("ng-packagr/lib/esbuild/esbuild-executor");
 const cache_1 = require("ng-packagr/lib/utils/cache");
 const log = require("ng-packagr/lib/utils/log");
 const path_1 = require("path");
-const postcssPresetEnv = require("postcss-preset-env");
+const autoprefixer = require("autoprefixer");
 const postcssUrl = require("postcss-url");
 const node_url_1 = require("node:url");
-const angular_version_utils_1 = require("../../../utilities/angular-version-utils");
-const tailwindcss_1 = require("../../../utilities/tailwindcss");
+const tailwindcss_1 = require("../../../utilities/ng-packagr/tailwindcss");
 const postcss = require('postcss');
 var CssUrl;
 (function (CssUrl) {
@@ -28,20 +25,20 @@ var CssUrl;
     CssUrl["none"] = "none";
 })(CssUrl || (exports.CssUrl = CssUrl = {}));
 class StylesheetProcessor {
-    constructor(basePath, cssUrl, includePaths, cacheDirectory, watch, tailwindConfig) {
-        // By default, browserslist defaults are too inclusive
-        // https://github.com/browserslist/browserslist/blob/83764ea81ffaa39111c204b02c371afa44a4ff07/index.js#L516-L522
+    constructor(projectBasePath, basePath, cssUrl, includePaths, cacheDirectory, tailwindConfig) {
+        this.projectBasePath = projectBasePath;
         this.basePath = basePath;
         this.cssUrl = cssUrl;
         this.includePaths = includePaths;
         this.cacheDirectory = cacheDirectory;
-        this.watch = watch;
         this.tailwindConfig = tailwindConfig;
         this.esbuild = new esbuild_executor_1.EsbuildExecutor();
+        // 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 version',
+            'last 2 Chrome versions',
             'last 1 Firefox version',
             'last 2 Edge major versions',
             'last 2 Safari major versions',
@@ -61,17 +58,24 @@ class StylesheetProcessor {
         }
         this.browserslistData = browserslist(undefined, { path: this.basePath });
         this.targets = transformSupportedBrowsersToTargets(this.browserslistData);
-        this.tailwindSetup = (0, tailwindcss_1.getTailwindSetup)(this.basePath, this.tailwindConfig);
-        this.postCssProcessor = this.createPostCssPlugins();
+        const tailwindSetup = (0, tailwindcss_1.getTailwindSetup)(this.projectBasePath, this.tailwindConfig);
+        if (tailwindSetup) {
+            this.cacheDirectory = undefined;
+        }
+        this.postCssProcessor = this.createPostCssProcessor(tailwindSetup);
     }
     async process({ filePath, content, }) {
+        const CACHE_KEY_VALUES = [
+            ...this.browserslistData,
+            ...this.styleIncludePaths,
+            this.cssUrl,
+        ].join(':');
         let key;
         if (this.cacheDirectory &&
             !content.includes('@import') &&
-            !content.includes('@use') &&
-            !this.containsTailwindDirectives(content)) {
+            !content.includes('@use')) {
             // No transitive deps and no Tailwind directives, we can cache more aggressively.
-            key = await (0, cache_1.generateKey)(content, ...this.browserslistData, filePath);
+            key = await (0, cache_1.generateKey)(content, CACHE_KEY_VALUES);
             const result = await (0, cache_1.readCacheEntry)(this.cacheDirectory, key);
             if (result) {
                 result.warnings.forEach((msg) => log.warn(msg));
@@ -80,18 +84,16 @@ class StylesheetProcessor {
         }
         // Render pre-processor language (sass, styl, less)
         const renderedCss = await this.renderCss(filePath, content);
-        let containsTailwindDirectives = false;
+        // We cannot cache CSS re-rendering phase, because a transitive dependency via (@import) can case different CSS output.
+        // Example a change in a mixin or SCSS variable.
+        if (!key) {
+            key = await (0, cache_1.generateKey)(renderedCss, CACHE_KEY_VALUES);
+        }
         if (this.cacheDirectory) {
-            containsTailwindDirectives = this.containsTailwindDirectives(renderedCss);
-            if (!containsTailwindDirectives) {
-                // No Tailwind directives to process by PostCSS, we can return cached results
-                if (!key) {
-                    key = await (0, cache_1.generateKey)(renderedCss, ...this.browserslistData, filePath);
-                }
-                const cachedResult = await this.getCachedResult(key);
-                if (cachedResult) {
-                    return cachedResult;
-                }
+            const cachedResult = await (0, cache_1.readCacheEntry)(this.cacheDirectory, key);
+            if (cachedResult) {
+                cachedResult.warnings.forEach((msg) => log.warn(msg));
+                return cachedResult.css;
             }
         }
         // Render postcss (autoprefixing and friends)
@@ -99,15 +101,6 @@ class StylesheetProcessor {
             from: filePath,
             to: filePath.replace((0, path_1.extname)(filePath), '.css'),
         });
-        if (this.cacheDirectory && containsTailwindDirectives) {
-            // We had Tailwind directives to process by PostCSS, only now
-            // is safe to return cached results
-            key = await (0, cache_1.generateKey)(result.css, ...this.browserslistData, filePath);
-            const cachedResult = await this.getCachedResult(key);
-            if (cachedResult) {
-                return cachedResult;
-            }
-        }
         const warnings = result.warnings().map((w) => w.toString());
         const { code, warnings: esBuildWarnings } = await this.esbuild.transform(result.css, {
             loader: 'css',
@@ -129,29 +122,17 @@ class StylesheetProcessor {
         warnings.forEach((msg) => log.warn(msg));
         return code;
     }
-    async getCachedResult(key) {
-        const cachedResult = await (0, cache_1.readCacheEntry)(this.cacheDirectory, key);
-        if (cachedResult) {
-            cachedResult.warnings.forEach((msg) => log.warn(msg));
-            return cachedResult.css;
-        }
-        return undefined;
-    }
-    containsTailwindDirectives(content) {
-        return (this.tailwindSetup && tailwindcss_1.tailwindDirectives.some((d) => content.includes(d)));
-    }
-    createPostCssPlugins() {
+    createPostCssProcessor(tailwindSetup) {
         const postCssPlugins = [];
+        if (tailwindSetup) {
+            postCssPlugins.push((0, tailwindcss_1.getTailwindPostCssPlugin)(tailwindSetup));
+        }
         if (this.cssUrl !== CssUrl.none) {
             postCssPlugins.push(postcssUrl({ url: this.cssUrl }));
         }
-        if (this.tailwindSetup) {
-            postCssPlugins.push(...(0, tailwindcss_1.getTailwindPostCssPlugins)(this.tailwindSetup, this.styleIncludePaths, this.watch));
-        }
-        postCssPlugins.push(postcssPresetEnv({
-            browsers: this.browserslistData,
-            autoprefixer: true,
-            stage: 3,
+        postCssPlugins.push(autoprefixer({
+            ignoreUnknownVersions: true,
+            overrideBrowserslist: this.browserslistData,
         }));
         return postcss(postCssPlugins);
     }
@@ -160,25 +141,11 @@ class StylesheetProcessor {
         switch (ext) {
             case '.sass':
             case '.scss': {
-                const angularVersion = (0, angular_version_utils_1.getInstalledAngularVersionInfo)();
-                if (angularVersion && angularVersion.major < 15) {
-                    return (await Promise.resolve().then(() => require('sass')))
-                        .renderSync({
-                        file: filePath,
-                        data: css,
-                        indentedSyntax: '.sass' === ext,
-                        importer: customSassImporter,
-                        includePaths: this.styleIncludePaths,
-                    })
-                        .css.toString();
-                }
-                return (await Promise.resolve().then(() => require('sass')))
-                    .compileString(css, {
+                return (await Promise.resolve().then(() => require('sass'))).compileString(css, {
                     url: (0, node_url_1.pathToFileURL)(filePath),
                     syntax: '.sass' === ext ? 'indented' : 'scss',
                     loadPaths: this.styleIncludePaths,
-                })
-                    .css.toString();
+                }).css;
             }
             case '.less': {
                 const { css: content } = await (await Promise.resolve().then(() => require('less'))).render(css, {
@@ -214,10 +181,7 @@ function transformSupportedBrowsersToTargets(supportedBrowsers) {
         // browserslist uses ranges `15.2-15.3` versions but only the lowest is required
         // to perform minimum supported feature checks. esbuild also expects a single version.
         [version] = version.split('-');
-        if (browserName === 'ie') {
-            transformed.push('edge12');
-        }
-        else if (esBuildSupportedBrowsers.has(browserName)) {
+        if (esBuildSupportedBrowsers.has(browserName)) {
             if (browserName === 'safari' && version === 'tp') {
                 // esbuild only supports numeric versions so `TP` is converted to a high number (999) since
                 // a Technology Preview (TP) of Safari is assumed to support all currently known features.
@@ -228,14 +192,3 @@ function transformSupportedBrowsersToTargets(supportedBrowsers) {
     }
     return transformed.length ? transformed : undefined;
 }
-function customSassImporter(url, prev) {
-    // NB: Sass importer should always be sync as otherwise it will cause
-    // sass to go in the async path which is slower.
-    if (url[0] !== '~') {
-        return undefined;
-    }
-    return {
-        file: url.slice(1),
-        prev,
-    };
-}

package/src/executors/package/package.impl.d.ts

@@ -1,5 +1,5 @@
 import type { ExecutorContext } from '@nx/devkit';
-import { DependentBuildableProjectNode } from '@nx/js/src/utils/buildable-libs-utils';
+import { type DependentBuildableProjectNode } from '@nx/js/src/utils/buildable-libs-utils';
 import type { NgPackagr } from 'ng-packagr';
 import type { BuildAngularLibraryExecutorOptions } from './schema';
 /**

package/src/executors/package/package.impl.js

@@ -7,26 +7,16 @@ const path_1 = require("path");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const typescript_1 = require("../utilities/typescript");
-const entry_point_di_1 = require("./ng-packagr-adjustments/ng-package/entry-point/entry-point.di");
-const options_di_1 = require("./ng-packagr-adjustments/ng-package/options.di");
-const package_di_1 = require("./ng-packagr-adjustments/ng-package/package.di");
+const ng_packagr_1 = require("./ng-packagr-adjustments/ng-packagr");
 async function initializeNgPackagr(options, context, projectDependencies) {
-    const packager = new (await Promise.resolve().then(() => require('ng-packagr'))).NgPackagr([
-        ...package_di_1.NX_PACKAGE_PROVIDERS,
-        ...entry_point_di_1.NX_ENTRY_POINT_PROVIDERS,
-        (0, options_di_1.nxProvideOptions)({
-            tailwindConfig: options.tailwindConfig,
-            watch: options.watch,
-        }),
-    ]);
-    packager.forProject((0, path_1.resolve)(context.root, options.project));
-    packager.withBuildTransform(package_di_1.NX_PACKAGE_TRANSFORM.provide);
+    const ngPackagr = await (0, ng_packagr_1.getNgPackagrInstance)(options);
+    ngPackagr.forProject((0, path_1.resolve)(context.root, options.project));
     if (options.tsConfig) {
         const remappedTsConfigFilePath = (0, buildable_libs_utils_1.createTmpTsConfig)(options.tsConfig, context.root, context.projectsConfigurations.projects[context.projectName].root, projectDependencies);
         const tsConfig = await (0, typescript_1.parseRemappedTsConfigAndMergeDefaults)(context.root, options.tsConfig, remappedTsConfigFilePath);
-        packager.withTsConfig(tsConfig);
+        ngPackagr.withTsConfig(tsConfig);
     }
-    return packager;
+    return ngPackagr;
 }
 /**
  * Creates an executor function that executes the library build of an Angular

package/src/executors/package/schema.json

@@ -1,7 +1,7 @@
 {
   "version": 2,
   "outputCapture": "direct-nodejs",
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "title": "ng-packagr Target",
   "description": "Builds and packages an Angular library producing an output following the Angular Package Format (APF) to be distributed as an NPM package.\n\nThis executor is similar to the `@angular-devkit/build-angular:ng-packagr` with additional support for incremental builds.",
   "cli": "nx",
@@ -35,9 +35,9 @@
     },
     "tailwindConfig": {
       "type": "string",
-      "description": "The full path for the Tailwind configuration file, relative to the workspace root. If not provided and a `tailwind.config.js` file exists in the project or workspace root, it will be used. Otherwise, Tailwind will not be configured.",
+      "description": "The full path for the Tailwind configuration file, relative to the workspace root. If not provided and a `tailwind.config.js` file exists in the project or workspace root, it will be used. Otherwise, Tailwind will not be configured. _Note: starting with Angular v17, this option is no longer used and the configuration will be picked up if exists at the project or workspace root_.",
       "x-completion-type": "file",
-      "x-completion-glob": "tailwind.config.js"
+      "x-completion-glob": "tailwind.config@(.js|.cjs|.mjs|.ts)"
     }
   },
   "additionalProperties": false,

package/src/executors/utilities/buildable-libs.d.ts

@@ -0,0 +1,6 @@
+import { type ExecutorContext } from '@nx/devkit';
+import { type DependentBuildableProjectNode } from '@nx/js/src/utils/buildable-libs-utils';
+export declare function createTmpTsConfigForBuildableLibs(tsConfigPath: string, context: ExecutorContext): {
+    tsConfigPath: string;
+    dependencies: DependentBuildableProjectNode[];
+};

package/src/executors/{browser-esbuild/lib → utilities}/buildable-libs.js

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTmpTsConfigForBuildableLibs = void 0;
+const devkit_1 = require("@nx/devkit");
 const buildable_libs_utils_1 = require("@nx/js/src/utils/buildable-libs-utils");
 const path_1 = require("path");
-const devkit_1 = require("@nx/devkit");
-function createTmpTsConfigForBuildableLibs(tsConfigPath, context, options) {
+function createTmpTsConfigForBuildableLibs(tsConfigPath, context) {
     let dependencies;
-    const result = (0, buildable_libs_utils_1.calculateProjectDependencies)(options?.projectGraph ?? (0, devkit_1.readCachedProjectGraph)(), context.root, context.projectName, options?.target ?? context.targetName, context.configurationName);
+    const result = (0, buildable_libs_utils_1.calculateProjectDependencies)(context.projectGraph ?? (0, devkit_1.readCachedProjectGraph)(), context.root, context.projectName, context.targetName, context.configurationName);
     dependencies = result.dependencies;
     const tmpTsConfigPath = (0, buildable_libs_utils_1.createTmpTsConfig)((0, path_1.join)(context.root, tsConfigPath), context.root, result.target.data.root, dependencies);
     process.env.NX_TSCONFIG_PATH = tmpTsConfigPath;
-    // Angular EsBuild Builder appends the workspaceRoot to the config path, so remove it.
     const tmpTsConfigPathWithoutWorkspaceRoot = tmpTsConfigPath.replace(context.root, '');
     return { tsConfigPath: tmpTsConfigPathWithoutWorkspaceRoot, dependencies };
 }

package/src/executors/utilities/esbuild-extensions.d.ts

@@ -0,0 +1,10 @@
+import type { IndexHtmlTransform } from '@angular-devkit/build-angular/src/utils/index-file/index-html-generator';
+import type { Plugin } from 'esbuild';
+import type { Connect } from 'vite';
+export type PluginSpec = {
+    path: string;
+    options: any;
+};
+export declare function loadPlugins(plugins: string[] | PluginSpec[] | undefined, tsConfig: string): Promise<Plugin[]>;
+export declare function loadMiddleware(middlewareFns: string[] | undefined, tsConfig: string): Promise<Connect.NextHandleFunction[]>;
+export declare function loadIndexHtmlTransformer(indexHtmlTransformerPath: string, tsConfig: string): Promise<IndexHtmlTransform>;

package/src/executors/utilities/esbuild-extensions.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadIndexHtmlTransformer = exports.loadMiddleware = exports.loadPlugins = void 0;
+const internal_1 = require("@nx/js/src/internal");
+const module_loader_1 = require("./module-loader");
+async function loadPlugins(plugins, tsConfig) {
+    if (!plugins?.length) {
+        return [];
+    }
+    const cleanupTranspiler = (0, internal_1.registerTsProject)(tsConfig);
+    try {
+        return await Promise.all(plugins.map((plugin) => loadPlugin(plugin)));
+    }
+    finally {
+        cleanupTranspiler();
+    }
+}
+exports.loadPlugins = loadPlugins;
+async function loadPlugin(pluginSpec) {
+    const pluginPath = typeof pluginSpec === 'string' ? pluginSpec : pluginSpec.path;
+    let plugin = await (0, module_loader_1.loadModule)(pluginPath);
+    if (typeof plugin === 'function') {
+        plugin =
+            typeof pluginSpec === 'object' ? plugin(pluginSpec.options) : plugin();
+    }
+    return plugin;
+}
+async function loadMiddleware(middlewareFns, tsConfig) {
+    if (!middlewareFns?.length) {
+        return [];
+    }
+    const cleanupTranspiler = (0, internal_1.registerTsProject)(tsConfig);
+    try {
+        return await Promise.all(middlewareFns.map((fnPath) => (0, module_loader_1.loadModule)(fnPath)));
+    }
+    finally {
+        cleanupTranspiler();
+    }
+}
+exports.loadMiddleware = loadMiddleware;
+async function loadIndexHtmlTransformer(indexHtmlTransformerPath, tsConfig) {
+    const cleanupTranspiler = (0, internal_1.registerTsProject)(tsConfig);
+    try {
+        return await (0, module_loader_1.loadModule)(indexHtmlTransformerPath);
+    }
+    finally {
+        cleanupTranspiler();
+    }
+}
+exports.loadIndexHtmlTransformer = loadIndexHtmlTransformer;

package/src/executors/utilities/module-loader.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="node" />
+export declare function loadModule<T = any>(path: string): Promise<T>;
+/**
+ * This uses a dynamic import to load a module which may be ESM.
+ * CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
+ * will currently, unconditionally downlevel dynamic import into a require call.
+ * require calls cannot load ESM code and will result in a runtime error. To workaround
+ * this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
+ * Once TypeScript provides support for keeping the dynamic import this workaround can
+ * be dropped.
+ *
+ * @param modulePath The path of the module to load.
+ * @returns A Promise that resolves to the dynamically imported module.
+ */
+export declare function loadEsmModule<T>(modulePath: string | URL): Promise<T>;

package/src/executors/utilities/module-loader.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadEsmModule = exports.loadModule = void 0;
+const path_1 = require("path");
+const node_url_1 = require("node:url");
+async function loadModule(path) {
+    switch ((0, path_1.extname)(path)) {
+        case '.mjs': {
+            const result = await loadEsmModule((0, node_url_1.pathToFileURL)(path));
+            return result.default ?? result;
+        }
+        case '.cjs': {
+            const result = require(path);
+            return result.default ?? result;
+        }
+        default:
+            // it can be CommonJS or ESM, try both
+            try {
+                const result = require(path);
+                return result.default ?? result;
+            }
+            catch (e) {
+                if (e.code === 'ERR_REQUIRE_ESM') {
+                    const result = await loadEsmModule((0, node_url_1.pathToFileURL)(path));
+                    return result.default ?? result;
+                }
+                throw e;
+            }
+    }
+}
+exports.loadModule = loadModule;
+/**
+ * Lazily compiled dynamic import loader function.
+ */
+let load;
+/**
+ * This uses a dynamic import to load a module which may be ESM.
+ * CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
+ * will currently, unconditionally downlevel dynamic import into a require call.
+ * require calls cannot load ESM code and will result in a runtime error. To workaround
+ * this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
+ * Once TypeScript provides support for keeping the dynamic import this workaround can
+ * be dropped.
+ *
+ * @param modulePath The path of the module to load.
+ * @returns A Promise that resolves to the dynamically imported module.
+ */
+function loadEsmModule(modulePath) {
+    load ??= new Function('modulePath', `return import(modulePath);`);
+    return load(modulePath);
+}
+exports.loadEsmModule = loadEsmModule;

package/src/executors/utilities/ng-compiler-cli.d.ts

@@ -0,0 +1 @@
+export declare function ngCompilerCli(): Promise<typeof import('@angular/compiler-cli')>;

package/src/executors/utilities/ng-compiler-cli.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ngCompilerCli = void 0;
+const module_loader_1 = require("./module-loader");
+function ngCompilerCli() {
+    return (0, module_loader_1.loadEsmModule)('@angular/compiler-cli');
+}
+exports.ngCompilerCli = ngCompilerCli;

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

@@ -0,0 +1,49 @@
+/**
+ * Adapted from the original ng-packagr source.
+ *
+ * Changes made:
+ * - Use our own function to get the TailwindCSS config path to support a
+ * config at the root of the workspace.
+ */
+export declare enum CssUrl {
+    inline = "inline",
+    none = "none"
+}
+export declare class StylesheetProcessor {
+    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;
+}
+/**
+ * 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

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