@analogjs/vite-plugin-angular 3.0.0-alpha.24 → 3.0.0-alpha.26

package/src/lib/angular-vite-plugin.js

@@ -1,10 +1,12 @@
 import { angularFullVersion, cjt, createAngularCompilation, sourceFileCache } from "./utils/devkit.js";
 import { getJsTransformConfigKey, isRolldown } from "./utils/rolldown.js";
 import { buildOptimizerPlugin } from "./angular-build-optimizer-plugin.js";
+import { activateDeferredDebug, applyDebugOption, debugCompilationApi, debugCompiler, debugCompilerV, debugHmr, debugHmrV, debugStyles, debugStylesV, debugTailwind, debugTailwindV } from "./utils/debug.js";
 import { jitPlugin } from "./angular-jit-plugin.js";
 import { createCompilerPlugin, createRolldownCompilerPlugin } from "./compiler-plugin.js";
-import { StyleUrlsResolver, TemplateUrlsResolver } from "./component-resolvers.js";
-import { activateDeferredDebug, applyDebugOption, debugCompilationApi, debugCompiler, debugHmr, debugStyles, debugTailwind } from "./utils/debug.js";
+import { StyleUrlsResolver, TemplateUrlsResolver, getAngularComponentMetadata } from "./component-resolvers.js";
+import { composeStylePreprocessors, normalizeStylesheetDependencies } from "./style-preprocessor.js";
+import { AnalogStylesheetRegistry, preprocessStylesheet, preprocessStylesheetResult, registerStylesheetContent, rewriteRelativeCssImports } from "./stylesheet-registry.js";
 import { augmentHostWithCaching, augmentHostWithResources, augmentProgramWithVersioning, mergeTransformers } from "./host.js";
 import { angularVitestPlugins } from "./angular-vitest-plugin.js";
 import { pendingTasksPlugin } from "./angular-pending-tasks.plugin.js";
@@ -12,15 +14,16 @@ import { liveReloadPlugin } from "./live-reload-plugin.js";
 import { nxFolderPlugin } from "./nx-folder-plugin.js";
 import { replaceFiles } from "./plugins/file-replacements.plugin.js";
 import { routerPlugin } from "./router-plugin.js";
+import { configureStylePipelineRegistry, stylePipelinePreprocessorFromPlugins } from "./style-pipeline.js";
 import { union } from "es-toolkit";
-import { existsSync, mkdirSync, writeFileSync } from "node:fs";
+import { createHash } from "node:crypto";
+import { existsSync, mkdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
 import { basename, dirname, isAbsolute, join, relative, resolve } from "node:path";
 import * as compilerCli from "@angular/compiler-cli";
 import { createRequire } from "node:module";
 import * as ngCompiler from "@angular/compiler";
 import { globSync } from "tinyglobby";
 import { defaultClientConditions, normalizePath, preprocessCSS } from "vite";
-import { createHash } from "node:crypto";
 //#region packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts
 var require = createRequire(import.meta.url);
 var DiagnosticModes = /* @__PURE__ */ function(DiagnosticModes) {
@@ -31,6 +34,13 @@ var DiagnosticModes = /* @__PURE__ */ function(DiagnosticModes) {
 	DiagnosticModes[DiagnosticModes["All"] = 7] = "All";
 	return DiagnosticModes;
 }({});
+function normalizeIncludeGlob(workspaceRoot, glob) {
+	const normalizedWorkspaceRoot = normalizePath(resolve(workspaceRoot));
+	const normalizedGlob = normalizePath(glob);
+	if (normalizedGlob === normalizedWorkspaceRoot || normalizedGlob.startsWith(`${normalizedWorkspaceRoot}/`)) return normalizedGlob;
+	if (normalizedGlob.startsWith("/")) return `${normalizedWorkspaceRoot}${normalizedGlob}`;
+	return normalizePath(resolve(normalizedWorkspaceRoot, normalizedGlob));
+}
 /**
 * TypeScript file extension regex
 * Match .(c or m)ts, .ts extensions with an optional ? for query params
@@ -38,15 +48,39 @@ var DiagnosticModes = /* @__PURE__ */ function(DiagnosticModes) {
 */
 var TS_EXT_REGEX = /\.[cm]?(ts)[^x]?\??/;
 var classNames = /* @__PURE__ */ new Map();
+function evictDeletedFileMetadata(file, { removeActiveGraphMetadata, removeStyleOwnerMetadata, classNamesMap, fileTransformMap }) {
+	const normalizedFile = normalizePath(file.split("?")[0]);
+	removeActiveGraphMetadata(normalizedFile);
+	removeStyleOwnerMetadata(normalizedFile);
+	classNamesMap.delete(normalizedFile);
+	fileTransformMap.delete(normalizedFile);
+}
+function injectViteIgnoreForHmrMetadata(code) {
+	let patched = code.replace(/\bimport\(([a-zA-Z_$][\w$]*\.\u0275\u0275getReplaceMetadataURL)/g, "import(/* @vite-ignore */ $1");
+	if (patched === code) patched = patched.replace(/import\((\S+getReplaceMetadataURL)/g, "import(/* @vite-ignore */ $1");
+	return patched;
+}
+function isIgnoredHmrFile(file) {
+	return file.endsWith(".tsbuildinfo");
+}
 /**
 * Builds a resolved stylePreprocessor function from plugin options.
-* If `tailwindCss` is provided, creates an auto-reference injector.
-* If `stylePreprocessor` is also provided, chains them (tailwind first, then user).
+*
+* When `tailwindCss` is configured, creates an injector that prepends
+* `@reference "<rootStylesheet>"` into component CSS that uses Tailwind
+* utilities. Uses absolute paths because Angular's externalRuntimeStyles
+* serves component CSS as virtual modules (hash-based IDs) with no
+* meaningful directory — relative paths can't resolve from a hash.
+*
+* If both `tailwindCss` and `stylePreprocessor` are provided, they are
+* chained: Tailwind reference injection runs first, then the user's
+* custom preprocessor.
 */
 function buildStylePreprocessor(options) {
 	const userPreprocessor = options?.stylePreprocessor;
+	const stylePipelinePreprocessor = stylePipelinePreprocessorFromPlugins(options?.stylePipeline);
 	const tw = options?.tailwindCss;
-	if (!tw && !userPreprocessor) return;
+	if (!tw && !userPreprocessor && !stylePipelinePreprocessor) return;
 	let tailwindPreprocessor;
 	if (tw) {
 		const rootStylesheet = tw.rootStylesheet;
@@ -55,26 +89,26 @@ function buildStylePreprocessor(options) {
 			rootStylesheet,
 			prefixes
 		});
+		if (!existsSync(rootStylesheet)) console.warn(`[@analogjs/vite-plugin-angular] tailwindCss.rootStylesheet not found at "${rootStylesheet}". @reference directives will point to a non-existent file, which will cause Tailwind CSS errors. Ensure the path is absolute and the file exists.`);
 		tailwindPreprocessor = (code, filename) => {
 			if (code.includes("@reference") || code.includes("@import \"tailwindcss\"") || code.includes("@import 'tailwindcss'")) {
-				debugTailwind("skip (already has @reference or is root)", { filename });
+				debugTailwindV("skip (already has @reference or is root)", { filename });
 				return code;
 			}
 			if (!(prefixes ? prefixes.some((prefix) => code.includes(prefix)) : code.includes("@apply"))) {
-				debugTailwind("skip (no Tailwind usage detected)", { filename });
+				debugTailwindV("skip (no Tailwind usage detected)", { filename });
 				return code;
 			}
-			debugTailwind("injected @reference", { filename });
-			return `@reference "${relative(dirname(filename), rootStylesheet)}";\n${code}`;
-		};
-	}
-	if (tailwindPreprocessor && userPreprocessor) {
-		debugTailwind("chained with user stylePreprocessor");
-		return (code, filename) => {
-			return userPreprocessor(tailwindPreprocessor(code, filename), filename);
+			debugTailwind("injected @reference via preprocessor", { filename });
+			return `@reference "${rootStylesheet}";\n${code}`;
 		};
 	}
-	return tailwindPreprocessor ?? userPreprocessor;
+	if (tailwindPreprocessor && (stylePipelinePreprocessor || userPreprocessor)) debugTailwind("chained with style pipeline or user stylePreprocessor");
+	return composeStylePreprocessors([
+		tailwindPreprocessor,
+		stylePipelinePreprocessor,
+		userPreprocessor
+	]);
 }
 function angular(options) {
 	applyDebugOption(options?.debug, options?.workspaceRoot);
@@ -95,10 +129,12 @@ function angular(options) {
 		jit: options?.jit,
 		include: options?.include ?? [],
 		additionalContentDirs: options?.additionalContentDirs ?? [],
-		liveReload: options?.liveReload ?? false,
+		hmr: options?.hmr ?? options?.liveReload ?? true,
 		disableTypeChecking: options?.disableTypeChecking ?? true,
 		fileReplacements: options?.fileReplacements ?? [],
 		useAngularCompilationAPI: options?.experimental?.useAngularCompilationAPI ?? false,
+		hasTailwindCss: !!options?.tailwindCss,
+		tailwindCss: options?.tailwindCss,
 		stylePreprocessor: buildStylePreprocessor(options)
 	};
 	let resolvedConfig;
@@ -120,8 +156,134 @@ function angular(options) {
 	}
 	let watchMode = false;
 	let testWatchMode = isTestWatchMode();
-	let inlineComponentStyles;
-	let externalComponentStyles;
+	const activeGraphComponentMetadata = /* @__PURE__ */ new Map();
+	const selectorOwners = /* @__PURE__ */ new Map();
+	const classNameOwners = /* @__PURE__ */ new Map();
+	const transformedStyleOwnerMetadata = /* @__PURE__ */ new Map();
+	const styleSourceOwners = /* @__PURE__ */ new Map();
+	function shouldEnableHmr() {
+		return !!((isTest ? testWatchMode : watchMode) && pluginOptions.hmr);
+	}
+	/**
+	* Determines whether Angular should externalize component styles.
+	*
+	* When true, Angular emits style references (hash-based IDs) instead of
+	* inlining CSS strings. Vite's resolveId → load → transform pipeline
+	* then serves these virtual modules, allowing @tailwindcss/vite to
+	* process @reference directives.
+	*
+	* Required for TWO independent use-cases:
+	*   1. HMR — Vite needs external modules for hot replacement
+	*   2. Tailwind CSS (hasTailwindCss) — styles must pass through Vite's
+	*      CSS pipeline so @tailwindcss/vite can resolve @apply directives
+	*
+	* In production builds (!watchMode), styles are NOT externalized — they
+	* are inlined after preprocessCSS runs eagerly in transformStylesheet.
+	*/
+	function shouldExternalizeStyles() {
+		if (!(isTest ? testWatchMode : watchMode)) return false;
+		return !!(shouldEnableHmr() || pluginOptions.hasTailwindCss);
+	}
+	/**
+	* Validates the Tailwind CSS integration configuration and emits actionable
+	* warnings for common misconfigurations that cause silent failures.
+	*
+	* Called once during `configResolved` when `tailwindCss` is configured.
+	*/
+	function validateTailwindConfig(config, isWatchMode) {
+		const PREFIX = "[@analogjs/vite-plugin-angular]";
+		const tw = pluginOptions.tailwindCss;
+		if (!tw) return;
+		if (!isAbsolute(tw.rootStylesheet)) console.warn(`${PREFIX} tailwindCss.rootStylesheet must be an absolute path. Got: "${tw.rootStylesheet}". Use path.resolve(__dirname, '...') in your vite.config to convert it.`);
+		const resolvedPlugins = config.plugins;
+		const hasTailwindPlugin = resolvedPlugins.some((p) => p.name.startsWith("@tailwindcss/vite") || p.name.startsWith("tailwindcss"));
+		if (isWatchMode && !hasTailwindPlugin) throw new Error(`${PREFIX} tailwindCss is configured but no @tailwindcss/vite plugin was found. Component CSS with @apply directives will not be processed.\n\n  Fix: npm install @tailwindcss/vite --save-dev\n  Then add tailwindcss() to your vite.config plugins array.\n`);
+		if (isWatchMode && tw.rootStylesheet) {
+			const projectRoot = config.root;
+			if (!tw.rootStylesheet.startsWith(projectRoot)) {
+				if (!(config.server?.fs?.allow ?? []).some((allowed) => tw.rootStylesheet.startsWith(allowed))) console.warn(`${PREFIX} tailwindCss.rootStylesheet is outside the Vite project root. The dev server may reject it with 403.\n\n  Root: ${projectRoot}\n  Stylesheet: ${tw.rootStylesheet}\n\n  Fix: server.fs.allow: ['${dirname(tw.rootStylesheet)}']\n`);
+			}
+		}
+		if (tw.prefixes !== void 0 && tw.prefixes.length === 0) console.warn(`${PREFIX} tailwindCss.prefixes is an empty array. No component stylesheets will receive @reference injection. Either remove the prefixes option (to use @apply detection) or specify your prefixes: ['tw:']\n`);
+		const analogInstances = resolvedPlugins.filter((p) => p.name === "@analogjs/vite-plugin-angular");
+		if (analogInstances.length > 1) throw new Error(`${PREFIX} analog() is registered ${analogInstances.length} times. Each instance creates separate style maps, causing component styles to be lost. Remove duplicate registrations.`);
+		if (existsSync(tw.rootStylesheet)) try {
+			const rootContent = readFileSync(tw.rootStylesheet, "utf-8");
+			if (!rootContent.includes("@import \"tailwindcss\"") && !rootContent.includes("@import 'tailwindcss'")) console.warn(`${PREFIX} tailwindCss.rootStylesheet does not contain @import "tailwindcss". The @reference directive will point to a file without Tailwind configuration.\n\n  File: ${tw.rootStylesheet}\n`);
+		} catch {}
+	}
+	function isLikelyPageOnlyComponent(id) {
+		return id.includes("/pages/") || /\.page\.[cm]?[jt]sx?$/i.test(id) || /\([^/]+\)\.page\.[cm]?[jt]sx?$/i.test(id);
+	}
+	function removeActiveGraphMetadata(file) {
+		const previous = activeGraphComponentMetadata.get(file);
+		if (!previous) return;
+		for (const record of previous) {
+			const location = `${record.file}#${record.className}`;
+			if (record.selector) {
+				const selectorSet = selectorOwners.get(record.selector);
+				selectorSet?.delete(location);
+				if (selectorSet?.size === 0) selectorOwners.delete(record.selector);
+			}
+			const classNameSet = classNameOwners.get(record.className);
+			classNameSet?.delete(location);
+			if (classNameSet?.size === 0) classNameOwners.delete(record.className);
+		}
+		activeGraphComponentMetadata.delete(file);
+	}
+	function registerActiveGraphMetadata(file, records) {
+		removeActiveGraphMetadata(file);
+		if (records.length === 0) return;
+		activeGraphComponentMetadata.set(file, records);
+		for (const record of records) {
+			const location = `${record.file}#${record.className}`;
+			if (record.selector) {
+				let selectorSet = selectorOwners.get(record.selector);
+				if (!selectorSet) {
+					selectorSet = /* @__PURE__ */ new Set();
+					selectorOwners.set(record.selector, selectorSet);
+				}
+				selectorSet.add(location);
+			}
+			let classNameSet = classNameOwners.get(record.className);
+			if (!classNameSet) {
+				classNameSet = /* @__PURE__ */ new Set();
+				classNameOwners.set(record.className, classNameSet);
+			}
+			classNameSet.add(location);
+		}
+	}
+	function removeStyleOwnerMetadata(file) {
+		const previous = transformedStyleOwnerMetadata.get(file);
+		if (!previous) return;
+		for (const record of previous) {
+			const owners = styleSourceOwners.get(record.sourcePath);
+			owners?.delete(record.ownerFile);
+			if (owners?.size === 0) styleSourceOwners.delete(record.sourcePath);
+		}
+		transformedStyleOwnerMetadata.delete(file);
+	}
+	function registerStyleOwnerMetadata(file, styleUrls) {
+		removeStyleOwnerMetadata(file);
+		const records = styleUrls.map((urlSet) => {
+			const [, absoluteFileUrl] = urlSet.split("|");
+			return absoluteFileUrl ? {
+				ownerFile: file,
+				sourcePath: normalizePath(absoluteFileUrl)
+			} : void 0;
+		}).filter((record) => !!record);
+		if (records.length === 0) return;
+		transformedStyleOwnerMetadata.set(file, records);
+		for (const record of records) {
+			let owners = styleSourceOwners.get(record.sourcePath);
+			if (!owners) {
+				owners = /* @__PURE__ */ new Set();
+				styleSourceOwners.set(record.sourcePath, owners);
+			}
+			owners.add(record.ownerFile);
+		}
+	}
+	let stylesheetRegistry;
 	const sourceFileCache$1 = new sourceFileCache();
 	const isTest = process.env.NODE_ENV === "test" || !!process.env["VITEST"];
 	const isVitestVscode = !!process.env["VITEST_VSCODE"];
@@ -146,9 +308,17 @@ function angular(options) {
 	let angularCompilation;
 	function angularPlugin() {
 		let isProd = false;
-		if (angularFullVersion < 19e4 || isTest) {
-			pluginOptions.liveReload = false;
-			debugHmr("liveReload disabled", {
+		if (angularFullVersion < 19e4 && pluginOptions.hmr) {
+			debugHmr("hmr disabled: Angular version does not support HMR APIs", {
+				angularVersion: angularFullVersion,
+				isTest
+			});
+			console.warn("[@analogjs/vite-plugin-angular]: HMR was disabled because Angular v19+ is required for externalRuntimeStyles/_enableHmr support. Detected Angular version: %s.", angularFullVersion);
+			pluginOptions.hmr = false;
+		}
+		if (isTest) {
+			pluginOptions.hmr = false;
+			debugHmr("hmr disabled", {
 				angularVersion: angularFullVersion,
 				isTest
 			});
@@ -201,7 +371,11 @@ function angular(options) {
 				return {
 					[jsTransformConfigKey]: jsTransformConfigValue,
 					optimizeDeps: {
-						include: ["rxjs/operators", "rxjs"],
+						include: [
+							"rxjs/operators",
+							"rxjs",
+							"tslib"
+						],
 						exclude: ["@angular/platform-server"],
 						...useRolldown ? { rolldownOptions } : { esbuildOptions }
 					},
@@ -210,10 +384,11 @@ function angular(options) {
 			},
 			configResolved(config) {
 				resolvedConfig = config;
+				if (pluginOptions.hasTailwindCss) validateTailwindConfig(config, watchMode);
 				if (pluginOptions.useAngularCompilationAPI) {
-					externalComponentStyles = /* @__PURE__ */ new Map();
-					inlineComponentStyles = /* @__PURE__ */ new Map();
-					debugStyles("style maps initialized (Angular Compilation API)");
+					stylesheetRegistry = new AnalogStylesheetRegistry();
+					configureStylePipelineRegistry(pluginOptions.stylePipeline, stylesheetRegistry, { workspaceRoot: pluginOptions.workspaceRoot });
+					debugStyles("stylesheet registry initialized (Angular Compilation API)");
 				}
 				if (!jit) styleTransform = (code, filename) => preprocessCSS(code, filename, config);
 				if (isTest) testWatchMode = !(config.server.watch === null) || config.test?.watch === true || testWatchMode;
@@ -222,7 +397,15 @@ function angular(options) {
 				viteServer = server;
 				const invalidateCompilationOnFsChange = createFsWatcherCacheInvalidator(invalidateFsCaches, invalidateTsconfigCaches, () => performCompilation(resolvedConfig));
 				server.watcher.on("add", invalidateCompilationOnFsChange);
-				server.watcher.on("unlink", invalidateCompilationOnFsChange);
+				server.watcher.on("unlink", (file) => {
+					evictDeletedFileMetadata(file, {
+						removeActiveGraphMetadata,
+						removeStyleOwnerMetadata,
+						classNamesMap: classNames,
+						fileTransformMap
+					});
+					return invalidateCompilationOnFsChange();
+				});
 				server.watcher.on("change", (file) => {
 					if (file.includes("tsconfig")) invalidateTsconfigCaches();
 				});
@@ -235,6 +418,10 @@ function angular(options) {
 				}
 			},
 			async handleHotUpdate(ctx) {
+				if (isIgnoredHmrFile(ctx.file)) {
+					debugHmr("ignored file change", { file: ctx.file });
+					return [];
+				}
 				if (TS_EXT_REGEX.test(ctx.file)) {
 					const [fileId] = ctx.file.split("?");
 					debugHmr("TS file changed", {
@@ -243,7 +430,7 @@ function angular(options) {
 					});
 					pendingCompilation = performCompilation(resolvedConfig, [fileId]);
 					let result;
-					if (pluginOptions.liveReload) {
+					if (shouldEnableHmr()) {
 						await pendingCompilation;
 						pendingCompilation = null;
 						result = fileEmitter(fileId);
@@ -252,10 +439,28 @@ function angular(options) {
 							hmrEligible: !!result?.hmrEligible,
 							hasClassName: !!classNames.get(fileId)
 						});
+						debugHmrV("ts hmr evaluation", {
+							file: ctx.file,
+							fileId,
+							hasResult: !!result,
+							hmrEligible: !!result?.hmrEligible,
+							hasClassName: !!classNames.get(fileId),
+							className: classNames.get(fileId),
+							updateCode: result?.hmrUpdateCode ? describeStylesheetContent(result.hmrUpdateCode) : void 0,
+							errors: result?.errors?.length ?? 0,
+							warnings: result?.warnings?.length ?? 0,
+							hint: result?.hmrEligible ? "A TS-side component change, including inline template edits, produced an Angular HMR payload." : "No Angular HMR payload was emitted for this TS change; the change may not affect component template state."
+						});
 					}
-					if (pluginOptions.liveReload && result?.hmrEligible && classNames.get(fileId)) {
+					if (shouldEnableHmr() && result?.hmrEligible && classNames.get(fileId)) {
 						const relativeFileId = `${normalizePath(relative(process.cwd(), fileId))}@${classNames.get(fileId)}`;
 						debugHmr("sending component update", { relativeFileId });
+						debugHmrV("ts hmr component update payload", {
+							file: ctx.file,
+							fileId,
+							relativeFileId,
+							className: classNames.get(fileId)
+						});
 						sendHMRComponentUpdate(ctx.server, relativeFileId);
 						return ctx.modules.map((mod) => {
 							if (mod.id === ctx.file) return markModuleSelfAccepting(mod);
@@ -266,51 +471,224 @@ function angular(options) {
 				if (/\.(html|htm|css|less|sass|scss)$/.test(ctx.file)) {
 					debugHmr("resource file changed", { file: ctx.file });
 					fileTransformMap.delete(ctx.file.split("?")[0]);
+					if (/\.(css|less|sass|scss)$/.test(ctx.file)) refreshStylesheetRegistryForFile(ctx.file, stylesheetRegistry, pluginOptions.stylePreprocessor);
+					if (/\.(css|less|sass|scss)$/.test(ctx.file) && existsSync(ctx.file)) try {
+						const rawResource = readFileSync(ctx.file, "utf-8");
+						debugHmrV("resource source snapshot", {
+							file: ctx.file,
+							mtimeMs: safeStatMtimeMs(ctx.file),
+							...describeStylesheetContent(rawResource)
+						});
+					} catch (error) {
+						debugHmrV("resource source snapshot failed", {
+							file: ctx.file,
+							error: String(error)
+						});
+					}
+					const fileModules = await getModulesForChangedFile(ctx.server, ctx.file, ctx.modules, stylesheetRegistry);
+					debugHmrV("resource modules resolved", {
+						file: ctx.file,
+						eventModuleCount: ctx.modules.length,
+						fileModuleCount: fileModules.length,
+						modules: fileModules.map((mod) => ({
+							id: mod.id,
+							file: mod.file,
+							type: mod.type,
+							url: mod.url
+						}))
+					});
 					/**
 					* Check to see if this was a direct request
 					* for an external resource (styles, html).
 					*/
-					const isDirect = ctx.modules.find((mod) => ctx.file === mod.file && mod.id?.includes("?direct"));
-					const isInline = ctx.modules.find((mod) => ctx.file === mod.file && mod.id?.includes("?inline"));
+					const isDirect = fileModules.find((mod) => !!mod.id && mod.id.includes("?direct") && isModuleForChangedResource(mod, ctx.file, stylesheetRegistry));
+					const isInline = fileModules.find((mod) => !!mod.id && mod.id.includes("?inline") && isModuleForChangedResource(mod, ctx.file, stylesheetRegistry));
+					debugHmrV("resource direct/inline detection", {
+						file: ctx.file,
+						hasDirect: !!isDirect,
+						directId: isDirect?.id,
+						hasInline: !!isInline,
+						inlineId: isInline?.id
+					});
 					if (isDirect || isInline) {
-						if (pluginOptions.liveReload && isDirect?.id && isDirect.file) {
-							if (isDirect.type === "css" && isComponentStyleSheet(isDirect.id)) {
+						if (shouldExternalizeStyles() && isDirect?.id && isDirect.file) {
+							const isComponentStyle = isDirect.type === "css" && isComponentStyleSheet(isDirect.id);
+							debugHmrV("resource direct branch", {
+								file: ctx.file,
+								directId: isDirect.id,
+								directType: isDirect.type,
+								shouldExternalize: shouldExternalizeStyles(),
+								isComponentStyle
+							});
+							if (isComponentStyle) {
 								const { encapsulation } = getComponentStyleSheetMeta(isDirect.id);
-								debugStyles("HMR: component stylesheet changed", {
+								const wrapperModules = await findComponentStylesheetWrapperModules(ctx.server, ctx.file, isDirect, fileModules, stylesheetRegistry);
+								const stylesheetDiagnosis = diagnoseComponentStylesheetPipeline(ctx.file, isDirect, stylesheetRegistry, wrapperModules, pluginOptions.stylePreprocessor);
+								debugStylesV("HMR: component stylesheet changed", {
 									file: isDirect.file,
 									encapsulation
 								});
-								if (encapsulation !== "shadow") {
-									ctx.server.ws.send({
-										type: "update",
-										updates: [{
-											type: "css-update",
-											timestamp: Date.now(),
-											path: isDirect.url,
-											acceptedPath: isDirect.file
-										}]
+								debugHmrV("component stylesheet wrapper modules", {
+									file: ctx.file,
+									wrapperCount: wrapperModules.length,
+									wrapperIds: wrapperModules.map((mod) => mod.id),
+									availableModuleIds: fileModules.map((mod) => mod.id)
+								});
+								debugHmrV("component stylesheet pipeline diagnosis", stylesheetDiagnosis);
+								ctx.server.moduleGraph.invalidateModule(isDirect);
+								debugHmrV("component stylesheet direct module invalidated", {
+									file: ctx.file,
+									directModuleId: isDirect.id,
+									directModuleUrl: isDirect.url,
+									reason: "Ensure Vite drops stale direct CSS transform results before wrapper or fallback handling continues."
+								});
+								const trackedWrapperRequestIds = stylesheetDiagnosis.trackedRequestIds.filter((id) => id.includes("?ngcomp="));
+								if (encapsulation !== "shadow" && (wrapperModules.length > 0 || trackedWrapperRequestIds.length > 0)) {
+									wrapperModules.forEach((mod) => ctx.server.moduleGraph.invalidateModule(mod));
+									debugHmrV("sending css-update for component stylesheet", {
+										file: ctx.file,
+										path: isDirect.url,
+										acceptedPath: isDirect.file,
+										wrapperCount: wrapperModules.length,
+										trackedWrapperRequestIds,
+										hint: wrapperModules.length > 0 ? "Live wrapper modules were found and invalidated before sending the CSS update." : "No live wrapper ModuleNode was available, but the wrapper request id is already tracked, so Analog is trusting the browser-visible wrapper identity and patching the direct stylesheet instead of forcing a reload."
+									});
+									sendCssUpdate(ctx.server, {
+										path: isDirect.url,
+										acceptedPath: isDirect.file
 									});
-									return ctx.modules.filter((mod) => {
+									logComponentStylesheetHmrOutcome({
+										file: ctx.file,
+										encapsulation,
+										diagnosis: stylesheetDiagnosis,
+										outcome: "css-update",
+										directModuleId: isDirect.id,
+										wrapperIds: wrapperModules.map((mod) => mod.id)
+									});
+									return union(fileModules.filter((mod) => {
 										return mod.file !== ctx.file || mod.id !== isDirect.id;
 									}).map((mod) => {
 										if (mod.file === ctx.file) return markModuleSelfAccepting(mod);
 										return mod;
+									}), wrapperModules.map((mod) => markModuleSelfAccepting(mod)));
+								}
+								debugHmrV("component stylesheet hmr fallback: full reload", {
+									file: ctx.file,
+									encapsulation,
+									reason: trackedWrapperRequestIds.length === 0 ? "missing-wrapper-module" : encapsulation === "shadow" ? "shadow-encapsulation" : "tracked-wrapper-still-not-patchable",
+									directId: isDirect.id,
+									trackedRequestIds: stylesheetRegistry?.getRequestIdsForSource(ctx.file) ?? []
+								});
+								const ownerModules = findStyleOwnerModules(ctx.server, ctx.file, styleSourceOwners);
+								debugHmrV("component stylesheet owner fallback lookup", {
+									file: ctx.file,
+									ownerCount: ownerModules.length,
+									ownerIds: ownerModules.map((mod) => mod.id),
+									ownerFiles: [...styleSourceOwners.get(normalizePath(ctx.file)) ?? []]
+								});
+								if (ownerModules.length > 0) {
+									pendingCompilation = performCompilation(resolvedConfig, [...ownerModules.map((mod) => mod.id).filter(Boolean)]);
+									await pendingCompilation;
+									pendingCompilation = null;
+									const updates = ownerModules.map((mod) => mod.id).filter((id) => !!id && !!classNames.get(id));
+									const derivedUpdates = ownerModules.map((mod) => mod.id).filter((id) => !!id).flatMap((ownerId) => resolveComponentClassNamesForStyleOwner(ownerId, ctx.file).map((className) => ({
+										ownerId,
+										className,
+										via: "raw-component-metadata"
+									})));
+									debugHmrV("component stylesheet owner fallback compilation", {
+										file: ctx.file,
+										ownerIds: ownerModules.map((mod) => mod.id),
+										updateIds: updates,
+										classNames: updates.map((id) => ({
+											id,
+											className: classNames.get(id)
+										})),
+										derivedUpdates
+									});
+									if (derivedUpdates.length > 0) debugHmrV("component stylesheet owner fallback derived updates", {
+										file: ctx.file,
+										updates: derivedUpdates,
+										hint: "Angular did not repopulate classNames during CSS-only owner recompilation, so Analog derived component identities from raw component metadata."
 									});
 								}
+								logComponentStylesheetHmrOutcome({
+									file: ctx.file,
+									encapsulation,
+									diagnosis: stylesheetDiagnosis,
+									outcome: "full-reload",
+									directModuleId: isDirect.id,
+									wrapperIds: wrapperModules.map((mod) => mod.id),
+									ownerIds: ownerModules.map((mod) => mod.id)
+								});
+								sendFullReload(ctx.server, {
+									file: ctx.file,
+									encapsulation,
+									reason: wrapperModules.length === 0 ? "missing-wrapper-module-and-no-owner-updates" : "shadow-encapsulation",
+									directId: isDirect.id,
+									trackedRequestIds: stylesheetRegistry?.getRequestIdsForSource(ctx.file) ?? []
+								});
+								return [];
+							}
+						}
+						return fileModules;
+					}
+					if (shouldEnableHmr() && /\.(html|htm)$/.test(ctx.file) && fileModules.length === 0) {
+						const ownerModules = findTemplateOwnerModules(ctx.server, ctx.file);
+						debugHmrV("template owner lookup", {
+							file: ctx.file,
+							ownerCount: ownerModules.length,
+							ownerIds: ownerModules.map((mod) => mod.id),
+							hint: ownerModules.length > 0 ? "The external template has candidate TS owner modules that can be recompiled for HMR." : "No TS owner modules were visible for this external template change; HMR will fall through to the generic importer path."
+						});
+						if (ownerModules.length > 0) {
+							const ownerIds = ownerModules.map((mod) => mod.id).filter(Boolean);
+							ownerModules.forEach((mod) => ctx.server.moduleGraph.invalidateModule(mod));
+							pendingCompilation = performCompilation(resolvedConfig, ownerIds);
+							await pendingCompilation;
+							pendingCompilation = null;
+							const updates = ownerIds.filter((id) => classNames.get(id));
+							debugHmrV("template owner recompilation result", {
+								file: ctx.file,
+								ownerIds,
+								updates,
+								updateClassNames: updates.map((id) => ({
+									id,
+									className: classNames.get(id)
+								})),
+								hint: updates.length > 0 ? "External template recompilation produced Angular component update targets." : "External template recompilation completed, but no Angular component update targets were surfaced."
+							});
+							if (updates.length > 0) {
+								debugHmr("template owner module invalidation", {
+									file: ctx.file,
+									ownerIds,
+									updateCount: updates.length
+								});
+								updates.forEach((updateId) => {
+									const relativeFileId = `${normalizePath(relative(process.cwd(), updateId))}@${classNames.get(updateId)}`;
+									sendHMRComponentUpdate(ctx.server, relativeFileId);
+								});
+								return ownerModules.map((mod) => markModuleSelfAccepting(mod));
 							}
 						}
-						return ctx.modules;
 					}
 					const mods = [];
 					const updates = [];
-					ctx.modules.forEach((mod) => {
+					fileModules.forEach((mod) => {
 						mod.importers.forEach((imp) => {
 							ctx.server.moduleGraph.invalidateModule(imp);
-							if (pluginOptions.liveReload && classNames.get(imp.id)) updates.push(imp.id);
+							if (shouldExternalizeStyles() && classNames.get(imp.id)) updates.push(imp.id);
 							else mods.push(imp);
 						});
 					});
-					pendingCompilation = performCompilation(resolvedConfig, [...mods.map((mod) => mod.id), ...updates]);
+					debugHmrV("resource importer analysis", {
+						file: ctx.file,
+						fileModuleCount: fileModules.length,
+						importerCount: fileModules.reduce((count, mod) => count + mod.importers.size, 0),
+						updates,
+						mods: mods.map((mod) => mod.id)
+					});
+					pendingCompilation = performCompilation(resolvedConfig, [...mods.map((mod) => mod.id).filter(Boolean), ...updates]);
 					if (updates.length > 0) {
 						await pendingCompilation;
 						pendingCompilation = null;
@@ -322,7 +700,7 @@ function angular(options) {
 							const impRelativeFileId = `${normalizePath(relative(process.cwd(), updateId))}@${classNames.get(updateId)}`;
 							sendHMRComponentUpdate(ctx.server, impRelativeFileId);
 						});
-						return ctx.modules.map((mod) => {
+						return fileModules.map((mod) => {
 							if (mod.id === ctx.file) return markModuleSelfAccepting(mod);
 							return mod;
 						});
@@ -340,24 +718,42 @@ function angular(options) {
 				}
 				if (isComponentStyleSheet(id)) {
 					const filename = getFilenameFromPath(id);
-					const componentStyles = externalComponentStyles?.get(filename);
+					if (stylesheetRegistry?.hasServed(filename)) {
+						debugStylesV("resolveId: kept preprocessed ID", { filename });
+						return id;
+					}
+					const componentStyles = stylesheetRegistry?.resolveExternalSource(filename);
 					if (componentStyles) {
-						debugStyles("resolveId: mapped external stylesheet", {
+						debugStylesV("resolveId: mapped external stylesheet", {
 							filename,
 							resolvedPath: componentStyles
 						});
 						return componentStyles + new URL(id, "http://localhost").search;
 					}
+					debugStyles("resolveId: component stylesheet NOT FOUND in either map", {
+						filename,
+						inlineMapSize: stylesheetRegistry?.servedCount ?? 0,
+						externalMapSize: stylesheetRegistry?.externalCount ?? 0
+					});
 				}
 			},
 			async load(id) {
 				if (isComponentStyleSheet(id)) {
 					const filename = getFilenameFromPath(id);
-					const componentStyles = inlineComponentStyles?.get(filename);
+					const componentStyles = stylesheetRegistry?.getServedContent(filename);
 					if (componentStyles) {
-						debugStyles("load: served inline component stylesheet", {
+						stylesheetRegistry?.registerActiveRequest(id);
+						debugHmrV("stylesheet active request registered", {
+							requestId: id,
+							filename,
+							sourcePath: stylesheetRegistry?.resolveExternalSource(filename) ?? stylesheetRegistry?.resolveExternalSource(filename.replace(/^\//, "")),
+							trackedRequestIds: stylesheetRegistry?.getRequestIdsForSource(stylesheetRegistry?.resolveExternalSource(filename) ?? stylesheetRegistry?.resolveExternalSource(filename.replace(/^\//, "")) ?? "") ?? []
+						});
+						debugStylesV("load: served inline component stylesheet", {
 							filename,
-							length: componentStyles.length
+							length: componentStyles.length,
+							requestId: id,
+							...describeStylesheetContent(componentStyles)
 						});
 						return componentStyles;
 					}
@@ -388,12 +784,15 @@ function angular(options) {
 					*/
 					if (id.includes("?") && id.includes("analog-content-")) return;
 					/**
-					* Encapsulate component stylesheets that use emulated encapsulation
+					* Encapsulate component stylesheets that use emulated encapsulation.
+					* Must run whenever styles are externalized (not just HMR), because
+					* Angular's externalRuntimeStyles skips its own encapsulation when
+					* styles are external — the build tool is expected to handle it.
 					*/
-					if (pluginOptions.liveReload && isComponentStyleSheet(id)) {
+					if (shouldExternalizeStyles() && isComponentStyleSheet(id)) {
 						const { encapsulation, componentId } = getComponentStyleSheetMeta(id);
 						if (encapsulation === "emulated" && componentId) {
-							debugStyles("applying emulated view encapsulation", {
+							debugStylesV("applying emulated view encapsulation", {
 								stylesheet: id.split("?")[0],
 								componentId
 							});
@@ -421,7 +820,7 @@ function angular(options) {
 						}
 					}
 					const hasComponent = code.includes("@Component");
-					debugCompiler("transform", {
+					debugCompilerV("transform", {
 						id,
 						codeLength: code.length,
 						hasComponent
@@ -451,6 +850,19 @@ function angular(options) {
 							data = data.replace(`angular:jit:style:file;${styleFile}`, `${resolvedStyleUrl}?inline`);
 						});
 					}
+					if (data.includes("HmrLoad")) {
+						const hasMetaUrl = data.includes("getReplaceMetadataURL");
+						debugHmrV("vite-ignore injection", {
+							id,
+							dataLength: data.length,
+							hasMetaUrl
+						});
+						if (hasMetaUrl) {
+							const patched = injectViteIgnoreForHmrMetadata(data);
+							if (patched !== data && !patched.includes("@vite-ignore")) debugHmrV("vite-ignore regex fallback", { id });
+							data = patched;
+						}
+					}
 					return {
 						code: data,
 						map: null
@@ -469,8 +881,103 @@ function angular(options) {
 	}
 	return [
 		replaceFiles(pluginOptions.fileReplacements, pluginOptions.workspaceRoot),
+		{
+			name: "@analogjs/vite-plugin-angular:template-class-binding-guard",
+			enforce: "pre",
+			transform(code, id) {
+				if (id.includes("node_modules")) return;
+				const cleanId = id.split("?")[0];
+				if (/\.(html|htm)$/i.test(cleanId)) {
+					const staticClassIssue = findStaticClassAndBoundClassConflicts(code)[0];
+					if (staticClassIssue) throwTemplateClassBindingConflict(cleanId, staticClassIssue);
+					const mixedClassIssue = findBoundClassAndNgClassConflicts(code)[0];
+					if (mixedClassIssue) this.warn([
+						"[Analog Angular] Conflicting class composition.",
+						`File: ${cleanId}:${mixedClassIssue.line}:${mixedClassIssue.column}`,
+						"This element mixes `[class]` and `[ngClass]`.",
+						"Prefer a single class-binding strategy so class merging stays predictable.",
+						"Use one `[ngClass]` expression or explicit `[class.foo]` bindings.",
+						`Snippet: ${mixedClassIssue.snippet}`
+					].join("\n"));
+					return;
+				}
+				if (TS_EXT_REGEX.test(cleanId)) {
+					const rawStyleUrls = styleUrlsResolver.resolve(code, cleanId);
+					registerStyleOwnerMetadata(cleanId, rawStyleUrls);
+					debugHmrV("component stylesheet owner metadata registered", {
+						file: cleanId,
+						styleUrlCount: rawStyleUrls.length,
+						styleUrls: rawStyleUrls,
+						ownerSources: [...transformedStyleOwnerMetadata.get(cleanId)?.map((record) => record.sourcePath) ?? []]
+					});
+					const components = getAngularComponentMetadata(code);
+					const inlineTemplateIssue = components.flatMap((component) => component.inlineTemplates.flatMap((template) => findStaticClassAndBoundClassConflicts(template)))[0];
+					if (inlineTemplateIssue) throwTemplateClassBindingConflict(cleanId, inlineTemplateIssue);
+					const mixedInlineClassIssue = components.flatMap((component) => component.inlineTemplates.flatMap((template) => findBoundClassAndNgClassConflicts(template)))[0];
+					if (mixedInlineClassIssue) this.warn([
+						"[Analog Angular] Conflicting class composition.",
+						`File: ${cleanId}:${mixedInlineClassIssue.line}:${mixedInlineClassIssue.column}`,
+						"This element mixes `[class]` and `[ngClass]`.",
+						"Prefer a single class-binding strategy so class merging stays predictable.",
+						"Use one `[ngClass]` expression or explicit `[class.foo]` bindings.",
+						`Snippet: ${mixedInlineClassIssue.snippet}`
+					].join("\n"));
+					registerActiveGraphMetadata(cleanId, components.map((component) => ({
+						file: cleanId,
+						className: component.className,
+						selector: component.selector
+					})));
+					for (const component of components) {
+						if (!component.selector && !isLikelyPageOnlyComponent(cleanId)) throw new Error([
+							"[Analog Angular] Selectorless component detected.",
+							`File: ${cleanId}`,
+							`Component: ${component.className}`,
+							"This component has no `selector`, so Angular will render it as `ng-component`.",
+							"That increases the chance of component ID collisions and makes diagnostics harder to interpret.",
+							"Add an explicit selector for reusable components.",
+							"Selectorless components are only supported for page and route-only files."
+						].join("\n"));
+						if (component.selector) {
+							const selectorEntries = selectorOwners.get(component.selector);
+							if (selectorEntries && selectorEntries.size > 1) throw new Error([
+								"[Analog Angular] Duplicate component selector detected.",
+								`Selector: ${component.selector}`,
+								"Multiple components in the active application graph use the same selector.",
+								"Selectors must be unique within the active graph to avoid ambiguous rendering and confusing diagnostics.",
+								`Locations:\n${formatActiveGraphLocations(selectorEntries)}`
+							].join("\n"));
+						}
+						const classNameEntries = classNameOwners.get(component.className);
+						if (classNameEntries && classNameEntries.size > 1) this.warn([
+							"[Analog Angular] Duplicate component class name detected.",
+							`Class name: ${component.className}`,
+							"Two or more Angular components in the active graph share the same exported class name.",
+							"Rename one of them to keep HMR, stack traces, and compiler diagnostics unambiguous.",
+							`Locations:\n${formatActiveGraphLocations(classNameEntries)}`
+						].join("\n"));
+					}
+				}
+			}
+		},
+		pluginOptions.hasTailwindCss && {
+			name: "@analogjs/vite-plugin-angular:tailwind-reference",
+			enforce: "pre",
+			transform(code, id) {
+				const tw = pluginOptions.tailwindCss;
+				if (!tw || !id.includes(".css")) return;
+				if (id.split("?")[0] === tw.rootStylesheet) return;
+				if (code.includes("@reference") || code.includes("@import \"tailwindcss\"") || code.includes("@import 'tailwindcss'")) return;
+				const rootBasename = basename(tw.rootStylesheet);
+				if (code.includes(rootBasename)) return;
+				const prefixes = tw.prefixes;
+				if (prefixes ? prefixes.some((p) => code.includes(p)) : code.includes("@apply")) {
+					debugTailwind("injected @reference via pre-transform", { id: id.split("/").slice(-2).join("/") });
+					return `@reference "${tw.rootStylesheet}";\n${code}`;
+				}
+			}
+		},
 		angularPlugin(),
-		pluginOptions.liveReload && liveReloadPlugin({
+		pluginOptions.hmr && liveReloadPlugin({
 			classNames,
 			fileEmitter
 		}),
@@ -485,8 +992,7 @@ function angular(options) {
 		nxFolderPlugin()
 	].filter(Boolean);
 	function findIncludes() {
-		const workspaceRoot = normalizePath(resolve(pluginOptions.workspaceRoot));
-		return globSync([...pluginOptions.include.map((glob) => `${workspaceRoot}${glob}`)], {
+		return globSync(pluginOptions.include.map((glob) => normalizeIncludeGlob(pluginOptions.workspaceRoot, glob)), {
 			dot: true,
 			absolute: true
 		});
@@ -541,26 +1047,49 @@ function angular(options) {
 			modifiedFiles,
 			async transformStylesheet(data, containingFile, resourceFile, order, className) {
 				const filename = resourceFile ?? containingFile.replace(".ts", `.${pluginOptions.inlineStylesExtension}`);
-				const preprocessedData = pluginOptions.stylePreprocessor ? pluginOptions.stylePreprocessor(data, filename) ?? data : data;
-				if (pluginOptions.liveReload && watchMode) {
-					const stylesheetId = createHash("sha256").update(containingFile).update(className).update(String(order)).update(preprocessedData).digest("hex") + "." + pluginOptions.inlineStylesExtension;
-					inlineComponentStyles.set(stylesheetId, preprocessedData);
-					debugStyles("stylesheet deferred to Vite pipeline (liveReload)", {
+				const preprocessed = preprocessStylesheetResult(data, filename, pluginOptions.stylePreprocessor);
+				if (shouldEnableHmr() && className && containingFile) classNames.set(normalizePath(containingFile), className);
+				if (shouldExternalizeStyles()) {
+					const stylesheetId = registerStylesheetContent(stylesheetRegistry, {
+						code: preprocessed.code,
+						dependencies: normalizeStylesheetDependencies(preprocessed.dependencies),
+						diagnostics: preprocessed.diagnostics,
+						tags: preprocessed.tags,
+						containingFile,
+						className,
+						order,
+						inlineStylesExtension: pluginOptions.inlineStylesExtension,
+						resourceFile: resourceFile ?? void 0
+					});
+					debugStyles("stylesheet deferred to Vite pipeline", {
 						stylesheetId,
 						resourceFile: resourceFile ?? "(inline)"
 					});
+					debugStylesV("stylesheet deferred content snapshot", {
+						stylesheetId,
+						filename,
+						resourceFile: resourceFile ?? "(inline)",
+						dependencies: preprocessed.dependencies,
+						diagnostics: preprocessed.diagnostics,
+						tags: preprocessed.tags,
+						...describeStylesheetContent(preprocessed.code)
+					});
 					return stylesheetId;
 				}
-				debugStyles("stylesheet processed inline via preprocessCSS (no liveReload)", {
+				debugStyles("stylesheet processed inline via preprocessCSS", {
 					filename,
 					resourceFile: resourceFile ?? "(inline)",
-					dataLength: preprocessedData.length
+					dataLength: preprocessed.code.length
 				});
 				let stylesheetResult;
 				try {
-					stylesheetResult = await preprocessCSS(preprocessedData, `${filename}?direct`, resolvedConfig);
+					stylesheetResult = await preprocessCSS(preprocessed.code, `${filename}?direct`, resolvedConfig);
 				} catch (e) {
-					console.error(`${e}`);
+					debugStyles("preprocessCSS error", {
+						filename,
+						resourceFile: resourceFile ?? "(inline)",
+						error: String(e)
+					});
 				}
 				return stylesheetResult?.code || "";
 			},
@@ -568,21 +1097,24 @@ function angular(options) {
 				return "";
 			}
 		}, (tsCompilerOptions) => {
-			if (pluginOptions.liveReload && watchMode) {
+			if (shouldExternalizeStyles()) tsCompilerOptions["externalRuntimeStyles"] = true;
+			if (shouldEnableHmr()) {
 				tsCompilerOptions["_enableHmr"] = true;
-				tsCompilerOptions["externalRuntimeStyles"] = true;
 				tsCompilerOptions["supportTestBed"] = true;
 			}
 			debugCompiler("tsCompilerOptions (compilation API)", {
-				liveReload: pluginOptions.liveReload,
+				hmr: pluginOptions.hmr,
+				hasTailwindCss: pluginOptions.hasTailwindCss,
 				watchMode,
+				shouldExternalize: shouldExternalizeStyles(),
 				externalRuntimeStyles: !!tsCompilerOptions["externalRuntimeStyles"],
-				hmr: !!tsCompilerOptions["_enableHmr"]
+				hmrEnabled: !!tsCompilerOptions["_enableHmr"]
 			});
 			if (tsCompilerOptions.compilationMode === "partial") {
 				tsCompilerOptions["supportTestBed"] = true;
 				tsCompilerOptions["supportJitMode"] = true;
 			}
+			if (angularFullVersion >= 2e5) tsCompilerOptions["_enableSelectorless"] = true;
 			if (!isTest && config.build?.lib) {
 				tsCompilerOptions["declaration"] = true;
 				tsCompilerOptions["declarationMap"] = watchMode;
@@ -591,13 +1123,89 @@ function angular(options) {
 			if (isTest) tsCompilerOptions["supportTestBed"] = true;
 			return tsCompilerOptions;
 		});
+		debugStyles("external stylesheets from compilation API", {
+			count: compilationResult.externalStylesheets?.size ?? 0,
+			hasPreprocessor: !!pluginOptions.stylePreprocessor,
+			hasInlineMap: !!stylesheetRegistry
+		});
+		const preprocessStats = {
+			total: 0,
+			injected: 0,
+			skipped: 0,
+			errors: 0
+		};
 		compilationResult.externalStylesheets?.forEach((value, key) => {
-			externalComponentStyles?.set(`${value}.css`, key);
-			debugStyles("external stylesheet registered for resolveId mapping", {
-				filename: `${value}.css`,
+			preprocessStats.total++;
+			const angularHash = `${value}.css`;
+			stylesheetRegistry?.registerExternalRequest(angularHash, key);
+			if (stylesheetRegistry && pluginOptions.stylePreprocessor && existsSync(key)) try {
+				const rawCss = readFileSync(key, "utf-8");
+				const preprocessed = preprocessStylesheetResult(rawCss, key, pluginOptions.stylePreprocessor);
+				debugStylesV("external stylesheet raw snapshot", {
+					angularHash,
+					resolvedPath: key,
+					mtimeMs: safeStatMtimeMs(key),
+					...describeStylesheetContent(rawCss)
+				});
+				const servedCss = rewriteRelativeCssImports(preprocessed.code, key);
+				stylesheetRegistry.registerServedStylesheet({
+					publicId: angularHash,
+					sourcePath: key,
+					originalCode: rawCss,
+					normalizedCode: servedCss,
+					dependencies: normalizeStylesheetDependencies(preprocessed.dependencies),
+					diagnostics: preprocessed.diagnostics,
+					tags: preprocessed.tags
+				}, [
+					key,
+					normalizePath(key),
+					basename(key),
+					key.replace(/^\//, "")
+				]);
+				if (servedCss && servedCss !== rawCss) {
+					preprocessStats.injected++;
+					debugStylesV("preprocessed external stylesheet for Tailwind @reference", {
+						angularHash,
+						resolvedPath: key,
+						mtimeMs: safeStatMtimeMs(key),
+						raw: describeStylesheetContent(rawCss),
+						served: describeStylesheetContent(servedCss),
+						dependencies: preprocessed.dependencies,
+						diagnostics: preprocessed.diagnostics,
+						tags: preprocessed.tags
+					});
+				} else {
+					preprocessStats.skipped++;
+					debugStylesV("external stylesheet unchanged after preprocessing", {
+						angularHash,
+						resolvedPath: key,
+						mtimeMs: safeStatMtimeMs(key),
+						raw: describeStylesheetContent(rawCss),
+						served: describeStylesheetContent(servedCss),
+						dependencies: preprocessed.dependencies,
+						diagnostics: preprocessed.diagnostics,
+						tags: preprocessed.tags,
+						hint: "Registry mapping is still registered so Angular component stylesheet HMR can track and refresh this file even when preprocessing makes no textual changes."
+					});
+				}
+			} catch (e) {
+				preprocessStats.errors++;
+				console.warn(`[@analogjs/vite-plugin-angular] failed to preprocess external stylesheet: ${key}: ${e}`);
+			}
+			else {
+				preprocessStats.skipped++;
+				debugStylesV("external stylesheet preprocessing skipped", {
+					filename: angularHash,
+					resolvedPath: key,
+					reason: !stylesheetRegistry ? "no stylesheetRegistry" : !pluginOptions.stylePreprocessor ? "no stylePreprocessor" : "file not found on disk"
+				});
+			}
+			debugStylesV("external stylesheet registered for resolveId mapping", {
+				filename: angularHash,
 				resolvedPath: key
 			});
 		});
+		debugStyles("external stylesheet preprocessing complete", preprocessStats);
 		const diagnostics = await angularCompilation.diagnoseFiles(pluginOptions.disableTypeChecking ? DiagnosticModes.All & ~DiagnosticModes.Semantic : DiagnosticModes.All);
 		const errors = diagnostics.errors?.length ? diagnostics.errors : [];
 		const warnings = diagnostics.warnings?.length ? diagnostics.warnings : [];
@@ -653,7 +1261,9 @@ function angular(options) {
 			resolvedTsConfigPath,
 			isProd ? "prod" : "dev",
 			isTest ? "test" : "app",
-			config.build?.lib ? "lib" : "nolib"
+			config.build?.lib ? "lib" : "nolib",
+			pluginOptions.hmr ? "hmr" : "nohmr",
+			pluginOptions.hasTailwindCss ? "tw" : "notw"
 		].join("|");
 		let cached = tsconfigOptionsCache.get(tsconfigKey);
 		if (!cached) {
@@ -682,19 +1292,22 @@ function angular(options) {
 		}
 		const tsCompilerOptions = { ...cached.options };
 		let rootNames = [...cached.rootNames];
-		if (pluginOptions.liveReload && watchMode) {
+		if (shouldExternalizeStyles()) tsCompilerOptions["externalRuntimeStyles"] = true;
+		if (shouldEnableHmr()) {
 			tsCompilerOptions["_enableHmr"] = true;
-			tsCompilerOptions["externalRuntimeStyles"] = true;
 			tsCompilerOptions["supportTestBed"] = true;
 		}
 		debugCompiler("tsCompilerOptions (NgtscProgram path)", {
+			hmr: pluginOptions.hmr,
+			shouldExternalize: shouldExternalizeStyles(),
 			externalRuntimeStyles: !!tsCompilerOptions["externalRuntimeStyles"],
-			hmr: !!tsCompilerOptions["_enableHmr"]
+			hmrEnabled: !!tsCompilerOptions["_enableHmr"]
 		});
 		if (tsCompilerOptions["compilationMode"] === "partial") {
 			tsCompilerOptions["supportTestBed"] = true;
 			tsCompilerOptions["supportJitMode"] = true;
 		}
+		if (angularFullVersion >= 2e5) tsCompilerOptions["_enableSelectorless"] = true;
 		if (!isTest && config.build?.lib) {
 			tsCompilerOptions["declaration"] = true;
 			tsCompilerOptions["declarationMap"] = watchMode;
@@ -722,14 +1335,13 @@ function angular(options) {
 		}
 		if (!jit) {
 			const externalizeStyles = !!tsCompilerOptions["externalRuntimeStyles"];
-			inlineComponentStyles = externalizeStyles ? /* @__PURE__ */ new Map() : void 0;
-			externalComponentStyles = externalizeStyles ? /* @__PURE__ */ new Map() : void 0;
-			debugStyles("style maps initialized (NgtscProgram path)", { externalizeStyles });
+			stylesheetRegistry = externalizeStyles ? new AnalogStylesheetRegistry() : void 0;
+			if (stylesheetRegistry) configureStylePipelineRegistry(pluginOptions.stylePipeline, stylesheetRegistry, { workspaceRoot: pluginOptions.workspaceRoot });
+			debugStyles("stylesheet registry initialized (NgtscProgram path)", { externalizeStyles });
 			augmentHostWithResources(host, styleTransform, {
 				inlineStylesExtension: pluginOptions.inlineStylesExtension,
 				isProd,
-				inlineComponentStyles,
-				externalComponentStyles,
+				stylesheetRegistry,
 				sourceFileCache: sourceFileCache$1,
 				stylePreprocessor: pluginOptions.stylePreprocessor
 			});
@@ -756,7 +1368,7 @@ function angular(options) {
 		if (!watchMode) builder = ts.createAbstractBuilder(typeScriptProgram, host, oldBuilder);
 		if (angularCompiler) await angularCompiler.analyzeAsync();
 		const transformers = mergeTransformers({ before: jit ? [compilerCli.constructorParametersDownlevelTransform(builder.getProgram()), cjt(() => builder.getProgram().getTypeChecker())] : [] }, jit ? {} : angularCompiler.prepareEmit().transformers);
-		const fileMetadata = getFileMetadata(builder, angularCompiler, pluginOptions.liveReload, pluginOptions.disableTypeChecking);
+		const fileMetadata = getFileMetadata(builder, angularCompiler, pluginOptions.hmr, pluginOptions.disableTypeChecking);
 		const writeFileCallback = (_filename, content, _a, _b, sourceFiles) => {
 			if (!sourceFiles?.length) return;
 			const filename = normalizePath(sourceFiles[0].fileName);
@@ -850,14 +1462,389 @@ function mapTemplateUpdatesToFiles(templateUpdates) {
 	});
 	return updatesByFile;
 }
+/**
+* Returns every live Vite module that can legitimately represent a changed
+* Angular resource file.
+*
+* For normal files, `getModulesByFile()` is enough. For Angular component
+* stylesheets, it is not: the browser often holds virtual hashed requests
+* (`/abc123.css?direct&ngcomp=...` and `/abc123.css?ngcomp=...`) that are no
+* longer discoverable from the original source path alone. We therefore merge:
+* - watcher event modules
+* - module-graph modules by source file
+* - registry-tracked live request ids resolved back through the module graph
+*/
+async function getModulesForChangedFile(server, file, eventModules = [], stylesheetRegistry) {
+	const normalizedFile = normalizePath(file.split("?")[0]);
+	const modules = /* @__PURE__ */ new Map();
+	for (const mod of eventModules) if (mod.id) modules.set(mod.id, mod);
+	server.moduleGraph.getModulesByFile(normalizedFile)?.forEach((mod) => {
+		if (mod.id) modules.set(mod.id, mod);
+	});
+	const stylesheetRequestIds = stylesheetRegistry?.getRequestIdsForSource(normalizedFile) ?? [];
+	const requestIdHits = [];
+	for (const requestId of stylesheetRequestIds) {
+		const candidates = [requestId, requestId.startsWith("/") ? requestId : `/${requestId}`];
+		for (const candidate of candidates) {
+			const mod = await server.moduleGraph.getModuleByUrl(candidate) ?? server.moduleGraph.getModuleById(candidate);
+			requestIdHits.push({
+				requestId,
+				candidate,
+				via: mod?.url === candidate ? "url" : "id",
+				moduleId: mod?.id
+			});
+			if (mod?.id) modules.set(mod.id, mod);
+		}
+	}
+	debugHmrV("getModulesForChangedFile registry lookup", {
+		file: normalizedFile,
+		stylesheetRequestIds,
+		requestIdHits,
+		resolvedModuleIds: [...modules.keys()]
+	});
+	return [...modules.values()];
+}
+function isModuleForChangedResource(mod, changedFile, stylesheetRegistry) {
+	const normalizedChangedFile = normalizePath(changedFile.split("?")[0]);
+	if (normalizePath((mod.file ?? "").split("?")[0]) === normalizedChangedFile) return true;
+	if (!mod.id) return false;
+	const requestPath = getFilenameFromPath(mod.id);
+	return normalizePath((stylesheetRegistry?.resolveExternalSource(requestPath) ?? stylesheetRegistry?.resolveExternalSource(requestPath.replace(/^\//, "")) ?? "").split("?")[0]) === normalizedChangedFile;
+}
+function describeStylesheetContent(code) {
+	return {
+		length: code.length,
+		digest: createHash("sha256").update(code).digest("hex").slice(0, 12),
+		preview: code.replace(/\s+/g, " ").trim().slice(0, 160)
+	};
+}
+function safeStatMtimeMs(file) {
+	try {
+		return statSync(file).mtimeMs;
+	} catch {
+		return;
+	}
+}
+/**
+* Refreshes any already-served stylesheet records that map back to a changed
+* source file.
+*
+* This is the critical bridge for externalized Angular component styles during
+* HMR. Angular's resource watcher can notice that `/src/...component.css`
+* changed before Angular recompilation has had a chance to repopulate the
+* stylesheet registry. If we emit a CSS update against the existing virtual
+* stylesheet id without first refreshing the registry content, the browser gets
+* a hot update containing stale CSS. By rewriting the existing served records
+* from disk up front, HMR always pushes the latest source content.
+*/
+function refreshStylesheetRegistryForFile(file, stylesheetRegistry, stylePreprocessor) {
+	const normalizedFile = normalizePath(file.split("?")[0]);
+	if (!stylesheetRegistry || !existsSync(normalizedFile)) return;
+	const publicIds = stylesheetRegistry.getPublicIdsForSource(normalizedFile);
+	if (publicIds.length === 0) return;
+	const rawCss = readFileSync(normalizedFile, "utf-8");
+	const preprocessed = preprocessStylesheetResult(rawCss, normalizedFile, stylePreprocessor);
+	const servedCss = rewriteRelativeCssImports(preprocessed.code, normalizedFile);
+	for (const publicId of publicIds) stylesheetRegistry.registerServedStylesheet({
+		publicId,
+		sourcePath: normalizedFile,
+		originalCode: rawCss,
+		normalizedCode: servedCss,
+		dependencies: normalizeStylesheetDependencies(preprocessed.dependencies),
+		diagnostics: preprocessed.diagnostics,
+		tags: preprocessed.tags
+	}, [
+		normalizedFile,
+		normalizePath(normalizedFile),
+		basename(normalizedFile),
+		normalizedFile.replace(/^\//, "")
+	]);
+	debugStylesV("stylesheet registry refreshed from source file", {
+		file: normalizedFile,
+		publicIds,
+		dependencies: preprocessed.dependencies,
+		diagnostics: preprocessed.diagnostics,
+		tags: preprocessed.tags,
+		source: describeStylesheetContent(rawCss),
+		served: describeStylesheetContent(servedCss)
+	});
+}
+function diagnoseComponentStylesheetPipeline(changedFile, directModule, stylesheetRegistry, wrapperModules, stylePreprocessor) {
+	const normalizedFile = normalizePath(changedFile.split("?")[0]);
+	const sourceExists = existsSync(normalizedFile);
+	const sourceCode = sourceExists ? readFileSync(normalizedFile, "utf-8") : void 0;
+	const directRequestPath = directModule.id ? getFilenameFromPath(directModule.id) : void 0;
+	const sourcePath = directRequestPath ? stylesheetRegistry?.resolveExternalSource(directRequestPath) ?? stylesheetRegistry?.resolveExternalSource(directRequestPath.replace(/^\//, "")) : normalizedFile;
+	const registryCode = directRequestPath ? stylesheetRegistry?.getServedContent(directRequestPath) : void 0;
+	const trackedRequestIds = stylesheetRegistry?.getRequestIdsForSource(sourcePath ?? "") ?? [];
+	const dependencies = stylesheetRegistry?.getDependenciesForSource(sourcePath ?? "") ?? [];
+	const diagnostics = stylesheetRegistry?.getDiagnosticsForSource(sourcePath ?? "") ?? [];
+	const tags = stylesheetRegistry?.getTagsForSource(sourcePath ?? "") ?? [];
+	const anomalies = [];
+	const hints = [];
+	if (!sourceExists) {
+		anomalies.push("source_file_missing");
+		hints.push("The stylesheet watcher fired for a file that no longer exists on disk.");
+	}
+	if (!registryCode) {
+		anomalies.push("registry_content_missing");
+		hints.push("The stylesheet registry has no served content for the direct module request path.");
+	}
+	if (sourceCode && registryCode) {
+		let expectedRegistryCode = preprocessStylesheet(sourceCode, normalizedFile, stylePreprocessor);
+		expectedRegistryCode = rewriteRelativeCssImports(expectedRegistryCode, normalizedFile);
+		if (describeStylesheetContent(expectedRegistryCode).digest !== describeStylesheetContent(registryCode).digest) {
+			anomalies.push("source_registry_mismatch");
+			hints.push("The source file changed, but the served stylesheet content in the registry is still stale.");
+		}
+	}
+	if (trackedRequestIds.length === 0) {
+		anomalies.push("no_tracked_requests");
+		hints.push("No live stylesheet requests are tracked for this source file, so HMR has no browser-facing target.");
+	}
+	if (trackedRequestIds.some((id) => id.includes("?ngcomp=")) && wrapperModules.length === 0) {
+		anomalies.push("tracked_wrapper_missing_from_module_graph");
+		hints.push("A wrapper request id is known, but Vite did not expose a live wrapper module during this HMR pass.");
+	}
+	if (trackedRequestIds.every((id) => !id.includes("?ngcomp=")) && wrapperModules.length === 0) {
+		anomalies.push("wrapper_not_yet_tracked");
+		hints.push("Only direct stylesheet requests were tracked during this HMR pass; the wrapper request may be appearing too late.");
+	}
+	return {
+		file: changedFile,
+		sourcePath,
+		source: sourceCode ? describeStylesheetContent(rewriteRelativeCssImports(preprocessStylesheet(sourceCode, normalizedFile, stylePreprocessor), normalizedFile)) : void 0,
+		registry: registryCode ? describeStylesheetContent(registryCode) : void 0,
+		dependencies,
+		diagnostics,
+		tags,
+		directModuleId: directModule.id,
+		directModuleUrl: directModule.url,
+		trackedRequestIds,
+		wrapperCount: wrapperModules.length,
+		anomalies,
+		hints
+	};
+}
+async function findComponentStylesheetWrapperModules(server, changedFile, directModule, fileModules, stylesheetRegistry) {
+	const wrapperModules = /* @__PURE__ */ new Map();
+	for (const mod of fileModules) if (mod.id && mod.type === "js" && isComponentStyleSheet(mod.id) && isModuleForChangedResource(mod, changedFile, stylesheetRegistry)) wrapperModules.set(mod.id, mod);
+	const directRequestIds = /* @__PURE__ */ new Set();
+	if (directModule.id) directRequestIds.add(directModule.id);
+	if (directModule.url) directRequestIds.add(directModule.url);
+	const requestPath = directModule.id ? getFilenameFromPath(directModule.id) : void 0;
+	const sourcePath = requestPath ? stylesheetRegistry?.resolveExternalSource(requestPath) ?? stylesheetRegistry?.resolveExternalSource(requestPath.replace(/^\//, "")) : void 0;
+	for (const requestId of stylesheetRegistry?.getRequestIdsForSource(sourcePath ?? "") ?? []) if (requestId.includes("?ngcomp=")) directRequestIds.add(requestId);
+	const candidateWrapperIds = [...directRequestIds].filter((id) => id.includes("?direct&ngcomp=")).map((id) => id.replace("?direct&ngcomp=", "?ngcomp="));
+	const lookupHits = [];
+	for (const candidate of candidateWrapperIds) {
+		const mod = await server.moduleGraph.getModuleByUrl(candidate) ?? server.moduleGraph.getModuleById(candidate);
+		lookupHits.push({
+			candidate,
+			via: mod?.url === candidate ? "url" : mod ? "id" : void 0,
+			moduleId: mod?.id,
+			moduleType: mod?.type
+		});
+		if (mod?.id && mod.type === "js" && isComponentStyleSheet(mod.id) && isModuleForChangedResource(mod, changedFile, stylesheetRegistry)) wrapperModules.set(mod.id, mod);
+	}
+	debugHmrV("component stylesheet wrapper lookup", {
+		file: changedFile,
+		sourcePath,
+		directModuleId: directModule.id,
+		directModuleUrl: directModule.url,
+		candidateWrapperIds,
+		lookupHits
+	});
+	if (wrapperModules.size === 0) debugHmrV("component stylesheet wrapper lookup empty", {
+		file: changedFile,
+		sourcePath,
+		directModuleId: directModule.id,
+		directModuleUrl: directModule.url,
+		candidateWrapperIds
+	});
+	return [...wrapperModules.values()];
+}
 function sendHMRComponentUpdate(server, id) {
+	debugHmrV("ws send: angular component update", {
+		id,
+		timestamp: Date.now()
+	});
 	server.ws.send("angular:component-update", {
 		id: encodeURIComponent(id),
 		timestamp: Date.now()
 	});
 	classNames.delete(id);
 }
-function getFileMetadata(program, angularCompiler, liveReload, disableTypeChecking) {
+function sendCssUpdate(server, update) {
+	const timestamp = Date.now();
+	debugHmrV("ws send: css-update", {
+		...update,
+		timestamp
+	});
+	server.ws.send({
+		type: "update",
+		updates: [{
+			type: "css-update",
+			timestamp,
+			path: update.path,
+			acceptedPath: update.acceptedPath
+		}]
+	});
+}
+function sendFullReload(server, details) {
+	debugHmrV("ws send: full-reload", details);
+	server.ws.send("analog:debug-full-reload", details);
+	server.ws.send({ type: "full-reload" });
+}
+function resolveComponentClassNamesForStyleOwner(ownerFile, sourcePath) {
+	if (!existsSync(ownerFile)) return [];
+	const components = getAngularComponentMetadata(readFileSync(ownerFile, "utf-8"));
+	const normalizedSourcePath = normalizePath(sourcePath);
+	return components.filter((component) => component.styleUrls.some((styleUrl) => normalizePath(resolve(dirname(ownerFile), styleUrl)) === normalizedSourcePath)).map((component) => component.className);
+}
+function findStaticClassAndBoundClassConflicts(template) {
+	const issues = [];
+	for (const { index, snippet } of findOpeningTagSnippets(template)) {
+		if (!snippet.includes("[class]")) continue;
+		const hasStaticClass = /\sclass\s*=\s*(['"])(?:(?!\1)[\s\S])*\1/.test(snippet);
+		const hasBoundClass = /\s\[class\]\s*=\s*(['"])(?:(?!\1)[\s\S])*\1/.test(snippet);
+		if (hasStaticClass && hasBoundClass) {
+			const prefix = template.slice(0, index);
+			const line = prefix.split("\n").length;
+			const column = index - prefix.lastIndexOf("\n");
+			issues.push({
+				line,
+				column,
+				snippet: snippet.replace(/\s+/g, " ").trim()
+			});
+		}
+	}
+	return issues;
+}
+function throwTemplateClassBindingConflict(id, issue) {
+	throw new Error([
+		"[Analog Angular] Invalid template class binding.",
+		`File: ${id}:${issue.line}:${issue.column}`,
+		"The same element uses both a static `class=\"...\"` attribute and a whole-element `[class]=\"...\"` binding.",
+		"That pattern can replace or conflict with static Tailwind classes, which makes styles appear to stop applying.",
+		"Use `[ngClass]` or explicit `[class.foo]` bindings instead of `[class]` when the element also has static classes.",
+		`Snippet: ${issue.snippet}`
+	].join("\n"));
+}
+function findBoundClassAndNgClassConflicts(template) {
+	const issues = [];
+	if (!/\[class\]\s*=/.test(template) || !template.includes("[ngClass]")) return issues;
+	for (const { index, snippet } of findOpeningTagSnippets(template)) {
+		if (!/\[class\]\s*=/.test(snippet) || !snippet.includes("[ngClass]")) continue;
+		const prefix = template.slice(0, index);
+		const line = prefix.split("\n").length;
+		const column = index - prefix.lastIndexOf("\n");
+		issues.push({
+			line,
+			column,
+			snippet: snippet.replace(/\s+/g, " ").trim()
+		});
+	}
+	return issues;
+}
+function findOpeningTagSnippets(template) {
+	const matches = [];
+	for (let index = 0; index < template.length; index++) {
+		if (template[index] !== "<") continue;
+		const tagStart = template[index + 1];
+		if (!tagStart || !/[a-zA-Z]/.test(tagStart)) continue;
+		let quote = null;
+		for (let end = index + 1; end < template.length; end++) {
+			const char = template[end];
+			if (quote) {
+				if (char === quote) quote = null;
+				continue;
+			}
+			if (char === "\"" || char === "'") {
+				quote = char;
+				continue;
+			}
+			if (char === ">") {
+				matches.push({
+					index,
+					snippet: template.slice(index, end + 1)
+				});
+				index = end;
+				break;
+			}
+		}
+	}
+	return matches;
+}
+function formatActiveGraphLocations(entries) {
+	return [...entries].sort().map((entry) => `- ${entry}`).join("\n");
+}
+function logComponentStylesheetHmrOutcome(details) {
+	const pitfalls = [];
+	const rejectedPreferredPaths = [];
+	const hints = [];
+	if (details.encapsulation === "shadow") {
+		pitfalls.push("shadow-encapsulation");
+		rejectedPreferredPaths.push("css-update");
+		rejectedPreferredPaths.push("owner-component-update");
+		hints.push("Shadow DOM styles cannot rely on Vite CSS patching because Angular applies them inside a shadow root.");
+	}
+	if (details.diagnosis.anomalies.includes("wrapper_not_yet_tracked")) {
+		pitfalls.push("wrapper-not-yet-tracked");
+		rejectedPreferredPaths.push("css-update");
+		hints.push("The direct stylesheet module exists, but the browser-visible Angular wrapper module was not available in the live graph during this HMR pass.");
+	}
+	if (details.diagnosis.anomalies.includes("tracked_wrapper_missing_from_module_graph")) {
+		pitfalls.push("tracked-wrapper-missing-from-module-graph");
+		rejectedPreferredPaths.push("css-update");
+		hints.push("A wrapper request id is known, but Vite could not resolve a live wrapper module for targeted CSS HMR.");
+	}
+	if ((details.ownerIds?.filter(Boolean).length ?? 0) === 0) {
+		pitfalls.push("no-owner-modules");
+		if (details.outcome === "full-reload") {
+			rejectedPreferredPaths.push("owner-component-update");
+			hints.push("No owning TS component modules were available in the module graph for owner-based fallback.");
+		}
+	} else if ((details.updateIds?.length ?? 0) === 0) {
+		pitfalls.push("owner-modules-without-class-identities");
+		if (details.outcome === "full-reload") {
+			rejectedPreferredPaths.push("owner-component-update");
+			hints.push("Owner modules were found, but Angular did not expose component class identities after recompilation, so no targeted component update could be sent.");
+		}
+	}
+	debugHmrV("component stylesheet hmr outcome", {
+		file: details.file,
+		outcome: details.outcome,
+		encapsulation: details.encapsulation,
+		directModuleId: details.directModuleId,
+		wrapperIds: details.wrapperIds ?? [],
+		ownerIds: details.ownerIds ?? [],
+		updateIds: details.updateIds ?? [],
+		preferredPath: details.encapsulation === "shadow" ? "full-reload" : "css-update",
+		rejectedPreferredPaths: [...new Set(rejectedPreferredPaths)],
+		pitfalls: [...new Set(pitfalls)],
+		anomalies: details.diagnosis.anomalies,
+		hints: [...new Set([...details.diagnosis.hints, ...hints])]
+	});
+}
+function findTemplateOwnerModules(server, resourceFile) {
+	const candidateTsFiles = [normalizePath(resourceFile.split("?")[0]).replace(/\.(html|htm)$/i, ".ts")];
+	const modules = /* @__PURE__ */ new Map();
+	for (const candidate of candidateTsFiles) server.moduleGraph.getModulesByFile(candidate)?.forEach((mod) => {
+		if (mod.id) modules.set(mod.id, mod);
+	});
+	return [...modules.values()];
+}
+function findStyleOwnerModules(server, resourceFile, styleSourceOwners) {
+	const normalizedResourceFile = normalizePath(resourceFile.split("?")[0]);
+	const candidateOwnerFiles = [...styleSourceOwners.get(normalizedResourceFile) ?? []];
+	const modules = /* @__PURE__ */ new Map();
+	for (const ownerFile of candidateOwnerFiles) server.moduleGraph.getModulesByFile(ownerFile)?.forEach((mod) => {
+		if (mod.id) modules.set(mod.id, mod);
+	});
+	return [...modules.values()];
+}
+function getFileMetadata(program, angularCompiler, hmrEnabled, disableTypeChecking) {
 	const ts = require("typescript");
 	return (file) => {
 		const sourceFile = program.getSourceFile(file);
@@ -867,7 +1854,7 @@ function getFileMetadata(program, angularCompiler, liveReload, disableTypeChecki
 		const warnings = diagnostics.filter((d) => d.category === ts.DiagnosticCategory?.Warning).map((d) => d.messageText);
 		let hmrUpdateCode = void 0;
 		let hmrEligible = false;
-		if (liveReload) {
+		if (hmrEnabled) {
 			for (const node of sourceFile.statements) if (ts.isClassDeclaration(node) && node.name != null) {
 				hmrUpdateCode = angularCompiler?.emitHmrUpdateModule(node);
 				if (hmrUpdateCode) {
@@ -927,7 +1914,12 @@ function getComponentStyleSheetMeta(id) {
 * @param id
 */
 function getFilenameFromPath(id) {
-	return new URL(id, "http://localhost").pathname.replace(/^\//, "");
+	try {
+		return new URL(id, "http://localhost").pathname.replace(/^\//, "");
+	} catch {
+		const queryIndex = id.indexOf("?");
+		return (queryIndex >= 0 ? id.slice(0, queryIndex) : id).replace(/^\//, "");
+	}
 }
 /**
 * Checks for vitest run from the command line