@simplysm/sd-cli 11.0.9 → 11.0.12

package/src/build-tools/SdNgBundler.ts

@@ -1,14 +1,8 @@
-import {
-  createCompilerPlugin,
-  SourceFileCache
-} from "@angular-devkit/build-angular/src/tools/esbuild/angular/compiler-plugin";
-import {NormalizedApplicationBuildOptions} from "@angular-devkit/build-angular/src/builders/application/options";
+import {createCompilerPlugin} from "@angular-devkit/build-angular/src/tools/esbuild/angular/compiler-plugin";
 import path from "path";
-import {CrossOrigin} from "@angular-devkit/build-angular/src/builders/application/schema";
-import {BundlerContext} from "@angular-devkit/build-angular/src/tools/esbuild/bundler-context";
+import {BundlerContext, InitialFileRecord} from "@angular-devkit/build-angular/src/tools/esbuild/bundler-context";
 import esbuild from "esbuild";
-import {createCompilerPluginOptions} from "@angular-devkit/build-angular/src/tools/esbuild/compiler-plugin-options";
-import {FsUtil, Logger, PathUtil} from "@simplysm/sd-core-node";
+import {FsUtil, PathUtil} from "@simplysm/sd-core-node";
 import {fileURLToPath} from "url";
 import {createVirtualModulePlugin} from "@angular-devkit/build-angular/src/tools/esbuild/virtual-module-plugin";
 import {
@@ -17,32 +11,62 @@ import {
 import nodeStdLibBrowser from "node-stdlib-browser";
 import nodeStdLibBrowserPlugin from "node-stdlib-browser/helpers/esbuild/plugin";
 import {ExecutionResult} from "@angular-devkit/build-angular/src/tools/esbuild/bundler-execution-result";
-import {INpmConfig, ISdCliClientPackageConfig, ISdCliPackageBuildResult} from "../commons";
-import {generateIndexHtml} from "@angular-devkit/build-angular/src/tools/esbuild/index-html-generator";
+import {INpmConfig, ISdCliPackageBuildResult} from "../commons";
 import {copyAssets} from "@angular-devkit/build-angular/src/utils/copy-assets";
 import {extractLicenses} from "@angular-devkit/build-angular/src/tools/esbuild/license-extractor";
 import {augmentAppWithServiceWorkerEsbuild} from "@angular-devkit/build-angular/src/utils/service-worker";
-import {createGlobalStylesBundleOptions} from "@angular-devkit/build-angular/src/tools/esbuild/global-styles";
+import browserslist from "browserslist";
+import {transformSupportedBrowsersToTargets} from "@angular-devkit/build-angular/src/tools/esbuild/utils";
+import {createCssResourcePlugin} from "@angular-devkit/build-angular/src/tools/esbuild/stylesheets/css-resource-plugin";
+import {CssStylesheetLanguage} from "@angular-devkit/build-angular/src/tools/esbuild/stylesheets/css-language";
+import {SassStylesheetLanguage} from "@angular-devkit/build-angular/src/tools/esbuild/stylesheets/sass-language";
+import {
+  StylesheetPluginFactory
+} from "@angular-devkit/build-angular/src/tools/esbuild/stylesheets/stylesheet-plugin-factory";
+import {
+  HintMode,
+  IndexHtmlGenerator,
+  IndexHtmlTransformResult
+} from "@angular-devkit/build-angular/src/utils/index-file/index-html-generator";
 import {Entrypoint} from "@angular-devkit/build-angular/src/utils/index-file/augment-index-html";
+import {CrossOrigin} from "@angular-devkit/build-angular";
+import {InlineCriticalCssProcessor} from "@angular-devkit/build-angular/src/utils/index-file/inline-critical-css";
+import {SdSourceFileCache} from "../utils/SdSourceFileCache";
 
 export class SdNgBundler {
-  private readonly _logger = Logger.get(["simplysm", "sd-cli", "SdNgEsbuildBuilder"]);
-
-  private readonly _sourceFileCache = new SourceFileCache();
-  private readonly _options: NormalizedApplicationBuildOptions;
+  private readonly _sourceFileCache = new SdSourceFileCache();
 
   private _contexts: BundlerContext[] | undefined;
 
   private readonly _outputCache = new Map<string, string | number>();
 
-  public constructor(opt: {
-    dev: boolean,
-    builderType: keyof ISdCliClientPackageConfig["builder"],
-    pkgPath: string,
-    cordovaPlatforms: string[] | undefined,
-    outputPath: string
+  private readonly _pkgNpmConf: INpmConfig;
+  private readonly _mainFilePath: string;
+  private readonly _tsConfigFilePath: string;
+  private readonly _swConfFilePath: string;
+  private readonly _browserTarget: string[];
+  private readonly _indexHtmlFilePath: string;
+  private readonly _pkgName: string;
+  private readonly _baseHref: string;
+
+  private _depsMap?: Map<string, Set<string>>;
+
+  public constructor(private readonly _opt: {
+    dev: boolean;
+    outputPath: string;
+    pkgPath: string;
+    builderType: string;
+    cordovaPlatforms: string[] | undefined;
+    env: Record<string, string> | undefined;
   }) {
-    this._options = this._getOptions(opt);
+    this._pkgNpmConf = FsUtil.readJson(path.resolve(this._opt.pkgPath, "package.json"));
+    this._mainFilePath = path.resolve(this._opt.pkgPath, "src/main.ts");
+    this._tsConfigFilePath = path.resolve(this._opt.pkgPath, "tsconfig.json");
+    this._swConfFilePath = path.resolve(this._opt.pkgPath, "ngsw-config.json");
+    this._browserTarget = transformSupportedBrowsersToTargets(browserslist("defaults and fully supports es6-module"));
+    this._indexHtmlFilePath = path.resolve(this._opt.pkgPath, "src/index.html");
+    this._pkgName = path.basename(this._opt.pkgPath);
+    this._baseHref = this._opt.builderType === "web" ? `/${this._pkgName}/` : this._opt.dev ? `/${this._pkgName}/${this._opt.builderType}/` : ``;
   }
 
   public removeCache(filePaths: string[]): void {
@@ -65,49 +89,50 @@ export class SdNgBundler {
 
     const results = [
       ...bundlingResult.warnings.map((warn) => ({
-        filePath: warn.location?.file !== undefined ? path.resolve(this._options.workspaceRoot, warn.location.file) : undefined,
+        filePath: warn.location?.file !== undefined ? path.resolve(this._opt.pkgPath, warn.location.file) : undefined,
         line: warn.location?.line,
         char: warn.location?.column,
         code: undefined,
-        severity: "warning" as const,
+        severity: "warning",
         message: warn.text.replace(/^(NG|TS)[0-9]+: /, ""),
-        type: "build" as const
+        type: "build"
       })),
       ...bundlingResult.errors?.map((err) => ({
-        filePath: err.location?.file !== undefined ? path.resolve(this._options.workspaceRoot, err.location.file) : undefined,
+        filePath: err.location?.file !== undefined ? path.resolve(this._opt.pkgPath, err.location.file) : undefined,
         line: err.location?.line,
         char: err.location?.column !== undefined ? err.location.column + 1 : undefined,
         code: undefined,
-        severity: "error" as const,
+        severity: "error",
         message: err.text.replace(/^[^:]*: /, ""),
-        type: "build" as const
+        type: "build"
       })) ?? []
-    ];
+    ] as ISdCliPackageBuildResult[];
     const watchFilePaths = [
       ...this._sourceFileCache.keys(),
-      ...this._sourceFileCache.babelFileCache.keys()
-    ].map((item) => path.resolve(item));
-    let affectedSourceFilePaths = watchFilePaths.filter((item) => PathUtil.isChildPath(item, this._options.workspaceRoot));
+      ...this._sourceFileCache.babelFileCache.keys(),
+      ...this._sourceFileCache.loadResultCache.fileDependencies.keys()
+    ].map((item) => path.resolve(item)).distinct();
+
+    let affectedSourceFilePaths = watchFilePaths.filter((item) => PathUtil.isChildPath(item, this._opt.pkgPath));
+
     if (bundlingResult.errors) {
-      return {
-        filePaths: watchFilePaths,
-        affectedFilePaths: affectedSourceFilePaths,
-        results
-      };
+      // TODO: 제대로 deps를 적용해야함.. 코드 분석 필요
+      this._depsMap = this._depsMap ?? new Map<string, Set<string>>();
     }
-
-    const depsMap = new Map<string, Set<string>>();
-    for (const entry of Object.entries(bundlingResult.metafile.inputs)) {
-      for (const imp of entry[1].imports) {
-        const deps = depsMap.getOrCreate(path.resolve(this._options.workspaceRoot, imp.path), new Set<string>());
-        deps.add(path.resolve(this._options.workspaceRoot, entry[0]));
+    else {
+      this._depsMap = new Map<string, Set<string>>();
+      for (const entry of Object.entries(bundlingResult.metafile.inputs)) {
+        for (const imp of entry[1].imports) {
+          const deps = this._depsMap.getOrCreate(path.resolve(this._opt.pkgPath, imp.path), new Set<string>());
+          deps.add(path.resolve(this._opt.pkgPath, entry[0]));
+        }
       }
     }
 
     const searchAffectedFiles = (filePath: string, prev?: Set<string>): Set<string> => {
       const result = new Set<string>(prev);
 
-      const importerPaths = depsMap.get(filePath);
+      const importerPaths = this._depsMap!.get(filePath);
       if (!importerPaths) return result;
 
       for (const importerPath of importerPaths) {
@@ -125,67 +150,99 @@ export class SdNgBundler {
         affectedFilePathSet.add(path.resolve(modFile));
         affectedFilePathSet.adds(...searchAffectedFiles(path.resolve(modFile)));
       }
-      affectedSourceFilePaths = Array.from(affectedFilePathSet.values()).filter((item) => PathUtil.isChildPath(item, this._options.workspaceRoot));
+      affectedSourceFilePaths = Array.from(affectedFilePathSet.values()).filter((item) => PathUtil.isChildPath(item, this._opt.pkgPath));
+    }
+
+    if (bundlingResult.errors) {
+      return {
+        filePaths: watchFilePaths,
+        affectedFilePaths: affectedSourceFilePaths,
+        results
+      };
     }
 
     const executionResult = new ExecutionResult(this._contexts, this._sourceFileCache);
     executionResult.outputFiles.push(...bundlingResult.outputFiles);
 
-    //-- index
-    if (this._options.indexHtmlOptions) {
-      const genIndexHtmlResult = await generateIndexHtml(
-        bundlingResult.initialFiles,
-        executionResult,
-        this._options
-      );
-      if (genIndexHtmlResult.warnings.length > 0) {
-        this._logger.warn(...genIndexHtmlResult.warnings);
-      }
-      if (genIndexHtmlResult.errors.length > 0) {
-        this._logger.warn(...genIndexHtmlResult.errors);
-      }
+    //-- Check commonjs
+    // if (!this._opt.dev) {
+    //   const messages = checkCommonJSModules(bundlingResult.metafile, []);
+    //   for (const msg of messages) {
+    //     results.push({
+    //       filePath: msg.location?.file,
+    //       line: msg.location?.line,
+    //       char: msg.location?.column,
+    //       code: msg.pluginName,
+    //       severity: "warning",
+    //       message: msg.text ?? "",
+    //       type: "build"
+    //     });
+    //   }
+    // }
 
-      executionResult.addOutputFile(this._options.indexHtmlOptions!.output, genIndexHtmlResult.content);
+    //-- index
+    const genIndexHtmlResult = await this._genIndexHtmlAsync(
+      bundlingResult.outputFiles,
+      bundlingResult.initialFiles
+    );
+    for (const warning of genIndexHtmlResult.warnings) {
+      results.push({
+        filePath: undefined,
+        line: undefined,
+        char: undefined,
+        code: undefined,
+        severity: "warning",
+        message: warning,
+        type: "build",
+      });
     }
+    for (const error of genIndexHtmlResult.errors) {
+      results.push({
+        filePath: undefined,
+        line: undefined,
+        char: undefined,
+        code: undefined,
+        severity: "error",
+        message: error,
+        type: "build",
+      });
+    }
+    executionResult.addOutputFile("index.html", genIndexHtmlResult.content);
 
     //-- copy assets
-    if (this._options.assets) {
-      executionResult.assetFiles.push(...(await copyAssets(this._options.assets!, [], this._options.workspaceRoot)));
-    }
+    executionResult.assetFiles.push(...(await this._copyAssetsAsync()));
 
     //-- extract 3rdpartylicenses
-    if (this._options.extractLicenses) {
-      executionResult.addOutputFile('3rdpartylicenses.txt', await extractLicenses(bundlingResult.metafile, this._options.workspaceRoot));
+    if (!this._opt.dev) {
+      executionResult.addOutputFile('3rdpartylicenses.txt', await extractLicenses(bundlingResult.metafile, this._opt.pkgPath));
     }
 
     //-- service worker
-    if (this._options.serviceWorker !== undefined) {
+    if (FsUtil.exists(this._swConfFilePath)) {
       try {
-        const serviceWorkerResult = await augmentAppWithServiceWorkerEsbuild(
-          this._options.workspaceRoot,
-          this._options.serviceWorker,
-          this._options.baseHref ?? '/',
+        const serviceWorkerResult = await this._genServiceWorkerAsync(
           executionResult.outputFiles,
           executionResult.assetFiles
         );
         executionResult.addOutputFile('ngsw.json', serviceWorkerResult.manifest);
         executionResult.assetFiles.push(...serviceWorkerResult.assetFiles);
       }
-      catch (error) {
-        this._logger.error(error instanceof Error ? error.message : `${error}`);
-
-        return {
-          filePaths: watchFilePaths,
-          affectedFilePaths: affectedSourceFilePaths,
-          results
-        };
+      catch (err) {
+        results.push({
+          filePath: undefined,
+          line: undefined,
+          char: undefined,
+          code: undefined,
+          severity: "error",
+          message: err.toString(),
+          type: "build",
+        });
       }
     }
 
     //-- write
-
     for (const outputFile of executionResult.outputFiles) {
-      const distFilePath = path.resolve(this._options.outputPath, outputFile.path);
+      const distFilePath = path.resolve(this._opt.outputPath, outputFile.path);
 
       const prev = this._outputCache.get(distFilePath);
       if (prev !== Buffer.from(outputFile.contents).toString("base64")) {
@@ -197,7 +254,7 @@ export class SdNgBundler {
       const prev = this._outputCache.get(assetFile.source);
       const curr = FsUtil.lstat(assetFile.source).mtime.getTime();
       if (prev !== curr) {
-        await FsUtil.copyAsync(assetFile.source, path.resolve(this._options.outputPath, assetFile.destination));
+        await FsUtil.copyAsync(assetFile.source, path.resolve(this._opt.outputPath, assetFile.destination));
         this._outputCache.set(assetFile.source, curr);
       }
     }
@@ -209,271 +266,312 @@ export class SdNgBundler {
     };
   }
 
-  private async _getAppContextAsync(): Promise<BundlerContext> {
-    const esbuildOption = await this._getEsBuildOptionsAsync();
+  private async _genIndexHtmlAsync(
+    outputFiles: esbuild.OutputFile[],
+    initialFiles: Map<string, InitialFileRecord>,
+  ): Promise<IndexHtmlTransformResult> {
+    const readAsset = (filePath: string): Promise<string> => {
+      const relFilePath = path.relative("/", filePath);
+      const currFile = outputFiles.find((outputFile) => outputFile.path === relFilePath);
+      if (currFile) {
+        return Promise.resolve(currFile.text);
+      }
 
-    return new BundlerContext(
-      this._options.workspaceRoot,
-      true,
-      esbuildOption
-    );
-  }
+      throw new Error(`Output file does not exist: ${relFilePath}`);
+    };
 
-  private _getStyleContext(): BundlerContext {
-    const esbuildOptions = createGlobalStylesBundleOptions(
-      this._options,
-      [
-        'chrome117.0', 'chrome116.0',
-        'edge117.0', 'edge116.0',
-        'firefox118.0', 'firefox115.0',
-        'ios17.0', 'ios16.6',
-        'ios16.5', 'ios16.4',
-        'ios16.3', 'ios16.2',
-        'ios16.1', 'ios16.0',
-        'safari17.0', 'safari16.6',
-        'safari16.5', 'safari16.4',
-        'safari16.3', 'safari16.2',
-        'safari16.1', 'safari16.0'
+    const indexHtmlGenerator = new IndexHtmlGenerator({
+      indexPath: this._indexHtmlFilePath,
+      entrypoints: [
+        ['runtime', true],
+        ['polyfills', true],
+        ['styles', false],
+        ['vendor', true],
+        ['main', true],
+        ...this._opt.builderType === "cordova" ? [
+          ["cordova-entry", true] as Entrypoint
+        ] : []
       ],
-      true,
-      this._sourceFileCache.loadResultCache
+      optimization: {
+        scripts: !this._opt.dev,
+        fonts: {inline: !this._opt.dev},
+        styles: {
+          minify: !this._opt.dev,
+          inlineCritical: false
+        },
+      },
+      crossOrigin: CrossOrigin.None,
+    });
+    indexHtmlGenerator.readAsset = readAsset;
+
+    const hints: { url: string; mode: HintMode; as?: string; }[] = [];
+    if (!this._opt.dev) {
+      for (const [key, value] of initialFiles) {
+        if (value.entrypoint) {
+          continue;
+        }
+
+        if (value.type === 'script') {
+          hints.push({url: key, mode: 'modulepreload' as const});
+        }
+        else if (value.type === 'style') {
+          hints.push({url: key, mode: 'preload' as const, as: 'style'});
+        }
+      }
+    }
+
+    const transformResult = await indexHtmlGenerator.process({
+      baseHref: this._baseHref,
+      lang: undefined,
+      outputPath: "/",
+      files: [...initialFiles].map(([file, record]) => ({
+        name: record.name ?? '',
+        file,
+        extension: path.extname(file),
+      })),
+      hints,
+    });
+
+    if (this._opt.dev) {
+      return transformResult;
+    }
+    else {
+      const inlineCriticalCssProcessor = new InlineCriticalCssProcessor({
+        minify: false,
+        readAsset,
+      });
+      const {content, errors, warnings} = await inlineCriticalCssProcessor.process(
+        transformResult.content,
+        {outputPath: "/",},
+      );
+
+      return {
+        warnings: [...transformResult.warnings, ...warnings],
+        errors: [...transformResult.errors, ...errors],
+        content
+      };
+    }
+  }
+
+  private async _copyAssetsAsync(): Promise<{
+    source: string;
+    destination: string;
+  }[]> {
+    return await copyAssets([
+      {input: 'src', glob: 'favicon.ico', output: ''},
+      {input: 'src', glob: 'manifest.webmanifest', output: ''},
+      {input: 'src/assets', glob: '**/*', output: 'assets'},
+      ...this._opt.dev && this._opt.cordovaPlatforms ? this._opt.cordovaPlatforms.mapMany((platform) => [
+        {
+          input: `.cordova/platforms/${platform}/platform_www/plugins`,
+          glob: '**/*',
+          output: `cordova-${platform}/plugins`
+        },
+        {
+          input: `.cordova/platforms/${platform}/platform_www`,
+          glob: 'cordova.js',
+          output: `cordova-${platform}`
+        },
+        {
+          input: `.cordova/platforms/${platform}/platform_www`,
+          glob: 'cordova_plugins.js',
+          output: `cordova-${platform}`
+        },
+        {
+          input: `.cordova/platforms/${platform}/www`,
+          glob: 'config.xml',
+          output: `cordova-${platform}`
+        },
+      ]) : []
+    ], [], this._opt.pkgPath);
+  }
+
+  private async _genServiceWorkerAsync(
+    outputFiles: esbuild.OutputFile[],
+    assetFiles: {
+      source: string;
+      destination: string;
+    }[]
+  ): Promise<{
+    manifest: string;
+    assetFiles: {
+      source: string;
+      destination: string;
+    }[];
+  }> {
+    return await augmentAppWithServiceWorkerEsbuild(
+      this._opt.pkgPath,
+      this._swConfFilePath,
+      this._baseHref,
+      outputFiles,
+      assetFiles
     );
+  }
 
+  private async _getAppContextAsync(): Promise<BundlerContext> {
     return new BundlerContext(
-      this._options.workspaceRoot,
+      this._opt.pkgPath,
       true,
-      esbuildOptions!,
-      () => true
+      {
+        absWorkingDir: this._opt.pkgPath,
+        bundle: true,
+        keepNames: true,
+        format: 'esm',
+        assetNames: 'media/[name]',
+        conditions: ['es2020', 'es2015', 'module'],
+        resolveExtensions: ['.ts', '.tsx', '.mjs', '.js'],
+        metafile: true,
+        legalComments: this._opt.dev ? 'eof' : 'none',
+        logLevel: 'silent',
+        minifyIdentifiers: !this._opt.dev,
+        minifySyntax: !this._opt.dev,
+        minifyWhitespace: !this._opt.dev,
+        pure: ['forwardRef'],
+        outdir: this._opt.pkgPath,
+        outExtension: undefined,
+        sourcemap: this._opt.dev,
+        splitting: true,
+        chunkNames: 'chunk-[hash]',
+        tsconfig: this._tsConfigFilePath,
+        external: [],
+        write: false,
+        preserveSymlinks: false,
+        define: {
+          ...!this._opt.dev ? {ngDevMode: 'false'} : {},
+          ngJitMode: 'false',
+          global: 'global',
+          process: 'process',
+          Buffer: 'Buffer',
+          'process.env.SD_VERSION': JSON.stringify(this._pkgNpmConf.version),
+          "process.env.NODE_ENV": JSON.stringify(this._opt.dev ? "development" : "production"),
+          ...this._opt.env ? Object.keys(this._opt.env).toObject(
+            key => `process.env.${key}`,
+            key => JSON.stringify(this._opt.env![key])
+          ) : {}
+        },
+        platform: 'browser',
+        mainFields: ['es2020', 'es2015', 'browser', 'module', 'main'],
+        entryNames: '[name]',
+        entryPoints: {
+          main: this._mainFilePath,
+          polyfills: 'angular:polyfills',
+          ...this._opt.builderType === "cordova" ? {
+            "cordova-entry": path.resolve(path.dirname(fileURLToPath(import.meta.url)), `../../lib/cordova-entry.js`)
+          } : {}
+        },
+        target: this._browserTarget,
+        supported: {'async-await': false, 'object-rest-spread': false},
+        loader: {
+          ".png": "file",
+          ".jpeg": "file",
+          ".jpg": "file",
+          ".jfif": "file",
+          ".gif": "file",
+          ".svg": "file",
+          ".woff": "file",
+          ".woff2": "file",
+          ".ttf": "file",
+          ".eot": "file",
+          ".ico": "file",
+          ".otf": "file",
+          ".csv": "file",
+          ".xlsx": "file",
+          ".xls": "file",
+          ".pptx": "file",
+          ".ppt": "file",
+          ".docx": "file",
+          ".doc": "file",
+          ".zip": "file",
+          ".pfx": "file",
+          ".pkl": "file"
+        },
+        inject: [PathUtil.posix(fileURLToPath(await import.meta.resolve!("node-stdlib-browser/helpers/esbuild/shim")))],
+        plugins: [
+          createVirtualModulePlugin({
+            namespace: "angular:polyfills",
+            loadContent: () => ({
+              contents: `import "./src/polyfills.ts";`,
+              loader: 'js',
+              resolveDir: this._opt.pkgPath
+            })
+          }) as esbuild.Plugin,
+          createSourcemapIgnorelistPlugin(),
+          createCompilerPlugin({
+            sourcemap: this._opt.dev,
+            thirdPartySourcemaps: false,
+            tsconfig: this._tsConfigFilePath,
+            jit: false,
+            advancedOptimizations: true,
+            fileReplacements: undefined,
+            sourceFileCache: this._sourceFileCache,
+            loadResultCache: this._sourceFileCache.loadResultCache
+          }, {
+            workspaceRoot: this._opt.pkgPath,
+            optimization: !this._opt.dev,
+            sourcemap: this._opt.dev ? 'inline' : false,
+            outputNames: {bundles: '[name]', media: 'media/[name]'},
+            includePaths: [],
+            externalDependencies: [],
+            target: this._browserTarget,
+            inlineStyleLanguage: 'scss',
+            preserveSymlinks: false,
+            tailwindConfiguration: undefined
+          }) as esbuild.Plugin,
+          nodeStdLibBrowserPlugin(nodeStdLibBrowser)
+        ]
+      }
     );
   }
 
-  private async _getEsBuildOptionsAsync(): Promise<esbuild.BuildOptions> {
-    const pkgNpmConf: INpmConfig = FsUtil.readJson(path.resolve(this._options.workspaceRoot, "package.json"));
-
-    const {pluginOptions, styleOptions} = createCompilerPluginOptions(
-      this._options,
-      [
-        'chrome117.0', 'chrome116.0',
-        'edge117.0', 'edge116.0',
-        'firefox118.0', 'firefox115.0',
-        'ios17.0', 'ios16.6',
-        'ios16.5', 'ios16.4',
-        'ios16.3', 'ios16.2',
-        'ios16.1', 'ios16.0',
-        'safari17.0', 'safari16.6',
-        'safari16.5', 'safari16.4',
-        'safari16.3', 'safari16.2',
-        'safari16.1', 'safari16.0'
-      ],
-      this._sourceFileCache,
-    );
+  private _getStyleContext(): BundlerContext {
+    const browserTarget = transformSupportedBrowsersToTargets(browserslist("defaults and fully supports es6-module"));
 
-    return {
-      absWorkingDir: this._options.workspaceRoot,
-      bundle: true,
-      keepNames: true,
-      format: 'esm',
-      assetNames: 'media/[name]',
-      conditions: ['es2020', 'es2015', 'module'],
-      resolveExtensions: ['.ts', '.tsx', '.mjs', '.js'],
-      metafile: true,
-      legalComments: this._options.watch ? 'eof' : 'none',
-      logLevel: 'silent',
-      minifyIdentifiers: !this._options.watch,
-      minifySyntax: !this._options.watch,
-      minifyWhitespace: !this._options.watch,
-      pure: ['forwardRef'],
-      outdir: this._options.workspaceRoot,
-      outExtension: undefined,
-      sourcemap: this._options.watch,
-      splitting: true,
-      chunkNames: 'chunk-[hash]',
-      tsconfig: this._options.tsconfig,
-      external: [],
-      write: false,
-      preserveSymlinks: false,
-      define: {
-        ...!this._options.watch ? {ngDevMode: 'false'} : {},
-        ngJitMode: 'false',
-        global: 'global',
-        process: 'process',
-        Buffer: 'Buffer',
-        'process.env.SD_VERSION': JSON.stringify(pkgNpmConf.version),
-        "process.env.NODE_ENV": JSON.stringify(this._options.watch ? "development" : "production")
-      },
-      platform: 'browser',
-      mainFields: ['es2020', 'es2015', 'browser', 'module', 'main'],
-      entryNames: '[name]',
-      entryPoints: {
-        ...this._options.entryPoints,
-        polyfills: 'angular:polyfills'
-      },
-      target: [
-        'chrome117.0', 'chrome116.0',
-        'edge117.0', 'edge116.0',
-        'firefox118.0', 'firefox115.0',
-        'ios17.0', 'ios16.6',
-        'ios16.5', 'ios16.4',
-        'ios16.3', 'ios16.2',
-        'ios16.1', 'ios16.0',
-        'safari17.0', 'safari16.6',
-        'safari16.5', 'safari16.4',
-        'safari16.3', 'safari16.2',
-        'safari16.1', 'safari16.0'
-      ],
-      supported: {'async-await': false, 'object-rest-spread': false},
-      loader: {
-        ".png": "file",
-        ".jpeg": "file",
-        ".jpg": "file",
-        ".jfif": "file",
-        ".gif": "file",
-        ".svg": "file",
-        ".woff": "file",
-        ".woff2": "file",
-        ".ttf": "file",
-        ".eot": "file",
-        ".ico": "file",
-        ".otf": "file",
-        ".csv": "file",
-        ".xlsx": "file",
-        ".xls": "file",
-        ".pptx": "file",
-        ".ppt": "file",
-        ".docx": "file",
-        ".doc": "file",
-        ".zip": "file",
-        ".pfx": "file",
-        ".pkl": "file"
+    const pluginFactory = new StylesheetPluginFactory(
+      {
+        sourcemap: this._opt.dev,
+        includePaths: []
       },
-      inject: [PathUtil.posix(fileURLToPath(await import.meta.resolve!("node-stdlib-browser/helpers/esbuild/shim")))],
-      plugins: [
-        createVirtualModulePlugin({
-          namespace: "angular:polyfills",
-          loadContent: () => ({
-            contents: `import "./src/polyfills.ts";`,
-            loader: 'js',
-            resolveDir: this._options.workspaceRoot
-          })
-        }) as esbuild.Plugin,
-        createSourcemapIgnorelistPlugin(),
-        createCompilerPlugin(
-          pluginOptions,
-          styleOptions
-        ) as esbuild.Plugin,
-        nodeStdLibBrowserPlugin(nodeStdLibBrowser)
-      ]
-    };
-  }
-
-  private _getOptions(opt: {
-    dev: boolean,
-    builderType: keyof ISdCliClientPackageConfig["builder"],
-    pkgPath: string,
-    cordovaPlatforms: string[] | undefined,
-    outputPath: string,
-  }): NormalizedApplicationBuildOptions {
-    const mainFilePath = path.resolve(opt.pkgPath, "src/main.ts");
-    const tsconfigFilePath = path.resolve(opt.pkgPath, "tsconfig.json");
-    const indexHtmlFilePath = path.resolve(opt.pkgPath, "src/index.html");
-    const swFilePath = path.resolve(opt.pkgPath, "ngsw-config.json");
-
-    const cacheBasePath = path.resolve(opt.pkgPath, ".cache");
-
-    const pkgName = path.basename(opt.pkgPath);
+      this._sourceFileCache.loadResultCache,
+    );
 
-    return {
-      advancedOptimizations: true,
-      allowedCommonJsDependencies: [],
-      baseHref: `/${pkgName}/`,
-      cacheOptions: {
-        enabled: true,
-        basePath: cacheBasePath,
-        path: path.resolve(cacheBasePath, opt.builderType)
-      },
-      crossOrigin: CrossOrigin.None,
-      deleteOutputPath: true,
-      externalDependencies: [],
-      extractLicenses: !opt.dev,
-      inlineStyleLanguage: 'scss',
-      jit: false,
-      stats: false,
-      polyfills: ["./src/polyfills.ts"],
-      poll: undefined,
-      progress: true,
-      externalPackages: opt.dev ? true : undefined,
-      preserveSymlinks: false,
-      stylePreprocessorOptions: {includePaths: []},
-      subresourceIntegrity: false,
-      serverEntryPoint: undefined,
-      prerenderOptions: undefined,
-      appShellOptions: undefined,
-      ssrOptions: undefined,
-      verbose: false,
-      watch: opt.dev,
-      workspaceRoot: opt.pkgPath,
-      entryPoints: {
-        main: mainFilePath,
-        ...opt.builderType === "cordova" ? {
-          "cordova-entry": path.resolve(path.dirname(fileURLToPath(import.meta.url)), `../../lib/cordova-entry.js`)
-        } : {}
-      },
-      optimizationOptions: {
-        scripts: !opt.dev,
-        styles: {minify: !opt.dev, inlineCritical: !opt.dev},
-        fonts: {inline: !opt.dev}
-      },
-      outputPath: opt.outputPath,
-      outExtension: undefined,
-      sourcemapOptions: {vendor: false, hidden: false, scripts: opt.dev, styles: opt.dev},
-      tsconfig: tsconfigFilePath,
-      projectRoot: opt.pkgPath,
-      assets: [
-        {input: 'src', glob: 'favicon.ico', output: ''},
-        {input: 'src\\assets', glob: '**/*', output: 'assets'},
-        ...opt.dev && opt.cordovaPlatforms ? opt.cordovaPlatforms.mapMany((platform) => [
-          {
-            input: `.cache\\cordova\\platforms\\${platform}\\platform_www\\plugins`,
-            glob: '**/*',
-            output: `cordova-${platform}/plugins`
-          },
-          {
-            input: `.cache\\cordova\\platforms\\${platform}\\platform_www`,
-            glob: 'cordova.js',
-            output: `cordova-${platform}`
-          },
-          {
-            input: `.cache\\cordova\\platforms\\${platform}\\platform_www`,
-            glob: 'cordova_plugins.js',
-            output: `cordova-${platform}`
-          },
-          {
-            input: `.cache\\cordova\\platforms\\${platform}\\www`,
-            glob: 'config.xml',
-            output: `cordova-${platform}`
-          },
-        ]) : []
-      ],
-      outputNames: {bundles: '[name]', media: 'media/[name]'},
-      fileReplacements: undefined,
-      globalStyles: [{name: 'styles', files: ["src/styles.scss"], initial: true}],
-      globalScripts: [],
-      serviceWorker: FsUtil.exists(swFilePath) ? swFilePath : undefined,
-      indexHtmlOptions: {
-        input: indexHtmlFilePath,
-        output: 'index.html',
-        insertionOrder: [
-          ['runtime', true],
-          ['polyfills', true],
-          ['styles', false],
-          ['vendor', true],
-          ['main', true],
-          ...opt.builderType === "cordova" ? [
-            ["cordova-entry", true] as Entrypoint
-          ] : []
-        ]
+    return new BundlerContext(
+      this._opt.pkgPath,
+      true,
+      {
+        absWorkingDir: this._opt.pkgPath,
+        bundle: true,
+        entryNames: '[name]',
+        assetNames: 'media/[name]',
+        logLevel: 'silent',
+        minify: !this._opt.dev,
+        metafile: true,
+        sourcemap: this._opt.dev,
+        outdir: this._opt.pkgPath,
+        write: false,
+        platform: 'browser',
+        target: browserTarget,
+        preserveSymlinks: false,
+        external: [],
+        conditions: ['style', 'sass'],
+        mainFields: ['style', 'sass'],
+        legalComments: !this._opt.dev ? "none" : "eof",
+        entryPoints: {styles: 'angular:styles/global;styles'},
+        plugins: [
+          createVirtualModulePlugin({
+            namespace: "angular:styles/global",
+            transformPath: (currPath) => currPath.split(';', 2)[1],
+            loadContent: () => ({
+              contents: `@import 'src/styles.scss';`,
+              loader: 'css',
+              resolveDir: this._opt.pkgPath
+            }),
+          }),
+          pluginFactory.create(SassStylesheetLanguage),
+          pluginFactory.create(CssStylesheetLanguage),
+          createCssResourcePlugin(this._sourceFileCache.loadResultCache),
+        ],
       },
-      tailwindConfiguration: undefined
-    };
+      () => true
+    );
   }
 }