diff --git a/packages/angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.ts b/packages/angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.ts index 72bc83779eb7..a2c721d91200 100644 --- a/packages/angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.ts +++ b/packages/angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.ts @@ -206,13 +206,8 @@ export class StylesheetPluginFactory { if (!postcssProcessor) { postcss ??= (await import('postcss')).default; postcssProcessor = postcss(); - for (const [pluginName, pluginOptions] of options.postcssConfiguration.plugins) { - const { default: plugin } = await import(pluginName); - if (typeof plugin !== 'function' || plugin.postcss !== true) { - throw new Error(`Attempted to load invalid Postcss plugin: "${pluginName}"`); - } - - postcssProcessor.use(plugin(pluginOptions)); + for (const plugin of options.postcssConfiguration.plugins) { + postcssProcessor.use(plugin); } postcssProcessors.set(postCssInstanceKey, new WeakRef(postcssProcessor)); diff --git a/packages/angular/build/src/utils/postcss-configuration.ts b/packages/angular/build/src/utils/postcss-configuration.ts index 1861f9f2b1db..c3c2acad5165 100644 --- a/packages/angular/build/src/utils/postcss-configuration.ts +++ b/packages/angular/build/src/utils/postcss-configuration.ts @@ -6,18 +6,19 @@ * found in the LICENSE file at https://angular.dev/license */ -import { readFile, readdir } from 'node:fs/promises'; +import { readdir } from 'node:fs/promises'; import { join } from 'node:path'; +import type { AcceptedPlugin } from 'postcss'; export interface PostcssConfiguration { - plugins: [name: string, options?: object | string][]; + plugins: AcceptedPlugin[]; } -interface RawPostcssConfiguration { - plugins?: Record | (string | [string, object])[]; -} - -const postcssConfigurationFiles: string[] = ['postcss.config.json', '.postcssrc.json']; +const postcssConfigurationFiles: string[] = [ + 'postcss.config.js', + 'postcss.config.cjs', + 'postcss.config.mjs', +]; const tailwindConfigFiles: string[] = [ 'tailwind.config.js', 'tailwind.config.cjs', @@ -62,15 +63,6 @@ export function findTailwindConfiguration( return findFile(searchDirectories, tailwindConfigFiles); } -async function readPostcssConfiguration( - configurationFile: string, -): Promise { - const data = await readFile(configurationFile, 'utf-8'); - const config = JSON.parse(data) as RawPostcssConfiguration; - - return config; -} - export async function loadPostcssConfiguration( searchDirectories: SearchDirectory[], ): Promise { @@ -79,45 +71,12 @@ export async function loadPostcssConfiguration( return undefined; } - const raw = await readPostcssConfiguration(configPath); + const config = await import(configPath); // If no plugins are defined, consider it equivalent to no configuration - if (!raw.plugins || typeof raw.plugins !== 'object') { + if (!config.plugins || !Array.isArray(config.plugins)) { return undefined; } - // Normalize plugin array form - if (Array.isArray(raw.plugins)) { - if (raw.plugins.length < 1) { - return undefined; - } - - const config: PostcssConfiguration = { plugins: [] }; - for (const element of raw.plugins) { - if (typeof element === 'string') { - config.plugins.push([element]); - } else { - config.plugins.push(element); - } - } - - return config; - } - - // Normalize plugin object map form - const entries = Object.entries(raw.plugins); - if (entries.length < 1) { - return undefined; - } - - const config: PostcssConfiguration = { plugins: [] }; - for (const [name, options] of entries) { - if (!options || (typeof options !== 'object' && typeof options !== 'string')) { - continue; - } - - config.plugins.push([name, options]); - } - return config; }