feat(angular): support using a custom postcss config in ng-packagr ex…

…ecutors (#21680)
nrwl · Feb 9, 2024 · 8830557 · 8830557
1 parent 54efff5
commit 8830557
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/packages/angular/src/executors/package/ng-packagr-adjustments/ng-packagr.ts b/packages/angular/src/executors/package/ng-packagr-adjustments/ng-packagr.ts
@@ -1,13 +1,16 @@
 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 { STYLESHEET_PROCESSOR } = await import(
+      '../../utilities/ng-packagr/stylesheet-processor.di'
+    );
+
     const packagr = ngPackagr();
     packagr.withProviders([STYLESHEET_PROCESSOR]);
     return packagr;

diff --git a/packages/angular/src/executors/utilities/ng-packagr/stylesheet-processor.ts b/packages/angular/src/executors/utilities/ng-packagr/stylesheet-processor.ts
@@ -14,6 +14,9 @@ import { colors } from 'ng-packagr/lib/utils/color';
 // using this instead of the one from ng-packagr
 import { getTailwindConfigPath } from './tailwindcss';
 import { workspaceRoot } from '@nx/devkit';
+import type { PostcssConfiguration } from 'ng-packagr/lib/styles/postcss-configuration';
+import { gte } from 'semver';
+import { getInstalledPackageVersionInfo } from '../angular-version-utils';
 
 const maxWorkersVariable = process.env['NG_BUILD_MAX_WORKERS'];
 const maxThreads =
@@ -57,7 +60,7 @@ export class StylesheetProcessor {
     filePath: string;
     content: string;
   }): Promise<string> {
-    this.createRenderWorker();
+    await this.createRenderWorker();
 
     return this.renderWorker.run({ content, filePath });
   }
@@ -67,7 +70,7 @@ export class StylesheetProcessor {
     void this.renderWorker?.destroy();
   }
 
-  private createRenderWorker(): void {
+  private async createRenderWorker(): Promise<void> {
     if (this.renderWorker) {
       return;
     }
@@ -88,6 +91,18 @@ export class StylesheetProcessor {
 
     const browserslistData = browserslist(undefined, { path: this.basePath });
 
+    const { version: ngPackagrVersion } =
+      getInstalledPackageVersionInfo('ng-packagr');
+    let postcssConfiguration: PostcssConfiguration | undefined;
+    if (gte(ngPackagrVersion, '17.2.0-next.0')) {
+      const { loadPostcssConfiguration } = await import(
+        'ng-packagr/lib/styles/postcss-configuration'
+      );
+      postcssConfiguration = await loadPostcssConfiguration(
+        this.projectBasePath
+      );
+    }
+
     this.renderWorker = new Piscina({
       filename: require.resolve(
         'ng-packagr/lib/styles/stylesheet-processor-worker'
@@ -98,6 +113,7 @@ export class StylesheetProcessor {
         FORCE_COLOR: '' + colors.enabled,
       },
       workerData: {
+        postcssConfiguration,
         tailwindConfigPath: getTailwindConfigPath(
           this.projectBasePath,
           workspaceRoot