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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@analogjs/vite-plugin-angular",
-  "version": "3.0.0-alpha.33",
+  "version": "3.0.0-alpha.34",
   "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.34",
     "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

@@ -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}`;
 		};
@@ -203,8 +206,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`);
@@ -857,6 +885,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,11 +1031,14 @@ 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}`;
 				}
@@ -1033,6 +1065,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 +1160,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) {
@@ -1111,6 +1211,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)",
@@ -1281,41 +1382,7 @@ 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;
@@ -1341,7 +1408,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;