@analogjs/vite-plugin-angular 3.0.0-alpha.33 → 3.0.0-alpha.35

package/README.md

@@ -89,3 +89,9 @@ Create a `tsconfig.app.json` in the root of the project.
   "include": ["src/**/*.ts"]
 }
 ```
+
+## Tailwind CSS v4
+
+For Angular component styles that use Tailwind utilities like `@apply`, configure `tailwindCss.rootStylesheet` and follow the Tailwind guide for Analog:
+
+- https://analogjs.org/docs/integrations/tailwind

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@analogjs/vite-plugin-angular",
-  "version": "3.0.0-alpha.33",
+  "version": "3.0.0-alpha.35",
   "description": "Vite Plugin for Angular",
   "type": "module",
   "keywords": [
@@ -36,7 +36,7 @@
     }
   },
   "dependencies": {
-    "@analogjs/angular-compiler": "3.0.0-alpha.33",
+    "@analogjs/angular-compiler": "3.0.0-alpha.35",
     "es-toolkit": "^1.45.1",
     "obug": "^2.1.1",
     "oxc-parser": "^0.124.0",

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

@@ -1,4 +1,5 @@
 import { debugStyles } from "./utils/debug.js";
+import { isTailwindReferenceError } from "./utils/tailwind-reference.js";
 import { createHash } from "node:crypto";
 import { preprocessCSS } from "vite";
 //#region packages/vite-plugin-angular/src/lib/angular-jit-plugin.ts
@@ -21,6 +22,7 @@ function jitPlugin({ inlineStylesExtension }) {
 				try {
 					styles = (await preprocessCSS(decodedStyles, `${styleIdHash}.${inlineStylesExtension}?direct`, config))?.code;
 				} catch (e) {
+					if (isTailwindReferenceError(e)) throw e;
 					const errorMessage = e instanceof Error ? e.message : String(e);
 					debugStyles("jit css compilation error", {
 						styleIdHash,

package/src/lib/angular-jit-plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"angular-jit-plugin.js","names":[],"sources":["../../../src/lib/angular-jit-plugin.ts"],"sourcesContent":["import { createHash } from 'node:crypto';\nimport { Plugin, ResolvedConfig, preprocessCSS } from 'vite';\nimport { debugStyles } from './utils/debug.js';\n\nexport function jitPlugin({\n  inlineStylesExtension,\n}: {\n  inlineStylesExtension: string;\n}): Plugin {\n  let config: ResolvedConfig;\n\n  return {\n    name: '@analogjs/vite-plugin-angular-jit',\n    configResolved(_config) {\n      config = _config;\n    },\n    resolveId(id: string) {\n      if (id.startsWith('virtual:angular')) {\n        return `\\0${id}`;\n      }\n\n      return;\n    },\n    async load(id: string) {\n      if (id.includes('virtual:angular:jit:style:inline;')) {\n        const styleId = id.split('style:inline;')[1];\n        // styleId may exceed 255 bytes of base64-encoded content, limit to 16\n        const styleIdHash = createHash('sha256')\n          .update(styleId)\n          .digest('hex')\n          .slice(0, 16);\n\n        const decodedStyles = Buffer.from(\n          decodeURIComponent(styleId),\n          'base64',\n        ).toString();\n\n        let styles: string | undefined = '';\n\n        try {\n          const compiled = await preprocessCSS(\n            decodedStyles,\n            `${styleIdHash}.${inlineStylesExtension}?direct`,\n            config,\n          );\n          styles = compiled?.code;\n        } catch (e) {\n          const errorMessage = e instanceof Error ? e.message : String(e);\n          debugStyles('jit css compilation error', {\n            styleIdHash,\n            error: errorMessage,\n          });\n          console.warn(\n            '[@analogjs/vite-plugin-angular]: Failed to preprocess inline JIT stylesheet %s. Returning an empty stylesheet instead. %s',\n            styleIdHash,\n            errorMessage,\n          );\n        }\n\n        return `export default \\`${styles}\\``;\n      }\n\n      return;\n    },\n  };\n}\n"],"mappings":";;;;AAIA,SAAgB,UAAU,EACxB,yBAGS;CACT,IAAI;AAEJ,QAAO;EACL,MAAM;EACN,eAAe,SAAS;AACtB,YAAS;;EAEX,UAAU,IAAY;AACpB,OAAI,GAAG,WAAW,kBAAkB,CAClC,QAAO,KAAK;;EAKhB,MAAM,KAAK,IAAY;AACrB,OAAI,GAAG,SAAS,oCAAoC,EAAE;IACpD,MAAM,UAAU,GAAG,MAAM,gBAAgB,CAAC;IAE1C,MAAM,cAAc,WAAW,SAAS,CACrC,OAAO,QAAQ,CACf,OAAO,MAAM,CACb,MAAM,GAAG,GAAG;IAEf,MAAM,gBAAgB,OAAO,KAC3B,mBAAmB,QAAQ,EAC3B,SACD,CAAC,UAAU;IAEZ,IAAI,SAA6B;AAEjC,QAAI;AAMF,eALiB,MAAM,cACrB,eACA,GAAG,YAAY,GAAG,sBAAsB,UACxC,OACD,GACkB;aACZ,GAAG;KACV,MAAM,eAAe,aAAa,QAAQ,EAAE,UAAU,OAAO,EAAE;AAC/D,iBAAY,6BAA6B;MACvC;MACA,OAAO;MACR,CAAC;AACF,aAAQ,KACN,6HACA,aACA,aACD;;AAGH,WAAO,oBAAoB,OAAO;;;EAKvC"}
+{"version":3,"file":"angular-jit-plugin.js","names":[],"sources":["../../../src/lib/angular-jit-plugin.ts"],"sourcesContent":["import { createHash } from 'node:crypto';\nimport { Plugin, ResolvedConfig, preprocessCSS } from 'vite';\nimport { debugStyles } from './utils/debug.js';\nimport { isTailwindReferenceError } from './utils/tailwind-reference.js';\n\nexport function jitPlugin({\n  inlineStylesExtension,\n}: {\n  inlineStylesExtension: string;\n}): Plugin {\n  let config: ResolvedConfig;\n\n  return {\n    name: '@analogjs/vite-plugin-angular-jit',\n    configResolved(_config) {\n      config = _config;\n    },\n    resolveId(id: string) {\n      if (id.startsWith('virtual:angular')) {\n        return `\\0${id}`;\n      }\n\n      return;\n    },\n    async load(id: string) {\n      if (id.includes('virtual:angular:jit:style:inline;')) {\n        const styleId = id.split('style:inline;')[1];\n        // styleId may exceed 255 bytes of base64-encoded content, limit to 16\n        const styleIdHash = createHash('sha256')\n          .update(styleId)\n          .digest('hex')\n          .slice(0, 16);\n\n        const decodedStyles = Buffer.from(\n          decodeURIComponent(styleId),\n          'base64',\n        ).toString();\n\n        let styles: string | undefined = '';\n\n        try {\n          const compiled = await preprocessCSS(\n            decodedStyles,\n            `${styleIdHash}.${inlineStylesExtension}?direct`,\n            config,\n          );\n          styles = compiled?.code;\n        } catch (e) {\n          if (isTailwindReferenceError(e)) {\n            throw e;\n          }\n          const errorMessage = e instanceof Error ? e.message : String(e);\n          debugStyles('jit css compilation error', {\n            styleIdHash,\n            error: errorMessage,\n          });\n          console.warn(\n            '[@analogjs/vite-plugin-angular]: Failed to preprocess inline JIT stylesheet %s. Returning an empty stylesheet instead. %s',\n            styleIdHash,\n            errorMessage,\n          );\n        }\n\n        return `export default \\`${styles}\\``;\n      }\n\n      return;\n    },\n  };\n}\n"],"mappings":";;;;;AAKA,SAAgB,UAAU,EACxB,yBAGS;CACT,IAAI;AAEJ,QAAO;EACL,MAAM;EACN,eAAe,SAAS;AACtB,YAAS;;EAEX,UAAU,IAAY;AACpB,OAAI,GAAG,WAAW,kBAAkB,CAClC,QAAO,KAAK;;EAKhB,MAAM,KAAK,IAAY;AACrB,OAAI,GAAG,SAAS,oCAAoC,EAAE;IACpD,MAAM,UAAU,GAAG,MAAM,gBAAgB,CAAC;IAE1C,MAAM,cAAc,WAAW,SAAS,CACrC,OAAO,QAAQ,CACf,OAAO,MAAM,CACb,MAAM,GAAG,GAAG;IAEf,MAAM,gBAAgB,OAAO,KAC3B,mBAAmB,QAAQ,EAC3B,SACD,CAAC,UAAU;IAEZ,IAAI,SAA6B;AAEjC,QAAI;AAMF,eALiB,MAAM,cACrB,eACA,GAAG,YAAY,GAAG,sBAAsB,UACxC,OACD,GACkB;aACZ,GAAG;AACV,SAAI,yBAAyB,EAAE,CAC7B,OAAM;KAER,MAAM,eAAe,aAAa,QAAQ,EAAE,UAAU,OAAO,EAAE;AAC/D,iBAAY,6BAA6B;MACvC;MACA,OAAO;MACR,CAAC;AACF,aAAQ,KACN,6HACA,aACA,aACD;;AAGH,WAAO,oBAAoB,OAAO;;;EAKvC"}

package/src/lib/angular-vite-plugin.d.ts

@@ -32,14 +32,14 @@ export interface PluginOptions {
 	include?: string[];
 	additionalContentDirs?: string[];
 	/**
-	* Enables Angular's HMR during development/watch mode.
+	* Enables Analog's Angular live-reload/HMR pipeline during development/watch mode.
 	*
-	* Defaults to `true` for watch mode. Set to `false` to disable HMR while
-	* keeping other stylesheet externalization behavior available when needed.
-	*/
-	hmr?: boolean;
-	/**
-	* @deprecated Use `hmr` instead. Kept as a compatibility alias.
+	* This is separate from Vite's `server.hmr` option, which configures the
+	* HMR client transport.
+	*
+	* Defaults to `true` for watch mode. Set to `false` to disable Angular
+	* reload updates while keeping other stylesheet externalization behavior
+	* available when needed.
 	*/
 	liveReload?: boolean;
 	disableTypeChecking?: boolean;
@@ -160,6 +160,20 @@ export declare function evictDeletedFileMetadata(file: string, { removeActiveGra
 }): void;
 export declare function injectViteIgnoreForHmrMetadata(code: string): string;
 export declare function isIgnoredHmrFile(file: string): boolean;
+/**
+* Builds a resolved stylePreprocessor function from plugin options.
+*
+* 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.
+*/
+export declare function buildStylePreprocessor(options?: PluginOptions): StylePreprocessor | undefined;
 export declare function angular(options?: PluginOptions): Plugin[];
 export declare function createFsWatcherCacheInvalidator(invalidateFsCaches: () => void, invalidateTsconfigCaches: () => void, performCompilation: () => Promise<void>): () => Promise<void>;
 /**

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

@@ -2,6 +2,7 @@ import { angularFullVersion, cjt, createAngularCompilation, sourceFileCache } fr
 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 { inspectCssTailwindDirectives, isTailwindReferenceError, throwTailwindReferenceTextError } from "./utils/tailwind-reference.js";
 import { jitPlugin } from "./angular-jit-plugin.js";
 import { createCompilerPlugin, createRolldownCompilerPlugin } from "./compiler-plugin.js";
 import { StyleUrlsResolver, TemplateUrlsResolver, getAngularComponentMetadata } from "./component-resolvers.js";
@@ -89,14 +90,16 @@ function buildStylePreprocessor(options) {
 		});
 		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'")) {
+			const directiveState = inspectCssTailwindDirectives(code);
+			if (directiveState.hasReferenceDirective || directiveState.hasTailwindImportDirective) {
 				debugTailwindV("skip (already has @reference or is root)", { filename });
 				return code;
 			}
-			if (!(prefixes ? prefixes.some((prefix) => code.includes(prefix)) : code.includes("@apply"))) {
+			if (!(prefixes ? prefixes.some((prefix) => directiveState.commentlessCode.includes(prefix)) : directiveState.commentlessCode.includes("@apply"))) {
 				debugTailwindV("skip (no Tailwind usage detected)", { filename });
 				return code;
 			}
+			if (directiveState.hasReferenceText) throwTailwindReferenceTextError(filename, rootStylesheet);
 			debugTailwind("injected @reference via preprocessor", { filename });
 			return `@reference "${rootStylesheet}";\n${code}`;
 		};
@@ -110,6 +113,7 @@ function buildStylePreprocessor(options) {
 }
 function angular(options) {
 	applyDebugOption(options?.debug, options?.workspaceRoot);
+	const liveReload = options?.liveReload ?? true;
 	/**
 	* Normalize plugin options so defaults
 	* are used for values not provided.
@@ -127,7 +131,7 @@ function angular(options) {
 		jit: options?.jit,
 		include: options?.include ?? [],
 		additionalContentDirs: options?.additionalContentDirs ?? [],
-		hmr: options?.hmr ?? options?.liveReload ?? true,
+		liveReload,
 		disableTypeChecking: options?.disableTypeChecking ?? true,
 		fileReplacements: options?.fileReplacements ?? [],
 		useAngularCompilationAPI: options?.experimental?.useAngularCompilationAPI ?? false,
@@ -159,8 +163,11 @@ function angular(options) {
 	const classNameOwners = /* @__PURE__ */ new Map();
 	const transformedStyleOwnerMetadata = /* @__PURE__ */ new Map();
 	const styleSourceOwners = /* @__PURE__ */ new Map();
-	function shouldEnableHmr() {
-		return !!((isTest ? testWatchMode : watchMode) && pluginOptions.hmr);
+	function hasViteHmrTransport() {
+		return resolvedConfig ? resolvedConfig.server.hmr !== false : true;
+	}
+	function shouldEnableLiveReload() {
+		return !!((isTest ? testWatchMode : watchMode) && pluginOptions.liveReload && hasViteHmrTransport());
 	}
 	/**
 	* Determines whether Angular should externalize component styles.
@@ -180,7 +187,7 @@ function angular(options) {
 	*/
 	function shouldExternalizeStyles() {
 		if (!(isTest ? testWatchMode : watchMode)) return false;
-		return !!(shouldEnableHmr() || pluginOptions.hasTailwindCss);
+		return !!(shouldEnableLiveReload() || pluginOptions.hasTailwindCss);
 	}
 	/**
 	* Validates the Tailwind CSS integration configuration and emits actionable
@@ -203,8 +210,33 @@ function angular(options) {
 			}
 		}
 		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`);
+		/**
+		* Duplicate analog() registrations are a real bug for the non-SSR/client
+		* build because each plugin instance creates its own component-style state.
+		*
+		* That state includes the style maps/registries used to:
+		* - track transformed component styles
+		* - map owner components back to stylesheet requests
+		* - coordinate Tailwind/@reference processing and style reload behavior
+		*
+		* If two plugin instances are active for the same client build, one
+		* instance can record stylesheet metadata while the other services the
+		* request. The result is "missing" component CSS even though compilation
+		* appeared to succeed.
+		*
+		* SSR is different. Analog's Nitro/SSR build path reuses the already
+		* resolved plugin graph and then runs an additional `build.ssr === true`
+		* pass for the server bundle. In that flow Vite can expose multiple
+		* `@analogjs/vite-plugin-angular` entries in `config.plugins`, but that is
+		* not the same failure mode as a duplicated client build. The server build
+		* does not rely on the client-side style maps that this guard is protecting.
+		*
+		* Because of that, we only throw for duplicate registrations on non-SSR
+		* builds. Throwing during SSR would be a false positive that breaks valid
+		* Analog SSR/Nitro builds.
+		*/
 		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 (analogInstances.length > 1 && !config.build?.ssr) 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`);
@@ -306,16 +338,16 @@ function angular(options) {
 	let angularCompilation;
 	function angularPlugin() {
 		let isProd = false;
-		if (angularFullVersion < 19e4 && pluginOptions.hmr) {
+		if (angularFullVersion < 19e4 && pluginOptions.liveReload) {
 			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;
+			pluginOptions.liveReload = false;
 		}
 		if (isTest) {
-			pluginOptions.hmr = false;
+			pluginOptions.liveReload = false;
 			debugHmr("hmr disabled", {
 				angularVersion: angularFullVersion,
 				isTest
@@ -428,7 +460,7 @@ function angular(options) {
 					});
 					pendingCompilation = performCompilation(resolvedConfig, [fileId]);
 					let result;
-					if (shouldEnableHmr()) {
+					if (shouldEnableLiveReload()) {
 						await pendingCompilation;
 						pendingCompilation = null;
 						result = fileEmitter(fileId);
@@ -450,7 +482,7 @@ function angular(options) {
 							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 (shouldEnableHmr() && result?.hmrEligible && classNames.get(fileId)) {
+					if (shouldEnableLiveReload() && 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", {
@@ -631,7 +663,7 @@ function angular(options) {
 						}
 						return fileModules;
 					}
-					if (shouldEnableHmr() && /\.(html|htm)$/.test(ctx.file) && fileModules.length === 0) {
+					if (shouldEnableLiveReload() && /\.(html|htm)$/.test(ctx.file) && fileModules.length === 0) {
 						const ownerModules = findTemplateOwnerModules(ctx.server, ctx.file);
 						debugHmrV("template owner lookup", {
 							file: ctx.file,
@@ -857,6 +889,7 @@ function angular(options) {
 					}
 					const typescriptResult = fileEmitter(id);
 					if (!typescriptResult) {
+						debugCompilerV("transform skip (file not emitted by Angular)", { id });
 						if (!id.includes("@ng/component") && /(Component|Directive|Pipe|Injectable|NgModule)\(/.test(code)) this.warn(`[@analogjs/vite-plugin-angular]: "${id}" contains Angular decorators but is not in the TypeScript program. Ensure it is included in your tsconfig.`);
 						return;
 					}
@@ -1002,18 +1035,21 @@ function angular(options) {
 				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 directiveState = inspectCssTailwindDirectives(code);
+				if (directiveState.hasReferenceDirective || directiveState.hasTailwindImportDirective) return;
 				const rootBasename = basename(tw.rootStylesheet);
-				if (code.includes(rootBasename)) return;
+				if (directiveState.commentlessCode.includes(rootBasename)) return;
 				const prefixes = tw.prefixes;
-				if (prefixes ? prefixes.some((p) => code.includes(p)) : code.includes("@apply")) {
+				const needsRef = prefixes ? prefixes.some((p) => directiveState.commentlessCode.includes(p)) : directiveState.commentlessCode.includes("@apply");
+				if (needsRef && directiveState.hasReferenceText) throwTailwindReferenceTextError(id, tw.rootStylesheet);
+				if (needsRef) {
 					debugTailwind("injected @reference via pre-transform", { id: id.split("/").slice(-2).join("/") });
 					return `@reference "${tw.rootStylesheet}";\n${code}`;
 				}
 			}
 		},
 		angularPlugin(),
-		pluginOptions.hmr && liveReloadPlugin({
+		pluginOptions.liveReload && liveReloadPlugin({
 			classNames,
 			fileEmitter
 		}),
@@ -1033,6 +1069,74 @@ function angular(options) {
 			absolute: true
 		});
 	}
+	function ensureIncludeCache() {
+		if (pluginOptions.include.length > 0 && includeCache.length === 0) includeCache = findIncludes();
+		return includeCache;
+	}
+	function getTsconfigCacheKey(resolvedTsConfigPath, config) {
+		return [
+			resolvedTsConfigPath,
+			config.mode === "production" ? "prod" : "dev",
+			isTest ? "test" : "app",
+			config.build?.lib ? "lib" : "nolib",
+			pluginOptions.hmr ? "hmr" : "nohmr",
+			pluginOptions.hasTailwindCss ? "tw" : "notw"
+		].join("|");
+	}
+	function getCachedTsconfigOptions(resolvedTsConfigPath, config) {
+		const isProd = config.mode === "production";
+		const tsconfigKey = getTsconfigCacheKey(resolvedTsConfigPath, config);
+		let cached = tsconfigOptionsCache.get(tsconfigKey);
+		if (!cached) {
+			const read = compilerCli.readConfiguration(resolvedTsConfigPath, {
+				suppressOutputPathCheck: true,
+				outDir: void 0,
+				sourceMap: false,
+				inlineSourceMap: !isProd,
+				inlineSources: !isProd,
+				declaration: false,
+				declarationMap: false,
+				allowEmptyCodegenFiles: false,
+				annotationsAs: "decorators",
+				enableResourceInlining: false,
+				noEmitOnError: false,
+				mapRoot: void 0,
+				sourceRoot: void 0,
+				supportTestBed: false,
+				supportJitMode: false
+			});
+			cached = {
+				options: read.options,
+				rootNames: read.rootNames
+			};
+			tsconfigOptionsCache.set(tsconfigKey, cached);
+		}
+		return cached;
+	}
+	function resolveCompilationApiTsConfigPath(resolvedTsConfigPath, config) {
+		const includedFiles = ensureIncludeCache();
+		if (includedFiles.length === 0) return resolvedTsConfigPath;
+		const cached = getCachedTsconfigOptions(resolvedTsConfigPath, config);
+		const mergedRootNames = union(cached.rootNames, includedFiles).map((file) => normalizePath(file));
+		if (mergedRootNames.length === cached.rootNames.length) return resolvedTsConfigPath;
+		const wrapperDir = join(isAbsolute(config.cacheDir) ? config.cacheDir : resolve(config.root, config.cacheDir), "analog-angular", "compilation-api");
+		const rawTsconfig = ts.readConfigFile(resolvedTsConfigPath, ts.sys.readFile).config ?? {};
+		const wrapperPayload = {
+			extends: normalizePath(resolvedTsConfigPath),
+			files: [...mergedRootNames].sort(),
+			...rawTsconfig.references ? { references: rawTsconfig.references } : {}
+		};
+		const wrapperPath = join(wrapperDir, `tsconfig.includes.${createHash("sha1").update(JSON.stringify(wrapperPayload)).digest("hex").slice(0, 12)}.json`);
+		mkdirSync(wrapperDir, { recursive: true });
+		if (!existsSync(wrapperPath)) writeFileSync(wrapperPath, `${JSON.stringify(wrapperPayload, null, 2)}\n`, "utf-8");
+		debugCompilationApi("generated include wrapper tsconfig", {
+			originalTsconfig: resolvedTsConfigPath,
+			wrapperTsconfig: wrapperPath,
+			includeCount: includedFiles.length,
+			rootNameCount: mergedRootNames.length
+		});
+		return wrapperPath;
+	}
 	function resolveTsConfigPath() {
 		const tsconfigValue = pluginOptions.tsconfigGetter();
 		return getTsConfigPath(tsConfigResolutionContext.root, tsconfigValue, tsConfigResolutionContext.isProd, isTest, tsConfigResolutionContext.isLib);
@@ -1060,8 +1164,8 @@ function angular(options) {
 			debugCompilationApi("incremental update", { files: [...modifiedFiles] });
 			await angularCompilation.update(modifiedFiles);
 		}
-		const resolvedTsConfigPath = resolveTsConfigPath();
-		const compilationResult = await angularCompilation.initialize(resolvedTsConfigPath, {
+		const compilationApiTsConfigPath = resolveCompilationApiTsConfigPath(resolveTsConfigPath(), config);
+		const compilationResult = await angularCompilation.initialize(compilationApiTsConfigPath, {
 			fileReplacements: toAngularCompilationFileReplacements(pluginOptions.fileReplacements, pluginOptions.workspaceRoot),
 			modifiedFiles,
 			async transformStylesheet(data, containingFile, resourceFile, order, className) {
@@ -1074,7 +1178,7 @@ function angular(options) {
 					order,
 					inline: !resourceFile
 				});
-				if (shouldEnableHmr() && className && containingFile) classNames.set(normalizePath(containingFile), className);
+				if (shouldEnableLiveReload() && className && containingFile) classNames.set(normalizePath(containingFile), className);
 				if (shouldExternalizeStyles()) {
 					const stylesheetId = registerStylesheetContent(stylesheetRegistry, {
 						code: preprocessed.code,
@@ -1111,6 +1215,7 @@ function angular(options) {
 				try {
 					stylesheetResult = await preprocessCSS(preprocessed.code, `${filename}?direct`, resolvedConfig);
 				} catch (e) {
+					if (isTailwindReferenceError(e)) throw e;
 					debugStyles("preprocessCSS error", {
 						filename,
 						resourceFile: resourceFile ?? "(inline)",
@@ -1124,12 +1229,13 @@ function angular(options) {
 			}
 		}, (tsCompilerOptions) => {
 			if (shouldExternalizeStyles()) tsCompilerOptions["externalRuntimeStyles"] = true;
-			if (shouldEnableHmr()) {
+			if (shouldEnableLiveReload()) {
 				tsCompilerOptions["_enableHmr"] = true;
 				tsCompilerOptions["supportTestBed"] = true;
 			}
 			debugCompiler("tsCompilerOptions (compilation API)", {
-				hmr: pluginOptions.hmr,
+				liveReload: pluginOptions.liveReload,
+				viteHmr: hasViteHmrTransport(),
 				hasTailwindCss: pluginOptions.hasTailwindCss,
 				watchMode,
 				shouldExternalize: shouldExternalizeStyles(),
@@ -1281,50 +1387,17 @@ function angular(options) {
 		const modifiedFiles = new Set(ids ?? []);
 		sourceFileCache$1.invalidate(modifiedFiles);
 		if (ids?.length) for (const id of ids || []) fileTransformMap.delete(id);
-		if (pluginOptions.include.length > 0 && includeCache.length === 0) includeCache = findIncludes();
-		const resolvedTsConfigPath = resolveTsConfigPath();
-		const tsconfigKey = [
-			resolvedTsConfigPath,
-			isProd ? "prod" : "dev",
-			isTest ? "test" : "app",
-			config.build?.lib ? "lib" : "nolib",
-			pluginOptions.hmr ? "hmr" : "nohmr",
-			pluginOptions.hasTailwindCss ? "tw" : "notw"
-		].join("|");
-		let cached = tsconfigOptionsCache.get(tsconfigKey);
-		if (!cached) {
-			const read = compilerCli.readConfiguration(resolvedTsConfigPath, {
-				suppressOutputPathCheck: true,
-				outDir: void 0,
-				sourceMap: false,
-				inlineSourceMap: !isProd,
-				inlineSources: !isProd,
-				declaration: false,
-				declarationMap: false,
-				allowEmptyCodegenFiles: false,
-				annotationsAs: "decorators",
-				enableResourceInlining: false,
-				noEmitOnError: false,
-				mapRoot: void 0,
-				sourceRoot: void 0,
-				supportTestBed: false,
-				supportJitMode: false
-			});
-			cached = {
-				options: read.options,
-				rootNames: read.rootNames
-			};
-			tsconfigOptionsCache.set(tsconfigKey, cached);
-		}
+		const cached = getCachedTsconfigOptions(resolveTsConfigPath(), config);
 		const tsCompilerOptions = { ...cached.options };
 		let rootNames = [...cached.rootNames];
 		if (shouldExternalizeStyles()) tsCompilerOptions["externalRuntimeStyles"] = true;
-		if (shouldEnableHmr()) {
+		if (shouldEnableLiveReload()) {
 			tsCompilerOptions["_enableHmr"] = true;
 			tsCompilerOptions["supportTestBed"] = true;
 		}
 		debugCompiler("tsCompilerOptions (NgtscProgram path)", {
-			hmr: pluginOptions.hmr,
+			liveReload: pluginOptions.liveReload,
+			viteHmr: hasViteHmrTransport(),
 			shouldExternalize: shouldExternalizeStyles(),
 			externalRuntimeStyles: !!tsCompilerOptions["externalRuntimeStyles"],
 			hmrEnabled: !!tsCompilerOptions["_enableHmr"]
@@ -1341,7 +1414,7 @@ function angular(options) {
 		}
 		if (isTest) tsCompilerOptions["supportTestBed"] = true;
 		const replacements = pluginOptions.fileReplacements.map((rp) => join(pluginOptions.workspaceRoot, rp.ssr || rp.with));
-		rootNames = union(rootNames, includeCache, replacements);
+		rootNames = union(rootNames, ensureIncludeCache(), replacements);
 		const hostKey = JSON.stringify(tsCompilerOptions);
 		let host;
 		if (cachedHost && cachedHostKey === hostKey) host = cachedHost;
@@ -1394,7 +1467,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.hmr, pluginOptions.disableTypeChecking);
+		const fileMetadata = getFileMetadata(builder, angularCompiler, pluginOptions.liveReload, pluginOptions.disableTypeChecking);
 		const writeFileCallback = (_filename, content, _a, _b, sourceFiles) => {
 			if (!sourceFiles?.length) return;
 			const filename = normalizePath(sourceFiles[0].fileName);