@nx/angular 17.0.4 → 17.0.6

package/src/executors/package/ng-packagr-adjustments/ng-package/entry-point/compile-ngc.transform.js

@@ -24,11 +24,9 @@ const compileNgcTransformFactory = (StylesheetProcessor, options) => {
             hideCursor: false,
             discardStdin: false,
         });
-        const entryPoints = graph.filter(nodes_1.isEntryPoint);
-        const entryPoint = graph.find((0, nodes_1.isEntryPointInProgress)());
-        const ngPackageNode = graph.find(nodes_1.isPackage);
-        const projectBasePath = ngPackageNode.data.primary.basePath;
         try {
+            const entryPoint = graph.find((0, nodes_1.isEntryPointInProgress)());
+            const entryPoints = graph.filter(nodes_1.isEntryPoint);
             // Add paths mappings for dependencies
             const tsConfig = (0, tsconfig_1.setDependenciesTsConfigPaths)(entryPoint.data.tsConfig, entryPoints);
             const angularVersion = (0, angular_version_utils_1.getInstalledAngularVersionInfo)();
@@ -49,7 +47,7 @@ const compileNgcTransformFactory = (StylesheetProcessor, options) => {
                     await ngccProcessor.process();
                 }
             }
-            entryPoint.cache.stylesheetProcessor ??= new StylesheetProcessor(projectBasePath, basePath, cssUrl, styleIncludePaths, options.cacheEnabled && options.cacheDirectory, options.tailwindConfig);
+            entryPoint.cache.stylesheetProcessor ??= new StylesheetProcessor(basePath, cssUrl, styleIncludePaths, options.cacheEnabled && options.cacheDirectory, options.watch, options.tailwindConfig);
             await (0, compile_source_files_1.compileSourceFiles)(graph, tsConfig, moduleResolutionCache, options, {
                 outDir: path.dirname(esmModulePath),
                 declarationDir: path.dirname(declarations),

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 StylesheetProcessor instead of the one provided by ng-packagr.
+ * - Use custom cacheCompilerHost 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 StylesheetProcessor instead of the one provided by ng-packagr.
+ * - Use custom cacheCompilerHost 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 cache_compiler_host_1 = require("ng-packagr/lib/ts/cache-compiler-host");
+const ng_compiler_cli_1 = require("ng-packagr/lib/utils/ng-compiler-cli");
 const node_path_1 = require("node:path");
 const ts = require("typescript");
 const angular_version_utils_1 = require("../../../utilities/angular-version-utils");
-const ng_compiler_cli_1 = require("../../../utilities/ng-compiler-cli");
+const cache_compiler_host_1 = require("../ts/cache-compiler-host");
 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,7 +59,9 @@ async function compileSourceFiles(graph, tsConfig, moduleResolutionCache, option
         cache.oldNgtscProgram = angularProgram;
     }
     else {
-        builder = ts.createEmitAndSemanticDiagnosticsBuilderProgram(typeScriptProgram, tsCompilerHost);
+        // 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);
     }
     // Update semantic diagnostics cache
     const affectedFiles = new Set();
@@ -156,15 +158,6 @@ 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,8 +2,10 @@
  * 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 plugin needed to support TailwindCSS.
+ * - Added PostCSS plugins needed to support TailwindCSS.
+ * - Added watch mode parameter.
  */
 export declare enum CssUrl {
     inline = "inline",
@@ -15,22 +17,25 @@ export interface Result {
     error?: string;
 }
 export declare class StylesheetProcessor {
-    private readonly projectBasePath;
     private readonly basePath;
     private readonly cssUrl?;
     private readonly includePaths?;
-    private cacheDirectory?;
+    private readonly cacheDirectory?;
+    private readonly watch?;
     private readonly tailwindConfig?;
     private browserslistData;
     private targets;
     private postCssProcessor;
     private esbuild;
     private styleIncludePaths;
-    constructor(projectBasePath: string, basePath: string, cssUrl?: CssUrl, includePaths?: string[], cacheDirectory?: string | false, tailwindConfig?: string);
+    private tailwindSetup;
+    constructor(basePath: string, cssUrl?: CssUrl, includePaths?: string[], cacheDirectory?: string | false, watch?: boolean, tailwindConfig?: string);
     process({ filePath, content, }: {
         filePath: string;
         content: string;
     }): Promise<string>;
-    private createPostCssProcessor;
+    private getCachedResult;
+    private containsTailwindDirectives;
+    private createPostCssPlugins;
     private renderCss;
 }

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

@@ -3,8 +3,10 @@
  * 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 plugin needed to support TailwindCSS.
+ * - Added PostCSS plugins needed to support TailwindCSS.
+ * - Added watch mode parameter.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StylesheetProcessor = exports.CssUrl = void 0;
@@ -14,10 +16,11 @@ 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 autoprefixer = require("autoprefixer");
+const postcssPresetEnv = require("postcss-preset-env");
 const postcssUrl = require("postcss-url");
 const node_url_1 = require("node:url");
-const tailwindcss_1 = require("../../../utilities/ng-packagr/tailwindcss");
+const angular_version_utils_1 = require("../../../utilities/angular-version-utils");
+const tailwindcss_1 = require("../../../utilities/tailwindcss");
 const postcss = require('postcss');
 var CssUrl;
 (function (CssUrl) {
@@ -25,20 +28,20 @@ var CssUrl;
     CssUrl["none"] = "none";
 })(CssUrl || (exports.CssUrl = CssUrl = {}));
 class StylesheetProcessor {
-    constructor(projectBasePath, basePath, cssUrl, includePaths, cacheDirectory, tailwindConfig) {
-        this.projectBasePath = projectBasePath;
+    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
         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 versions',
+            'last 2 Chrome version',
             'last 1 Firefox version',
             'last 2 Edge major versions',
             'last 2 Safari major versions',
@@ -58,24 +61,17 @@ class StylesheetProcessor {
         }
         this.browserslistData = browserslist(undefined, { path: this.basePath });
         this.targets = transformSupportedBrowsersToTargets(this.browserslistData);
-        const tailwindSetup = (0, tailwindcss_1.getTailwindSetup)(this.projectBasePath, this.tailwindConfig);
-        if (tailwindSetup) {
-            this.cacheDirectory = undefined;
-        }
-        this.postCssProcessor = this.createPostCssProcessor(tailwindSetup);
+        this.tailwindSetup = (0, tailwindcss_1.getTailwindSetup)(this.basePath, this.tailwindConfig);
+        this.postCssProcessor = this.createPostCssPlugins();
     }
     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')) {
+            !content.includes('@use') &&
+            !this.containsTailwindDirectives(content)) {
             // No transitive deps and no Tailwind directives, we can cache more aggressively.
-            key = await (0, cache_1.generateKey)(content, CACHE_KEY_VALUES);
+            key = await (0, cache_1.generateKey)(content, ...this.browserslistData, filePath);
             const result = await (0, cache_1.readCacheEntry)(this.cacheDirectory, key);
             if (result) {
                 result.warnings.forEach((msg) => log.warn(msg));
@@ -84,16 +80,18 @@ class StylesheetProcessor {
         }
         // Render pre-processor language (sass, styl, less)
         const renderedCss = await this.renderCss(filePath, content);
-        // 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);
-        }
+        let containsTailwindDirectives = false;
         if (this.cacheDirectory) {
-            const cachedResult = await (0, cache_1.readCacheEntry)(this.cacheDirectory, key);
-            if (cachedResult) {
-                cachedResult.warnings.forEach((msg) => log.warn(msg));
-                return cachedResult.css;
+            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;
+                }
             }
         }
         // Render postcss (autoprefixing and friends)
@@ -101,6 +99,15 @@ 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',
@@ -122,17 +129,29 @@ class StylesheetProcessor {
         warnings.forEach((msg) => log.warn(msg));
         return code;
     }
-    createPostCssProcessor(tailwindSetup) {
-        const postCssPlugins = [];
-        if (tailwindSetup) {
-            postCssPlugins.push((0, tailwindcss_1.getTailwindPostCssPlugin)(tailwindSetup));
+    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() {
+        const postCssPlugins = [];
         if (this.cssUrl !== CssUrl.none) {
             postCssPlugins.push(postcssUrl({ url: this.cssUrl }));
         }
-        postCssPlugins.push(autoprefixer({
-            ignoreUnknownVersions: true,
-            overrideBrowserslist: this.browserslistData,
+        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,
         }));
         return postcss(postCssPlugins);
     }
@@ -141,11 +160,25 @@ class StylesheetProcessor {
         switch (ext) {
             case '.sass':
             case '.scss': {
-                return (await Promise.resolve().then(() => require('sass'))).compileString(css, {
+                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, {
                     url: (0, node_url_1.pathToFileURL)(filePath),
                     syntax: '.sass' === ext ? 'indented' : 'scss',
                     loadPaths: this.styleIncludePaths,
-                }).css;
+                })
+                    .css.toString();
             }
             case '.less': {
                 const { css: content } = await (await Promise.resolve().then(() => require('less'))).render(css, {
@@ -181,7 +214,10 @@ 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 (esBuildSupportedBrowsers.has(browserName)) {
+        if (browserName === 'ie') {
+            transformed.push('edge12');
+        }
+        else 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.
@@ -192,3 +228,14 @@ 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/ng-packagr-adjustments/ts/cache-compiler-host.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Adapted from the original ng-packagr source.
+ *
+ * Changes made:
+ * - Changed filePath passed to the StylesheetProcessor.parse when is a .ts file and inlineStyleLanguage is set.
+ */
+import type { CompilerHost, CompilerOptions } from '@angular/compiler-cli';
+import { FileCache } from 'ng-packagr/lib/file-system/file-cache';
+import { BuildGraph } from 'ng-packagr/lib/graph/build-graph';
+import { EntryPointNode } from 'ng-packagr/lib/ng-package/nodes';
+import { NgPackageConfig } from 'ng-packagr/ng-package.schema';
+import * as ts from 'typescript';
+import { StylesheetProcessor } from '../styles/stylesheet-processor';
+export declare function cacheCompilerHost(graph: BuildGraph, entryPoint: EntryPointNode, compilerOptions: CompilerOptions, moduleResolutionCache: ts.ModuleResolutionCache, stylesheetProcessor?: StylesheetProcessor, inlineStyleLanguage?: NgPackageConfig['inlineStyleLanguage'], sourcesFileCache?: FileCache): CompilerHost;
+export declare function augmentProgramWithVersioning(program: ts.Program): void;

package/src/executors/package/ng-packagr-adjustments/ts/cache-compiler-host.js

@@ -0,0 +1,197 @@
+"use strict";
+/**
+ * Adapted from the original ng-packagr source.
+ *
+ * Changes made:
+ * - Changed filePath passed to the StylesheetProcessor.parse when is a .ts file and inlineStyleLanguage is set.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.augmentProgramWithVersioning = exports.cacheCompilerHost = void 0;
+const crypto_1 = require("crypto");
+const node_1 = require("ng-packagr/lib/graph/node");
+const nodes_1 = require("ng-packagr/lib/ng-package/nodes");
+const path_1 = require("ng-packagr/lib/utils/path");
+const assert = require("node:assert");
+const path = require("path");
+const semver_1 = require("semver");
+const ts = require("typescript");
+const angular_version_utils_1 = require("../../../utilities/angular-version-utils");
+function cacheCompilerHost(graph, entryPoint, compilerOptions, moduleResolutionCache, stylesheetProcessor, inlineStyleLanguage, sourcesFileCache = entryPoint.cache.sourcesFileCache) {
+    const compilerHost = ts.createIncrementalCompilerHost(compilerOptions);
+    const { version: ngPackagrVersion } = (0, angular_version_utils_1.getInstalledPackageVersionInfo)('ng-packagr');
+    const getNode = (fileName) => {
+        const nodeUri = (0, nodes_1.fileUrl)((0, path_1.ensureUnixPath)(fileName));
+        let node = graph.get(nodeUri);
+        if (!node) {
+            node = new node_1.Node(nodeUri);
+            graph.put(node);
+        }
+        return node;
+    };
+    const addDependee = (fileName) => {
+        const node = getNode(fileName);
+        entryPoint.dependsOn(node);
+    };
+    const { flatModuleFile, destinationPath, entryFile } = entryPoint.data.entryPoint;
+    const flatModuleFileDtsFilename = `${flatModuleFile}.d.ts`;
+    const flatModuleFileDtsPath = (0, path_1.ensureUnixPath)(path.join(destinationPath, flatModuleFileDtsFilename));
+    const hasIndexEntryFile = path.basename(entryFile.toLowerCase()) === 'index.ts';
+    return {
+        ...compilerHost,
+        // ts specific
+        fileExists: (fileName) => {
+            const cache = sourcesFileCache.getOrCreate(fileName);
+            if (cache.exists === undefined) {
+                cache.exists = compilerHost.fileExists.call(this, fileName);
+            }
+            return cache.exists;
+        },
+        getSourceFile: (fileName, languageVersion) => {
+            addDependee(fileName);
+            const cache = sourcesFileCache.getOrCreate(fileName);
+            if (!cache.sourceFile) {
+                cache.sourceFile = compilerHost.getSourceFile.call(this, fileName, languageVersion);
+            }
+            return cache.sourceFile;
+        },
+        writeFile: (fileName, data, writeByteOrderMark, onError, sourceFiles) => {
+            if (fileName.includes('.ngtypecheck.')) {
+                return;
+            }
+            if (!sourceFiles?.length && fileName.endsWith('.tsbuildinfo')) {
+                // Save builder info contents to specified location
+                compilerHost.writeFile.call(this, fileName, data, writeByteOrderMark, onError, sourceFiles);
+                return;
+            }
+            assert(sourceFiles?.length === 1, 'Invalid TypeScript program emit for ' + fileName);
+            if (fileName.endsWith('.d.ts')) {
+                if (fileName === flatModuleFileDtsPath) {
+                    if (hasIndexEntryFile) {
+                        // In case the entry file is index.ts, we should not emit the `d.ts` which are a re-export of the `index.ts`.
+                        // Because it will cause a conflict.
+                        return;
+                    }
+                    else {
+                        // Rename file to index.d.ts so that TypeScript can resolve types without
+                        // them needing to be referenced in the package.json manifest.
+                        fileName = fileName.replace(flatModuleFileDtsFilename, 'index.d.ts');
+                    }
+                }
+                sourceFiles.forEach((source) => {
+                    const cache = sourcesFileCache.getOrCreate(source.fileName);
+                    if (!cache.declarationFileName) {
+                        cache.declarationFileName = (0, path_1.ensureUnixPath)(fileName);
+                    }
+                });
+            }
+            else {
+                fileName = fileName.replace(/\.js(\.map)?$/, '.mjs$1');
+                const outputCache = entryPoint.cache.outputCache;
+                // added in https://github.com/ng-packagr/ng-packagr/pull/2502, first released in 15.0.2
+                if ((0, semver_1.gte)(ngPackagrVersion, '15.0.2')) {
+                    // Extract inline sourcemap which will later be used by rollup.
+                    const version = (0, crypto_1.createHash)('sha256').update(data).digest('hex');
+                    let map = undefined;
+                    if (fileName.endsWith('.mjs')) {
+                        const cachedData = outputCache.get(fileName);
+                        map =
+                            cachedData?.version === version
+                                ? cachedData.map
+                                : require('convert-source-map').fromComment(data).toJSON();
+                    }
+                    outputCache.set(fileName, {
+                        content: data,
+                        version,
+                        map,
+                    });
+                }
+                else {
+                    outputCache.set(fileName, {
+                        content: data,
+                        version: (0, crypto_1.createHash)('sha256').update(data).digest('hex'),
+                    });
+                }
+            }
+            compilerHost.writeFile.call(this, fileName, data, writeByteOrderMark, onError, sourceFiles);
+        },
+        readFile: (fileName) => {
+            addDependee(fileName);
+            const cache = sourcesFileCache.getOrCreate(fileName);
+            if (cache.content === undefined) {
+                cache.content = compilerHost.readFile.call(this, fileName);
+            }
+            return cache.content;
+        },
+        resolveModuleNames: (moduleNames, containingFile) => {
+            return moduleNames.map((moduleName) => {
+                const { resolvedModule } = ts.resolveModuleName(moduleName, (0, path_1.ensureUnixPath)(containingFile), compilerOptions, compilerHost, moduleResolutionCache);
+                return resolvedModule;
+            });
+        },
+        resourceNameToFileName: (resourceName, containingFilePath) => {
+            const resourcePath = path.resolve(path.dirname(containingFilePath), resourceName);
+            const containingNode = getNode(containingFilePath);
+            const resourceNode = getNode(resourcePath);
+            containingNode.dependsOn(resourceNode);
+            return resourcePath;
+        },
+        readResource: async (fileName) => {
+            addDependee(fileName);
+            const cache = sourcesFileCache.getOrCreate(fileName);
+            if (cache.content === undefined) {
+                if (!compilerHost.fileExists(fileName)) {
+                    throw new Error(`Cannot read file ${fileName}.`);
+                }
+                if (/(?:html?|svg)$/.test(path.extname(fileName))) {
+                    // template
+                    cache.content = compilerHost.readFile.call(this, fileName);
+                }
+                else {
+                    // stylesheet
+                    cache.content = await stylesheetProcessor.process({
+                        filePath: fileName,
+                        content: compilerHost.readFile.call(this, fileName),
+                    });
+                }
+                cache.exists = true;
+            }
+            return cache.content;
+        },
+        transformResource: async (data, context) => {
+            if (context.resourceFile || context.type !== 'style') {
+                return null;
+            }
+            if (inlineStyleLanguage) {
+                const key = (0, crypto_1.createHash)('sha1').update(data).digest('hex');
+                const fileName = `${context.containingFile}-${key}.${inlineStyleLanguage}`;
+                const cache = sourcesFileCache.getOrCreate(fileName);
+                if (cache.content === undefined) {
+                    cache.content = await stylesheetProcessor.process({
+                        filePath: context.containingFile,
+                        content: data,
+                    });
+                    const virtualFileNode = getNode(fileName);
+                    const containingFileNode = getNode(context.containingFile);
+                    virtualFileNode.dependsOn(containingFileNode);
+                }
+                cache.exists = true;
+                return { content: cache.content };
+            }
+            return null;
+        },
+    };
+}
+exports.cacheCompilerHost = cacheCompilerHost;
+function augmentProgramWithVersioning(program) {
+    const baseGetSourceFiles = program.getSourceFiles;
+    program.getSourceFiles = function (...parameters) {
+        const files = baseGetSourceFiles(...parameters);
+        for (const file of files) {
+            if (file.version === undefined) {
+                file.version = (0, crypto_1.createHash)('sha256').update(file.text).digest('hex');
+            }
+        }
+        return files;
+    };
+}
+exports.augmentProgramWithVersioning = augmentProgramWithVersioning;

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

@@ -1,5 +1,5 @@
 import type { ExecutorContext } from '@nx/devkit';
-import { type DependentBuildableProjectNode } from '@nx/js/src/utils/buildable-libs-utils';
+import { 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,16 +7,26 @@ const path_1 = require("path");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const typescript_1 = require("../utilities/typescript");
-const ng_packagr_1 = require("./ng-packagr-adjustments/ng-packagr");
+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");
 async function initializeNgPackagr(options, context, projectDependencies) {
-    const ngPackagr = await (0, ng_packagr_1.getNgPackagrInstance)(options);
-    ngPackagr.forProject((0, path_1.resolve)(context.root, options.project));
+    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);
     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);
-        ngPackagr.withTsConfig(tsConfig);
+        packager.withTsConfig(tsConfig);
     }
-    return ngPackagr;
+    return packager;
 }
 /**
  * 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": "https://json-schema.org/schema",
+  "$schema": "http://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. _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_.",
+      "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.",
       "x-completion-type": "file",
-      "x-completion-glob": "tailwind.config@(.js|.cjs|.mjs|.ts)"
+      "x-completion-glob": "tailwind.config.js"
     }
   },
   "additionalProperties": false,

package/src/executors/utilities/tailwindcss.d.ts

@@ -0,0 +1,7 @@
+export interface TailwindSetup {
+    tailwindConfigPath: string;
+    tailwindPackagePath: string;
+}
+export declare const tailwindDirectives: string[];
+export declare function getTailwindSetup(basePath: string, tailwindConfig?: string): TailwindSetup | undefined;
+export declare function getTailwindPostCssPlugins({ tailwindConfigPath, tailwindPackagePath }: TailwindSetup, includePaths?: string[], watch?: boolean): any[];