fix(nf): add support for tailwind 4 with only postcssconfig file

Closes #964

Author: JGhignatti

libs/native-federation/src/utils/angular-esbuild-adapter.ts

@@ -12,6 +12,7 @@ import {
   getSupportedBrowsers,
   generateSearchDirectories,
   findTailwindConfiguration,
+  loadPostcssConfiguration,
 } from '@angular/build/private';
 
 import { createCompilerPluginOptions } from './create-compiler-options';
@@ -202,22 +203,17 @@ async function runEsbuild(
     builderOptions.optimization
   );
   const sourcemapOptions = normalizeSourceMaps(builderOptions.sourceMap);
+
   const searchDirectories = await generateSearchDirectories([
     projectRoot,
     workspaceRoot,
   ]);
-  const tailwindConfigurationPath =
-    findTailwindConfiguration(searchDirectories);
-
-  const fullProjectRoot = path.join(workspaceRoot, projectRoot);
-  const resolver = createRequire(fullProjectRoot + '/');
-
-  const tailwindConfiguration = tailwindConfigurationPath
-    ? {
-        file: tailwindConfigurationPath,
-        package: resolver.resolve('tailwindcss'),
-      }
-    : undefined;
+  const postcssConfiguration = await loadPostcssConfiguration(
+    searchDirectories
+  );
+  const tailwindConfiguration = postcssConfiguration
+    ? undefined
+    : await getTailwindConfig(searchDirectories);
 
   const outputNames = {
     bundles: '[name]',
@@ -256,6 +252,7 @@ async function runEsbuild(
       inlineStyleLanguage: builderOptions.inlineStyleLanguage,
       jit: false,
       tailwindConfiguration,
+      postcssConfiguration,
     } as any,
     target,
     undefined
@@ -303,7 +300,7 @@ async function runEsbuild(
       ...(!dev ? { ngDevMode: 'false' } : {}),
       ngJitMode: 'false',
     },
-    ...(builderOptions.loader ? {loader: builderOptions.loader} : {}),
+    ...(builderOptions.loader ? { loader: builderOptions.loader } : {}),
   };
 
   const ctx = await esbuild.context(config);
@@ -330,6 +327,22 @@ async function runEsbuild(
   return writtenFiles;
 }
 
+async function getTailwindConfig(
+  searchDirectories: { root: string; files: Set<string> }[]
+): Promise<{ file: string; package: string } | undefined> {
+  const tailwindConfigurationPath =
+    findTailwindConfiguration(searchDirectories);
+
+  if (!tailwindConfigurationPath) {
+    return undefined;
+  }
+
+  return {
+    file: tailwindConfigurationPath,
+    package: createRequire(tailwindConfigurationPath).resolve('tailwindcss'),
+  };
+}
+
 function createTsConfigForFederation(
   workspaceRoot: string,
   tsConfigPath: string,