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

package/package.json

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

package/src/index.d.ts

@@ -1,4 +1,3 @@
 import { angular } from "./lib/angular-vite-plugin.js";
 export type { PluginOptions } from "./lib/angular-vite-plugin.js";
-export type { StylePreprocessor } from "./lib/style-preprocessor.js";
 export default angular;

package/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { angular } from './lib/angular-vite-plugin.js';\nexport type { PluginOptions } from './lib/angular-vite-plugin.js';\nexport type { StylePreprocessor } from './lib/style-preprocessor.js';\n\nexport default angular;\n"],"mappings":";;AAIA,IAAA,cAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { angular } from './lib/angular-vite-plugin.js';\nexport type { PluginOptions } from './lib/angular-vite-plugin.js';\n\nexport default angular;\n"],"mappings":";;AAGA,IAAA,cAAe"}

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

@@ -5,6 +5,7 @@ import type { StylePreprocessor } from "./style-preprocessor.js";
 import { type DebugOption } from "./utils/debug.js";
 import { FileReplacement } from "./plugins/file-replacements.plugin.js";
 import { AnalogStylesheetRegistry } from "./stylesheet-registry.js";
+import { type AngularStylePipelineOptions } from "./style-pipeline.js";
 export declare enum DiagnosticModes {
 	None = 0,
 	Option = 1,
@@ -69,6 +70,14 @@ export interface PluginOptions {
 	*/
 	stylePreprocessor?: StylePreprocessor;
 	/**
+	* Experimental Angular stylesheet-resource hooks for community-maintained
+	* style-pipeline plugins.
+	*
+	* These hooks run inside the Angular resource pipeline, which is the seam a
+	* standalone Vite plugin cannot own on its own.
+	*/
+	stylePipeline?: AngularStylePipelineOptions;
+	/**
 	* First-class Tailwind CSS v4 integration for Angular component styles.
 	*
 	* Angular's compiler processes component CSS through Vite's `preprocessCSS()`,

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

@@ -5,7 +5,8 @@ import { activateDeferredDebug, applyDebugOption, debugCompilationApi, debugComp
 import { jitPlugin } from "./angular-jit-plugin.js";
 import { createCompilerPlugin, createRolldownCompilerPlugin } from "./compiler-plugin.js";
 import { StyleUrlsResolver, TemplateUrlsResolver, getAngularComponentMetadata } from "./component-resolvers.js";
-import { AnalogStylesheetRegistry, preprocessStylesheet, registerStylesheetContent, rewriteRelativeCssImports } from "./stylesheet-registry.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";
@@ -13,6 +14,7 @@ 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 { createHash } from "node:crypto";
 import { existsSync, mkdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
@@ -76,8 +78,9 @@ function isIgnoredHmrFile(file) {
 */
 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;
@@ -100,13 +103,12 @@ function buildStylePreprocessor(options) {
 			return `@reference "${rootStylesheet}";\n${code}`;
 		};
 	}
-	if (tailwindPreprocessor && userPreprocessor) {
-		debugTailwind("chained with user stylePreprocessor");
-		return (code, filename) => {
-			return userPreprocessor(tailwindPreprocessor(code, filename), filename);
-		};
-	}
-	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);
@@ -385,6 +387,7 @@ function angular(options) {
 				if (pluginOptions.hasTailwindCss) validateTailwindConfig(config, watchMode);
 				if (pluginOptions.useAngularCompilationAPI) {
 					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);
@@ -1044,11 +1047,14 @@ function angular(options) {
 			modifiedFiles,
 			async transformStylesheet(data, containingFile, resourceFile, order, className) {
 				const filename = resourceFile ?? containingFile.replace(".ts", `.${pluginOptions.inlineStylesExtension}`);
-				const preprocessedData = preprocessStylesheet(data, filename, pluginOptions.stylePreprocessor);
+				const preprocessed = preprocessStylesheetResult(data, filename, pluginOptions.stylePreprocessor);
 				if (shouldEnableHmr() && className && containingFile) classNames.set(normalizePath(containingFile), className);
 				if (shouldExternalizeStyles()) {
 					const stylesheetId = registerStylesheetContent(stylesheetRegistry, {
-						code: preprocessedData,
+						code: preprocessed.code,
+						dependencies: normalizeStylesheetDependencies(preprocessed.dependencies),
+						diagnostics: preprocessed.diagnostics,
+						tags: preprocessed.tags,
 						containingFile,
 						className,
 						order,
@@ -1063,18 +1069,21 @@ function angular(options) {
 						stylesheetId,
 						filename,
 						resourceFile: resourceFile ?? "(inline)",
-						...describeStylesheetContent(preprocessedData)
+						dependencies: preprocessed.dependencies,
+						diagnostics: preprocessed.diagnostics,
+						tags: preprocessed.tags,
+						...describeStylesheetContent(preprocessed.code)
 					});
 					return stylesheetId;
 				}
 				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) {
 					debugStyles("preprocessCSS error", {
 						filename,
@@ -1131,33 +1140,39 @@ function angular(options) {
 			stylesheetRegistry?.registerExternalRequest(angularHash, key);
 			if (stylesheetRegistry && pluginOptions.stylePreprocessor && existsSync(key)) try {
 				const rawCss = readFileSync(key, "utf-8");
-				let preprocessed = preprocessStylesheet(rawCss, key, pluginOptions.stylePreprocessor);
+				const preprocessed = preprocessStylesheetResult(rawCss, key, pluginOptions.stylePreprocessor);
 				debugStylesV("external stylesheet raw snapshot", {
 					angularHash,
 					resolvedPath: key,
 					mtimeMs: safeStatMtimeMs(key),
 					...describeStylesheetContent(rawCss)
 				});
-				preprocessed = rewriteRelativeCssImports(preprocessed, key);
+				const servedCss = rewriteRelativeCssImports(preprocessed.code, key);
 				stylesheetRegistry.registerServedStylesheet({
 					publicId: angularHash,
 					sourcePath: key,
 					originalCode: rawCss,
-					normalizedCode: preprocessed
+					normalizedCode: servedCss,
+					dependencies: normalizeStylesheetDependencies(preprocessed.dependencies),
+					diagnostics: preprocessed.diagnostics,
+					tags: preprocessed.tags
 				}, [
 					key,
 					normalizePath(key),
 					basename(key),
 					key.replace(/^\//, "")
 				]);
-				if (preprocessed && preprocessed !== rawCss) {
+				if (servedCss && servedCss !== rawCss) {
 					preprocessStats.injected++;
 					debugStylesV("preprocessed external stylesheet for Tailwind @reference", {
 						angularHash,
 						resolvedPath: key,
 						mtimeMs: safeStatMtimeMs(key),
 						raw: describeStylesheetContent(rawCss),
-						served: describeStylesheetContent(preprocessed)
+						served: describeStylesheetContent(servedCss),
+						dependencies: preprocessed.dependencies,
+						diagnostics: preprocessed.diagnostics,
+						tags: preprocessed.tags
 					});
 				} else {
 					preprocessStats.skipped++;
@@ -1166,7 +1181,10 @@ function angular(options) {
 						resolvedPath: key,
 						mtimeMs: safeStatMtimeMs(key),
 						raw: describeStylesheetContent(rawCss),
-						served: describeStylesheetContent(preprocessed),
+						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."
 					});
 				}
@@ -1318,6 +1336,7 @@ function angular(options) {
 		if (!jit) {
 			const externalizeStyles = !!tsCompilerOptions["externalRuntimeStyles"];
 			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,
@@ -1524,13 +1543,16 @@ function refreshStylesheetRegistryForFile(file, stylesheetRegistry, stylePreproc
 	const publicIds = stylesheetRegistry.getPublicIdsForSource(normalizedFile);
 	if (publicIds.length === 0) return;
 	const rawCss = readFileSync(normalizedFile, "utf-8");
-	let servedCss = preprocessStylesheet(rawCss, normalizedFile, stylePreprocessor);
-	servedCss = rewriteRelativeCssImports(servedCss, normalizedFile);
+	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
+		normalizedCode: servedCss,
+		dependencies: normalizeStylesheetDependencies(preprocessed.dependencies),
+		diagnostics: preprocessed.diagnostics,
+		tags: preprocessed.tags
 	}, [
 		normalizedFile,
 		normalizePath(normalizedFile),
@@ -1540,6 +1562,9 @@ function refreshStylesheetRegistryForFile(file, stylesheetRegistry, stylePreproc
 	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)
 	});
@@ -1552,6 +1577,9 @@ function diagnoseComponentStylesheetPipeline(changedFile, directModule, styleshe
 	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) {
@@ -1587,6 +1615,9 @@ function diagnoseComponentStylesheetPipeline(changedFile, directModule, styleshe
 		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,