@analogjs/vite-plugin-angular 3.0.0-alpha.51 → 3.0.0-alpha.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@analogjs/vite-plugin-angular",
-  "version": "3.0.0-alpha.51",
+  "version": "3.0.0-alpha.53",
   "description": "Vite Plugin for Angular",
   "type": "module",
   "keywords": [

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

@@ -22,6 +22,7 @@ import { buildStylePreprocessor, tailwindReferencePlugin, validateTailwindConfig
 import { encapsulationPlugin, getComponentStyleSheetMeta, isComponentStyleSheet } from "./encapsulation-plugin.js";
 import { virtualModulesPlugin } from "./virtual-modules-plugin.js";
 import { angularVitestPlugins } from "./angular-vitest-plugin.js";
+import { cssExtensionStyleResolverPlugin } from "./utils/css-extension-resolver.js";
 import { pendingTasksPlugin } from "./angular-pending-tasks.plugin.js";
 import { liveReloadPlugin } from "./live-reload-plugin.js";
 import { nxFolderPlugin } from "./nx-folder-plugin.js";
@@ -32,7 +33,7 @@ import { existsSync, mkdirSync, readFileSync, 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 { defaultClientConditions, normalizePath, preprocessCSS } from "vite";
+import { normalizePath, preprocessCSS } from "vite";
 //#region packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts
 var require = createRequire(import.meta.url);
 var classNames = /* @__PURE__ */ new Map();
@@ -255,8 +256,7 @@ function angular(options) {
 						],
 						exclude: ["@angular/platform-server"],
 						...useRolldown ? { rolldownOptions } : { esbuildOptions }
-					},
-					resolve: { conditions: ["style", ...config.resolve?.conditions || defaultClientConditions] }
+					}
 				};
 			},
 			configResolved(config) {
@@ -587,6 +587,15 @@ function angular(options) {
 				}
 				if (isComponentStyleSheet(id)) {
 					const filename = getFilenameFromPath(id);
+					const search = new URL(id, "http://localhost").search;
+					const servedSourcePath = stylesheetRegistry?.getServedSourcePath(filename);
+					if (servedSourcePath) {
+						debugStylesV("resolveId: mapped served stylesheet to source", {
+							filename,
+							resolvedPath: servedSourcePath
+						});
+						return servedSourcePath + search;
+					}
 					if (stylesheetRegistry?.hasServed(filename)) {
 						debugStylesV("resolveId: kept preprocessed ID", { filename });
 						return id;
@@ -618,8 +627,8 @@ function angular(options) {
 						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(/^\//, "")) ?? "") ?? []
+							sourcePath: stylesheetRegistry?.resolveExternalSource(filename) ?? stylesheetRegistry?.resolveExternalSource(filename.replace(/^\//, "")) ?? stylesheetRegistry?.getServedSourcePath(filename) ?? stylesheetRegistry?.getServedSourcePath(filename.replace(/^\//, "")),
+							trackedRequestIds: stylesheetRegistry?.getRequestIdsForSource(stylesheetRegistry?.resolveExternalSource(filename) ?? stylesheetRegistry?.resolveExternalSource(filename.replace(/^\//, "")) ?? stylesheetRegistry?.getServedSourcePath(filename) ?? stylesheetRegistry?.getServedSourcePath(filename.replace(/^\//, "")) ?? "") ?? []
 						});
 						debugStylesV("load: served inline component stylesheet", {
 							filename,
@@ -777,6 +786,7 @@ function angular(options) {
 		fastCompileMode: pluginOptions.fastCompileMode
 	}) : angularPlugin();
 	return [
+		cssExtensionStyleResolverPlugin(),
 		replaceFiles(pluginOptions.fileReplacements, pluginOptions.workspaceRoot),
 		virtualModulesPlugin({ jit }),
 		templateClassBindingGuardPlugin(guardContext),
@@ -973,14 +983,14 @@ function isModuleForChangedResource(mod, changedFile, stylesheetRegistry) {
 	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;
+	return normalizePath((stylesheetRegistry?.resolveExternalSource(requestPath) ?? stylesheetRegistry?.resolveExternalSource(requestPath.replace(/^\//, "")) ?? stylesheetRegistry?.getServedSourcePath(requestPath) ?? stylesheetRegistry?.getServedSourcePath(requestPath.replace(/^\//, "")) ?? "").split("?")[0]) === normalizedChangedFile;
 }
 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 sourcePath = directRequestPath ? stylesheetRegistry?.resolveExternalSource(directRequestPath) ?? stylesheetRegistry?.resolveExternalSource(directRequestPath.replace(/^\//, "")) ?? stylesheetRegistry?.getServedSourcePath(directRequestPath) ?? stylesheetRegistry?.getServedSourcePath(directRequestPath.replace(/^\//, "")) : normalizedFile;
 	const registryCode = directRequestPath ? stylesheetRegistry?.getServedContent(directRequestPath) : void 0;
 	const trackedRequestIds = stylesheetRegistry?.getRequestIdsForSource(sourcePath ?? "") ?? [];
 	const dependencies = stylesheetRegistry?.getDependenciesForSource(sourcePath ?? "") ?? [];
@@ -1039,7 +1049,7 @@ async function findComponentStylesheetWrapperModules(server, changedFile, direct
 	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;
+	const sourcePath = requestPath ? stylesheetRegistry?.resolveExternalSource(requestPath) ?? stylesheetRegistry?.resolveExternalSource(requestPath.replace(/^\//, "")) ?? stylesheetRegistry?.getServedSourcePath(requestPath) ?? stylesheetRegistry?.getServedSourcePath(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 = [];