From aae34fc02dc774d59ecac6483288f47074ee8c2d Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Mon, 3 Apr 2023 10:05:11 -0400
Subject: [PATCH] perf(@angular-devkit/build-angular): fully lazy load sass in
 esbuild builder

When using the esbuild-based browser application builder, the Sass worker pool
import is now lazy to prevent unnecessary module loading when Sass is not used
within an application.
---
 .../src/builders/browser-esbuild/sass-plugin.ts            | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/sass-plugin.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/sass-plugin.ts
index 27f2d1055d41..6d96d3e071ab 100644
--- a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/sass-plugin.ts
+++ b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/sass-plugin.ts
@@ -12,7 +12,7 @@ import { readFile } from 'node:fs/promises';
 import { dirname, extname, join, relative } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import type { CompileResult, Exception, Syntax } from 'sass';
-import {
+import type {
   FileImporterWithRequestContextOptions,
   SassWorkerImplementation,
 } from '../../sass/sass-service';
@@ -93,7 +93,10 @@ async function compileString(
   resolveUrl: (url: string, previousResolvedModules?: Set<string>) => Promise<ResolveResult>,
 ): Promise<OnLoadResult> {
   // Lazily load Sass when a Sass file is found
-  sassWorkerPool ??= new SassWorkerImplementation(true);
+  if (sassWorkerPool === undefined) {
+    const sassService = await import('../../sass/sass-service');
+    sassWorkerPool = new sassService.SassWorkerImplementation(true);
+  }
 
   const warnings: PartialMessage[] = [];
   try {