refactor(@angular-devkit/build-angular): use single search directory list for postcss/tailwind configuration setup

Both the postcss and tailwind configuration file searching during the `application` builder setup look
in the project and workspace root for one of the related configuration files. To avoid unneeded
repeat file access, both searches now reuse directory contents information.

Author: clydin

packages/angular_devkit/build_angular/src/builders/application/options.ts

@@ -18,8 +18,12 @@ import { useJSONBuildLogs } from '../../utils/environment-options';
 import { I18nOptions, createI18nOptions } from '../../utils/i18n-options';
 import { IndexHtmlTransform } from '../../utils/index-file/index-html-generator';
 import { normalizeCacheOptions } from '../../utils/normalize-cache';
-import { loadPostcssConfiguration } from '../../utils/postcss-configuration';
-import { findTailwindConfigurationFile } from '../../utils/tailwind';
+import {
+  SearchDirectory,
+  findTailwindConfiguration,
+  generateSearchDirectories,
+  loadPostcssConfiguration,
+} from '../../utils/postcss-configuration';
 import {
   Schema as ApplicationBuilderOptions,
   I18NTranslation,
@@ -182,11 +186,13 @@ export async function normalizeOptions(
     }
   }
 
-  const postcssConfiguration = await loadPostcssConfiguration(workspaceRoot, projectRoot);
+  // A configuration file can exist in the project or workspace root
+  const searchDirectories = await generateSearchDirectories([projectRoot, workspaceRoot]);
+  const postcssConfiguration = await loadPostcssConfiguration(searchDirectories);
   // Skip tailwind configuration if postcss is customized
   const tailwindConfiguration = postcssConfiguration
     ? undefined
-    : await getTailwindConfig(workspaceRoot, projectRoot, context);
+    : await getTailwindConfig(searchDirectories, workspaceRoot, context);
 
   const globalStyles = normalizeGlobalEntries(options.styles, 'styles');
   const globalScripts = normalizeGlobalEntries(options.scripts, 'scripts');
@@ -349,18 +355,18 @@ export async function normalizeOptions(
 }
 
 async function getTailwindConfig(
+  searchDirectories: SearchDirectory[],
   workspaceRoot: string,
-  projectRoot: string,
   context: BuilderContext,
 ): Promise<{ file: string; package: string } | undefined> {
-  const tailwindConfigurationPath = await findTailwindConfigurationFile(workspaceRoot, projectRoot);
+  const tailwindConfigurationPath = findTailwindConfiguration(searchDirectories);
 
   if (!tailwindConfigurationPath) {
     return undefined;
   }
 
-  // Create a node resolver at the project root as a directory
-  const resolver = createRequire(projectRoot + '/');
+  // Create a node resolver from the configuration file
+  const resolver = createRequire(tailwindConfigurationPath);
   try {
     return {
       file: tailwindConfigurationPath,

packages/angular_devkit/build_angular/src/utils/postcss-configuration.ts

@@ -18,13 +18,19 @@ interface RawPostcssConfiguration {
 }
 
 const postcssConfigurationFiles: string[] = ['postcss.config.json', '.postcssrc.json'];
-
-interface SearchDirectory {
+const tailwindConfigFiles: string[] = [
+  'tailwind.config.js',
+  'tailwind.config.cjs',
+  'tailwind.config.mjs',
+  'tailwind.config.ts',
+];
+
+export interface SearchDirectory {
   root: string;
   files: Set<string>;
 }
 
-async function generateSearchDirectories(roots: string[]): Promise<SearchDirectory[]> {
+export async function generateSearchDirectories(roots: string[]): Promise<SearchDirectory[]> {
   return await Promise.all(
     roots.map((root) =>
       readdir(root, { withFileTypes: true }).then((entries) => ({
@@ -50,6 +56,12 @@ function findFile(
   return undefined;
 }
 
+export function findTailwindConfiguration(
+  searchDirectories: SearchDirectory[],
+): string | undefined {
+  return findFile(searchDirectories, tailwindConfigFiles);
+}
+
 async function readPostcssConfiguration(
   configurationFile: string,
 ): Promise<RawPostcssConfiguration> {
@@ -60,12 +72,8 @@ async function readPostcssConfiguration(
 }
 
 export async function loadPostcssConfiguration(
-  workspaceRoot: string,
-  projectRoot: string,
+  searchDirectories: SearchDirectory[],
 ): Promise<PostcssConfiguration | undefined> {
-  // A configuration file can exist in the project or workspace root
-  const searchDirectories = await generateSearchDirectories([projectRoot, workspaceRoot]);
-
   const configPath = findFile(searchDirectories, postcssConfigurationFiles);
   if (!configPath) {
     return undefined;