cleanup(angular): simplify package executor adjustments for angular v…

…17 (nrwl#20869)

docs/generated/packages/angular/executors/package.json

@@ -43,9 +43,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.json

@@ -240,6 +240,7 @@
     "ora": "5.3.0",
     "parse-markdown-links": "^1.0.4",
     "parse5": "4.0.0",
+    "piscina": "^4.2.1",
     "postcss": "8.4.19",
     "postcss-import": "~14.1.0",
     "postcss-preset-env": "~7.5.0",
@@ -373,4 +374,3 @@
     ]
   }
 }
-

packages/angular/ng-package.json

@@ -24,7 +24,8 @@
     "http-server",
     "magic-string",
     "enquirer",
-    "find-cache-dir"
+    "find-cache-dir",
+    "piscina"
   ],
   "keepLifecycleScripts": true
 }

packages/angular/package.json

@@ -64,7 +64,8 @@
     "@nx/eslint": "file:../eslint",
     "@nx/webpack": "file:../webpack",
     "@nx/web": "file:../web",
-    "@nx/workspace": "file:../workspace"
+    "@nx/workspace": "file:../workspace",
+    "piscina": "^4.2.1"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 15.0.0 < 18.0.0",

packages/angular/src/executors/ng-packagr-lite/ng-packagr-adjustments/styles/stylesheet-processor.ts

@@ -26,7 +26,7 @@ import {
   getTailwindSetup,
   tailwindDirectives,
   TailwindSetup,
-} from '../../../utilities/tailwindcss';
+} from '../../../utilities/ng-packagr/tailwindcss';
 
 const postcss = require('postcss');
 
@@ -317,19 +317,3 @@ function transformSupportedBrowsersToTargets(
 
   return transformed.length ? transformed : undefined;
 }
-
-function customSassImporter(
-  url: string,
-  prev: string
-): { file: string; prev: string } | undefined {
-  // 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,
-  };
-}

packages/angular/src/executors/package/ng-packagr-adjustments/ng-packagr.ts

@@ -0,0 +1,35 @@
+import { NgPackagr, ngPackagr } from 'ng-packagr';
+import type { BuildAngularLibraryExecutorOptions } from '../../package/schema';
+import { getInstalledAngularVersionInfo } from '../../utilities/angular-version-utils';
+import { STYLESHEET_PROCESSOR } from '../../utilities/ng-packagr/stylesheet-processor.di';
+
+export async function getNgPackagrInstance(
+  options: BuildAngularLibraryExecutorOptions
+): Promise<NgPackagr> {
+  const { major: angularMajorVersion } = getInstalledAngularVersionInfo();
+  if (angularMajorVersion >= 17) {
+    const packagr = ngPackagr();
+    packagr.withProviders([STYLESHEET_PROCESSOR]);
+    return packagr;
+  }
+
+  const { NX_ENTRY_POINT_PROVIDERS } = await import(
+    './ng-package/entry-point/entry-point.di'
+  );
+  const { nxProvideOptions } = await import('./ng-package/options.di');
+  const { NX_PACKAGE_PROVIDERS, NX_PACKAGE_TRANSFORM } = await import(
+    './ng-package/package.di'
+  );
+
+  const packagr = new NgPackagr([
+    ...NX_PACKAGE_PROVIDERS,
+    ...NX_ENTRY_POINT_PROVIDERS,
+    nxProvideOptions({
+      tailwindConfig: options.tailwindConfig,
+      watch: options.watch,
+    }),
+  ]);
+  packagr.withBuildTransform(NX_PACKAGE_TRANSFORM.provide);
+
+  return packagr;
+}

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

@@ -26,7 +26,7 @@ import {
   getTailwindSetup,
   tailwindDirectives,
   TailwindSetup,
-} from '../../../utilities/tailwindcss';
+} from '../../../utilities/ng-packagr/tailwindcss';
 
 const postcss = require('postcss');
 
@@ -310,19 +310,3 @@ function transformSupportedBrowsersToTargets(
 
   return transformed.length ? transformed : undefined;
 }
-
-function customSassImporter(
-  url: string,
-  prev: string
-): { file: string; prev: string } | undefined {
-  // 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,
-  };
-}

packages/angular/src/executors/package/package.impl.ts

@@ -4,37 +4,23 @@ import {
   calculateProjectBuildableDependencies,
   checkDependentProjectsHaveBeenBuilt,
   createTmpTsConfig,
-  DependentBuildableProjectNode,
+  type DependentBuildableProjectNode,
 } from '@nx/js/src/utils/buildable-libs-utils';
 import type { NgPackagr } from 'ng-packagr';
 import { resolve } from 'path';
 import { from } from 'rxjs';
-import { mapTo, switchMap, tap } from 'rxjs/operators';
+import { mapTo, switchMap } from 'rxjs/operators';
 import { parseRemappedTsConfigAndMergeDefaults } from '../utilities/typescript';
-import { NX_ENTRY_POINT_PROVIDERS } from './ng-packagr-adjustments/ng-package/entry-point/entry-point.di';
-import { nxProvideOptions } from './ng-packagr-adjustments/ng-package/options.di';
-import {
-  NX_PACKAGE_PROVIDERS,
-  NX_PACKAGE_TRANSFORM,
-} from './ng-packagr-adjustments/ng-package/package.di';
+import { getNgPackagrInstance } from './ng-packagr-adjustments/ng-packagr';
 import type { BuildAngularLibraryExecutorOptions } from './schema';
 
 async function initializeNgPackagr(
   options: BuildAngularLibraryExecutorOptions,
   context: ExecutorContext,
   projectDependencies: DependentBuildableProjectNode[]
 ): Promise<NgPackagr> {
-  const packager = new (await import('ng-packagr')).NgPackagr([
-    ...NX_PACKAGE_PROVIDERS,
-    ...NX_ENTRY_POINT_PROVIDERS,
-    nxProvideOptions({
-      tailwindConfig: options.tailwindConfig,
-      watch: options.watch,
-    }),
-  ]);
-
-  packager.forProject(resolve(context.root, options.project));
-  packager.withBuildTransform(NX_PACKAGE_TRANSFORM.provide);
+  const ngPackagr = await getNgPackagrInstance(options);
+  ngPackagr.forProject(resolve(context.root, options.project));
 
   if (options.tsConfig) {
     const remappedTsConfigFilePath = createTmpTsConfig(
@@ -48,10 +34,10 @@ async function initializeNgPackagr(
       options.tsConfig,
       remappedTsConfigFilePath
     );
-    packager.withTsConfig(tsConfig);
+    ngPackagr.withTsConfig(tsConfig);
   }
 
-  return packager;
+  return ngPackagr;
 }
 
 /**

packages/angular/src/executors/package/schema.json

@@ -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,