diff --git a/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts b/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts index 558a19e4c4..d0e326dae6 100644 --- a/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts +++ b/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts @@ -130,6 +130,7 @@ export function createCompilerPlugin( // Track incremental component stylesheet builds const stylesheetBundler = new ComponentStylesheetBundler( styleOptions, + styleOptions.inlineStyleLanguage, pluginOptions.incremental, ); let sharedTSCompilationState: SharedTSCompilationState | undefined; @@ -190,8 +191,8 @@ export function createCompilerPlugin( stylesheetResult = await stylesheetBundler.bundleInline( data, containingFile, - // Inline stylesheets from a template style element are always CSS - containingFile.endsWith('.html') ? 'css' : styleOptions.inlineStyleLanguage, + // Inline stylesheets from a template style element are always CSS; Otherwise, use default. + containingFile.endsWith('.html') ? 'css' : undefined, // When external runtime styles are enabled, an identifier for the style that does not change // based on the content is required to avoid emitted JS code changes. Any JS code changes will // invalid the output and force a full page reload for HMR cases. The containing file and order @@ -490,7 +491,6 @@ export function createCompilerPlugin( build, stylesheetBundler, additionalResults, - styleOptions.inlineStyleLanguage, pluginOptions.loadResultCache, ); } diff --git a/packages/angular/build/src/tools/esbuild/angular/component-stylesheets.ts b/packages/angular/build/src/tools/esbuild/angular/component-stylesheets.ts index 97c1b18ab5..711723ac8b 100644 --- a/packages/angular/build/src/tools/esbuild/angular/component-stylesheets.ts +++ b/packages/angular/build/src/tools/esbuild/angular/component-stylesheets.ts @@ -33,6 +33,7 @@ export class ComponentStylesheetBundler { */ constructor( private readonly options: BundleStylesheetOptions, + private readonly defaultInlineLanguage: string, private readonly incremental: boolean, ) {} @@ -63,7 +64,12 @@ export class ComponentStylesheetBundler { ); } - async bundleInline(data: string, filename: string, language: string, externalId?: string) { + async bundleInline( + data: string, + filename: string, + language = this.defaultInlineLanguage, + externalId?: string, + ) { // Use a hash of the inline stylesheet content to ensure a consistent identifier. External stylesheets will resolve // to the actual stylesheet file path. // TODO: Consider xxhash instead for hashing diff --git a/packages/angular/build/src/tools/esbuild/angular/jit-plugin-callbacks.ts b/packages/angular/build/src/tools/esbuild/angular/jit-plugin-callbacks.ts index 44ea408cb1..b70baa48d1 100644 --- a/packages/angular/build/src/tools/esbuild/angular/jit-plugin-callbacks.ts +++ b/packages/angular/build/src/tools/esbuild/angular/jit-plugin-callbacks.ts @@ -66,7 +66,6 @@ export function setupJitPluginCallbacks( build: PluginBuild, stylesheetBundler: ComponentStylesheetBundler, additionalResultFiles: Map, - inlineStyleLanguage: string, loadCache?: LoadResultCache, ): void { const root = build.initialOptions.absWorkingDir ?? ''; @@ -114,11 +113,7 @@ export function setupJitPluginCallbacks( if (entry.contents === undefined) { stylesheetResult = await stylesheetBundler.bundleFile(entry.path); } else { - stylesheetResult = await stylesheetBundler.bundleInline( - entry.contents, - entry.path, - inlineStyleLanguage, - ); + stylesheetResult = await stylesheetBundler.bundleInline(entry.contents, entry.path); } const { contents, outputFiles, errors, warnings, metafile, referencedFiles } =