Skip to content

Commit d998707

Browse files
committed
perf(@angular-devkit/build-angular): only create one instance of postcss when needed
Prior to this change a postcss instance was created for every component style. This can cause a performance overhead when using tailwindcss, since each tailwind instance would do multiple IO calls to get the list of files specified in the `content` field. (cherry picked from commit 48b2732)
1 parent 8072b85 commit d998707

File tree

1 file changed

+15
-5
lines changed

1 file changed

+15
-5
lines changed

packages/angular_devkit/build_angular/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.ts

+15-5
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,11 @@ export interface StylesheetLanguage {
6969
): OnLoadResult | Promise<OnLoadResult>;
7070
}
7171

72+
/**
73+
* Cached postcss instances that can be re-used between various StylesheetPluginFactory instances.
74+
*/
75+
const postcssProcessor = new Map<string, WeakRef<import('postcss').Processor>>();
76+
7277
export class StylesheetPluginFactory {
7378
private postcssProcessor?: import('postcss').Processor;
7479

@@ -94,11 +99,16 @@ export class StylesheetPluginFactory {
9499
}
95100

96101
if (options.tailwindConfiguration) {
97-
postcss ??= (await import('postcss')).default;
98-
const tailwind = await import(options.tailwindConfiguration.package);
99-
this.postcssProcessor = postcss().use(
100-
tailwind.default({ config: options.tailwindConfiguration.file }),
101-
);
102+
const { package: tailwindPackage, file: config } = options.tailwindConfiguration;
103+
const postCssInstanceKey = tailwindPackage + ':' + config;
104+
this.postcssProcessor = postcssProcessor.get(postCssInstanceKey)?.deref();
105+
106+
if (!this.postcssProcessor) {
107+
postcss ??= (await import('postcss')).default;
108+
const tailwind = await import(tailwindPackage);
109+
this.postcssProcessor = postcss().use(tailwind.default({ config }));
110+
postcssProcessor.set(postCssInstanceKey, new WeakRef(this.postcssProcessor));
111+
}
102112
}
103113

104114
return this.postcssProcessor;

0 commit comments

Comments
 (0)