@ecopages/postcss-processor 0.2.0-alpha.2 → 0.2.0-alpha.3

package/CHANGELOG.md

@@ -6,6 +6,10 @@ All notable changes to `@ecopages/postcss-processor` are documented here.
 
 ## [UNRELEASED] — TBD
 
+### Bug Fixes
+
+- Rebuilt tracked stylesheets from fresh PostCSS plugin instances on non-CSS source changes so Tailwind utility generation updates without stale caches or forced reloads.
+
 ### Features
 
 - **Runtime CSS loaders** — Added `css-loader-plugin.ts`, `css-loader.bun.ts`, and `css-runtime-contract.ts` to support runtime CSS loading. CSS is now cached at runtime to avoid redundant processing during HMR (`cbaafea4`, `e7653c9b`).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/postcss-processor",
-  "version": "0.2.0-alpha.2",
+  "version": "0.2.0-alpha.3",
   "description": "Postcss processor, transform string or postcss file to css",
   "keywords": [
     "postcss",
@@ -17,8 +17,8 @@
     "directory": "packages/processors/postcss-processor"
   },
   "dependencies": {
-    "@ecopages/core": "0.2.0-alpha.2",
-    "@ecopages/file-system": "0.2.0-alpha.2",
+    "@ecopages/core": "0.2.0-alpha.3",
+    "@ecopages/file-system": "0.2.0-alpha.3",
     "@ecopages/logger": "latest",
     "autoprefixer": "^10.4.0",
     "browserslist": "^4.28.1",

package/src/plugin.d.ts

@@ -9,6 +9,15 @@ import type postcss from 'postcss';
  * Record of PostCSS plugins keyed by name
  */
 export type PluginsRecord = Record<string, postcss.AcceptedPlugin>;
+/**
+ * Lazily creates PostCSS plugins.
+ *
+ * This is primarily used in development when a non-CSS file change forces the
+ * processor to rebuild tracked stylesheets. Some plugins, including Tailwind,
+ * keep internal caches in long-lived plugin instances, so recreating them is
+ * required to pick up newly discovered classes.
+ */
+export type PluginFactoryRecord = Record<string, () => postcss.AcceptedPlugin>;
 /**
  * Configuration for the PostCSS processor
  */
@@ -38,6 +47,13 @@ export interface PostCssProcessorPluginConfig {
      * @default undefined (uses default plugins)
      */
     plugins?: PluginsRecord;
+    /**
+     * Factory functions for recreating stateful PostCSS plugins.
+     *
+     * When provided, Ecopages uses these factories to build a fresh plugin list
+     * for dependency-driven stylesheet rebuilds during development.
+     */
+    pluginFactories?: PluginFactoryRecord;
 }
 /**
  * PostCssProcessorPlugin
@@ -46,7 +62,10 @@ export interface PostCssProcessorPluginConfig {
 export declare class PostCssProcessorPlugin extends Processor<PostCssProcessorPluginConfig> {
     static DEFAULT_OPTIONS: Required<Pick<PostCssProcessorPluginConfig, 'filter'>>;
     private postcssPlugins;
+    private pluginFactories?;
     private readonly runtimeCssCache;
+    private readonly trackedCssFiles;
+    private watchQueue;
     private getCssFilter;
     private resolveProcessedCssPath;
     private readProcessedCssFromDist;
@@ -55,6 +74,11 @@ export declare class PostCssProcessorPlugin extends Processor<PostCssProcessorPl
     private transformCssSync;
     private transformCssAsync;
     matchesFileFilter(filepath: string): boolean;
+    private materializePluginFactories;
+    private refreshConfiguredPlugins;
+    private enqueueWatchTask;
+    private getTrackedCssFiles;
+    private handleDependencyChange;
     constructor(config?: Omit<ProcessorConfig<PostCssProcessorPluginConfig>, 'name' | 'description'>);
     /**
      * Handles CSS file changes during development.

package/src/plugin.js

@@ -12,7 +12,10 @@ class PostCssProcessorPlugin extends Processor {
     filter: /\.css$/
   };
   postcssPlugins = [];
+  pluginFactories;
   runtimeCssCache = /* @__PURE__ */ new Map();
+  trackedCssFiles = /* @__PURE__ */ new Set();
+  watchQueue = Promise.resolve();
   getCssFilter() {
     return this.options?.filter ?? PostCssProcessorPlugin.DEFAULT_OPTIONS.filter;
   }
@@ -53,6 +56,7 @@ class PostCssProcessorPlugin extends Processor {
       if (!this.matchesFileFilter(filePath)) {
         continue;
       }
+      this.trackedCssFiles.add(filePath);
       const rawContents = await fileSystem.readFile(filePath);
       let transformedInput = rawContents;
       if (this.options?.transformInput) {
@@ -92,6 +96,38 @@ class PostCssProcessorPlugin extends Processor {
     const filter = this.options?.filter ?? PostCssProcessorPlugin.DEFAULT_OPTIONS.filter;
     return filter.test(filepath);
   }
+  materializePluginFactories(pluginFactories) {
+    return Object.values(pluginFactories).map((factory) => factory());
+  }
+  refreshConfiguredPlugins() {
+    if (!this.pluginFactories) {
+      return;
+    }
+    this.postcssPlugins = this.materializePluginFactories(this.pluginFactories);
+  }
+  enqueueWatchTask(task) {
+    const queuedTask = this.watchQueue.then(task, task);
+    this.watchQueue = queuedTask.catch(() => void 0);
+    return queuedTask;
+  }
+  getTrackedCssFiles() {
+    return Array.from(this.trackedCssFiles).filter(
+      (filePath) => this.matchesFileFilter(filePath) && fileSystem.exists(filePath)
+    );
+  }
+  async handleDependencyChange(bridge) {
+    if (!this.context) {
+      return;
+    }
+    const cssFiles = this.getTrackedCssFiles();
+    if (cssFiles.length === 0) {
+      return;
+    }
+    this.refreshConfiguredPlugins();
+    for (const cssFilePath of cssFiles) {
+      await this.handleCssChange(cssFilePath, bridge, false);
+    }
+  }
   constructor(config = {
     options: PostCssProcessorPlugin.DEFAULT_OPTIONS
   }) {
@@ -101,14 +137,52 @@ class PostCssProcessorPlugin extends Processor {
       capabilities: [
         {
           kind: "stylesheet",
-          extensions: ["*.css"]
+          extensions: ["*.{css,scss,sass,less}"]
         }
       ],
       watch: {
         paths: [],
-        extensions: [".css", ".scss", ".sass", ".less"],
+        extensions: [
+          ".css",
+          ".scss",
+          ".sass",
+          ".less",
+          ".tsx",
+          ".ts",
+          ".jsx",
+          ".js",
+          ".mdx",
+          ".html",
+          ".svelte",
+          ".vue"
+        ],
         onChange: async ({ path: path2, bridge }) => {
-          await this.handleCssChange(path2, bridge);
+          await this.enqueueWatchTask(async () => {
+            if (this.matchesFileFilter(path2)) {
+              await this.handleCssChange(path2, bridge);
+              return;
+            }
+            await this.handleDependencyChange(bridge);
+          });
+        },
+        onCreate: async ({ path: path2, bridge }) => {
+          await this.enqueueWatchTask(async () => {
+            if (this.matchesFileFilter(path2)) {
+              await this.handleCssChange(path2, bridge);
+              return;
+            }
+            await this.handleDependencyChange(bridge);
+          });
+        },
+        onDelete: async ({ path: path2, bridge }) => {
+          await this.enqueueWatchTask(async () => {
+            if (this.matchesFileFilter(path2)) {
+              this.runtimeCssCache.delete(path2);
+              this.trackedCssFiles.delete(path2);
+              return;
+            }
+            await this.handleDependencyChange(bridge);
+          });
         }
       },
       ...config
@@ -118,14 +192,23 @@ class PostCssProcessorPlugin extends Processor {
    * Handles CSS file changes during development.
    * Processes the file and broadcasts a css-update event for hot reloading.
    */
-  async handleCssChange(filePath, bridge) {
+  async handleCssChange(filePath, bridge, refreshPlugins = true) {
     if (!this.context) return;
+    if (!fileSystem.exists(filePath)) return;
     try {
+      this.trackedCssFiles.add(filePath);
+      if (refreshPlugins) {
+        this.refreshConfiguredPlugins();
+      }
       let content = await fileSystem.readFile(filePath);
       if (this.options?.transformInput) {
         content = await this.options.transformInput(content, filePath);
       }
       const processed = await this.process(content, filePath);
+      const cached = this.runtimeCssCache.get(filePath);
+      if (cached === processed) {
+        return;
+      }
       this.runtimeCssCache.set(filePath, processed);
       await this.persistProcessedCss(filePath, processed);
       bridge.cssUpdate(filePath);
@@ -172,6 +255,7 @@ class PostCssProcessorPlugin extends Processor {
     const configExtensions = ["js", "cjs", "mjs", "ts"];
     let foundConfigPath;
     let loadedPlugins;
+    let loadedPluginFactories;
     for (const ext of configExtensions) {
       const configPath = path.join(this.context.rootDir, `postcss.config.${ext}`);
       if (fileSystem.exists(configPath)) {
@@ -184,6 +268,9 @@ class PostCssProcessorPlugin extends Processor {
         logger.debug(`Loading PostCSS config from: ${foundConfigPath}`);
         const postcssConfigModule = await import(foundConfigPath);
         const postcssConfig = postcssConfigModule.default || postcssConfigModule;
+        if (postcssConfig && typeof postcssConfig.pluginFactories === "object" && postcssConfig.pluginFactories !== null) {
+          loadedPluginFactories = postcssConfig.pluginFactories;
+        }
         if (postcssConfig && typeof postcssConfig.plugins === "object" && postcssConfig.plugins !== null) {
           if (Array.isArray(postcssConfig.plugins)) {
             loadedPlugins = postcssConfig.plugins;
@@ -203,15 +290,25 @@ class PostCssProcessorPlugin extends Processor {
     } else {
       logger.debug("No PostCSS config file found in root directory.");
     }
-    if (loadedPlugins) {
+    if (loadedPluginFactories) {
+      this.pluginFactories = loadedPluginFactories;
+      this.postcssPlugins = this.materializePluginFactories(loadedPluginFactories);
+    } else if (loadedPlugins) {
+      this.pluginFactories = void 0;
       this.postcssPlugins = loadedPlugins;
+    } else if (this.options?.pluginFactories) {
+      logger.debug("Using PostCSS plugin factories provided in processor options.");
+      this.pluginFactories = this.options.pluginFactories;
+      this.postcssPlugins = this.materializePluginFactories(this.options.pluginFactories);
     } else if (this.options?.plugins) {
       logger.debug("Using PostCSS plugins provided in processor options.");
+      this.pluginFactories = void 0;
       this.postcssPlugins = Object.values(this.options.plugins);
     } else {
       logger.warn(
         "No PostCSS plugins configured. Use a preset like tailwindV3Preset() or tailwindV4Preset(), provide plugins via options, or create a postcss.config file."
       );
+      this.pluginFactories = void 0;
       this.postcssPlugins = [];
     }
     if (!this.postcssPlugins || this.postcssPlugins.length === 0) {

package/src/plugin.ts

@@ -23,6 +23,16 @@ const logger = new Logger('[@ecopages/postcss-processor]', {
  */
 export type PluginsRecord = Record<string, postcss.AcceptedPlugin>;
 
+/**
+ * Lazily creates PostCSS plugins.
+ *
+ * This is primarily used in development when a non-CSS file change forces the
+ * processor to rebuild tracked stylesheets. Some plugins, including Tailwind,
+ * keep internal caches in long-lived plugin instances, so recreating them is
+ * required to pick up newly discovered classes.
+ */
+export type PluginFactoryRecord = Record<string, () => postcss.AcceptedPlugin>;
+
 /**
  * Configuration for the PostCSS processor
  */
@@ -52,6 +62,13 @@ export interface PostCssProcessorPluginConfig {
 	 * @default undefined (uses default plugins)
 	 */
 	plugins?: PluginsRecord;
+	/**
+	 * Factory functions for recreating stateful PostCSS plugins.
+	 *
+	 * When provided, Ecopages uses these factories to build a fresh plugin list
+	 * for dependency-driven stylesheet rebuilds during development.
+	 */
+	pluginFactories?: PluginFactoryRecord;
 }
 
 /**
@@ -64,7 +81,10 @@ export class PostCssProcessorPlugin extends Processor<PostCssProcessorPluginConf
 	};
 
 	private postcssPlugins: postcss.AcceptedPlugin[] = [];
+	private pluginFactories?: PluginFactoryRecord;
 	private readonly runtimeCssCache = new Map<string, string>();
+	private readonly trackedCssFiles = new Set<string>();
+	private watchQueue: Promise<void> = Promise.resolve();
 
 	private getCssFilter(): RegExp {
 		return this.options?.filter ?? PostCssProcessorPlugin.DEFAULT_OPTIONS.filter;
@@ -117,6 +137,8 @@ export class PostCssProcessorPlugin extends Processor<PostCssProcessorPluginConf
 				continue;
 			}
 
+			this.trackedCssFiles.add(filePath);
+
 			const rawContents = await fileSystem.readFile(filePath);
 			let transformedInput = rawContents;
 
@@ -169,6 +191,47 @@ export class PostCssProcessorPlugin extends Processor<PostCssProcessorPluginConf
 		return filter.test(filepath);
 	}
 
+	private materializePluginFactories(pluginFactories: PluginFactoryRecord): postcss.AcceptedPlugin[] {
+		return Object.values(pluginFactories).map((factory) => factory());
+	}
+
+	private refreshConfiguredPlugins(): void {
+		if (!this.pluginFactories) {
+			return;
+		}
+
+		this.postcssPlugins = this.materializePluginFactories(this.pluginFactories);
+	}
+
+	private enqueueWatchTask(task: () => Promise<void>): Promise<void> {
+		const queuedTask = this.watchQueue.then(task, task);
+		this.watchQueue = queuedTask.catch(() => undefined);
+		return queuedTask;
+	}
+
+	private getTrackedCssFiles(): string[] {
+		return Array.from(this.trackedCssFiles).filter(
+			(filePath) => this.matchesFileFilter(filePath) && fileSystem.exists(filePath),
+		);
+	}
+
+	private async handleDependencyChange(bridge: IClientBridge): Promise<void> {
+		if (!this.context) {
+			return;
+		}
+
+		const cssFiles = this.getTrackedCssFiles();
+		if (cssFiles.length === 0) {
+			return;
+		}
+
+		this.refreshConfiguredPlugins();
+
+		for (const cssFilePath of cssFiles) {
+			await this.handleCssChange(cssFilePath, bridge, false);
+		}
+	}
+
 	constructor(
 		config: Omit<ProcessorConfig<PostCssProcessorPluginConfig>, 'name' | 'description'> = {
 			options: PostCssProcessorPlugin.DEFAULT_OPTIONS,
@@ -180,14 +243,55 @@ export class PostCssProcessorPlugin extends Processor<PostCssProcessorPluginConf
 			capabilities: [
 				{
 					kind: 'stylesheet',
-					extensions: ['*.css'],
+					extensions: ['*.{css,scss,sass,less}'],
 				},
 			],
 			watch: {
 				paths: [],
-				extensions: ['.css', '.scss', '.sass', '.less'],
+				extensions: [
+					'.css',
+					'.scss',
+					'.sass',
+					'.less',
+					'.tsx',
+					'.ts',
+					'.jsx',
+					'.js',
+					'.mdx',
+					'.html',
+					'.svelte',
+					'.vue',
+				],
 				onChange: async ({ path, bridge }) => {
-					await this.handleCssChange(path, bridge);
+					await this.enqueueWatchTask(async () => {
+						if (this.matchesFileFilter(path)) {
+							await this.handleCssChange(path, bridge);
+							return;
+						}
+
+						await this.handleDependencyChange(bridge);
+					});
+				},
+				onCreate: async ({ path, bridge }) => {
+					await this.enqueueWatchTask(async () => {
+						if (this.matchesFileFilter(path)) {
+							await this.handleCssChange(path, bridge);
+							return;
+						}
+
+						await this.handleDependencyChange(bridge);
+					});
+				},
+				onDelete: async ({ path, bridge }) => {
+					await this.enqueueWatchTask(async () => {
+						if (this.matchesFileFilter(path)) {
+							this.runtimeCssCache.delete(path);
+							this.trackedCssFiles.delete(path);
+							return;
+						}
+
+						await this.handleDependencyChange(bridge);
+					});
 				},
 			},
 			...config,
@@ -198,10 +302,17 @@ export class PostCssProcessorPlugin extends Processor<PostCssProcessorPluginConf
 	 * Handles CSS file changes during development.
 	 * Processes the file and broadcasts a css-update event for hot reloading.
 	 */
-	private async handleCssChange(filePath: string, bridge: IClientBridge): Promise<void> {
+	private async handleCssChange(filePath: string, bridge: IClientBridge, refreshPlugins = true): Promise<void> {
 		if (!this.context) return;
+		if (!fileSystem.exists(filePath)) return;
 
 		try {
+			this.trackedCssFiles.add(filePath);
+
+			if (refreshPlugins) {
+				this.refreshConfiguredPlugins();
+			}
+
 			let content = await fileSystem.readFile(filePath);
 
 			if (this.options?.transformInput) {
@@ -209,6 +320,12 @@ export class PostCssProcessorPlugin extends Processor<PostCssProcessorPluginConf
 			}
 
 			const processed = await this.process(content, filePath);
+
+			const cached = this.runtimeCssCache.get(filePath);
+			if (cached === processed) {
+				return;
+			}
+
 			this.runtimeCssCache.set(filePath, processed);
 			await this.persistProcessedCss(filePath, processed);
 
@@ -262,6 +379,7 @@ export class PostCssProcessorPlugin extends Processor<PostCssProcessorPluginConf
 		const configExtensions = ['js', 'cjs', 'mjs', 'ts'];
 		let foundConfigPath: string | undefined;
 		let loadedPlugins: postcss.AcceptedPlugin[] | undefined;
+		let loadedPluginFactories: PluginFactoryRecord | undefined;
 
 		for (const ext of configExtensions) {
 			const configPath = path.join(this.context.rootDir, `postcss.config.${ext}`);
@@ -277,6 +395,13 @@ export class PostCssProcessorPlugin extends Processor<PostCssProcessorPluginConf
 
 				const postcssConfigModule = await import(foundConfigPath);
 				const postcssConfig = postcssConfigModule.default || postcssConfigModule;
+				if (
+					postcssConfig &&
+					typeof postcssConfig.pluginFactories === 'object' &&
+					postcssConfig.pluginFactories !== null
+				) {
+					loadedPluginFactories = postcssConfig.pluginFactories as PluginFactoryRecord;
+				}
 
 				if (postcssConfig && typeof postcssConfig.plugins === 'object' && postcssConfig.plugins !== null) {
 					if (Array.isArray(postcssConfig.plugins)) {
@@ -298,16 +423,26 @@ export class PostCssProcessorPlugin extends Processor<PostCssProcessorPluginConf
 			logger.debug('No PostCSS config file found in root directory.');
 		}
 
-		if (loadedPlugins) {
+		if (loadedPluginFactories) {
+			this.pluginFactories = loadedPluginFactories;
+			this.postcssPlugins = this.materializePluginFactories(loadedPluginFactories);
+		} else if (loadedPlugins) {
+			this.pluginFactories = undefined;
 			this.postcssPlugins = loadedPlugins;
+		} else if (this.options?.pluginFactories) {
+			logger.debug('Using PostCSS plugin factories provided in processor options.');
+			this.pluginFactories = this.options.pluginFactories;
+			this.postcssPlugins = this.materializePluginFactories(this.options.pluginFactories);
 		} else if (this.options?.plugins) {
 			logger.debug('Using PostCSS plugins provided in processor options.');
+			this.pluginFactories = undefined;
 			this.postcssPlugins = Object.values(this.options.plugins);
 		} else {
 			logger.warn(
 				'No PostCSS plugins configured. Use a preset like tailwindV3Preset() or tailwindV4Preset(), ' +
 					'provide plugins via options, or create a postcss.config file.',
 			);
+			this.pluginFactories = undefined;
 			this.postcssPlugins = [];
 		}
 

package/src/presets/tailwind-v3.d.ts

@@ -12,6 +12,8 @@ import type { PostCssProcessorPluginConfig } from '../plugin.js';
  * Features:
  * - Uses classic Tailwind v3 plugin stack
  * - Includes postcss-import, tailwindcss/nesting, tailwindcss, autoprefixer, cssnano
+ * - Returns both `plugins` for immediate use and `pluginFactories` so Ecopages
+ *   can recreate fresh Tailwind/PostCSS plugin instances on dependency-driven rebuilds
  *
  * @example
  * ```typescript

package/src/presets/tailwind-v3.js

@@ -9,14 +9,17 @@ function tailwindV3Preset() {
   const autoprefixerOptions = browserslistConfig ? {} : {
     overrideBrowserslist: [">0.3%", "not ie 11", "not dead", "not op_mini all"]
   };
-  const plugins = {
-    "postcss-import": postcssImport(),
-    "tailwindcss/nesting": tailwindcssNesting(),
-    tailwindcss: tailwindcss(),
-    autoprefixer: autoprefixer(autoprefixerOptions),
-    cssnano: cssnano()
+  const pluginFactories = {
+    "postcss-import": () => postcssImport(),
+    "tailwindcss/nesting": () => tailwindcssNesting(),
+    tailwindcss: () => tailwindcss(),
+    autoprefixer: () => autoprefixer(autoprefixerOptions),
+    cssnano: () => cssnano()
   };
-  return { plugins };
+  const plugins = Object.fromEntries(
+    Object.entries(pluginFactories).map(([name, factory]) => [name, factory()])
+  );
+  return { plugins, pluginFactories };
 }
 export {
   tailwindV3Preset

package/src/presets/tailwind-v3.ts

@@ -13,7 +13,7 @@ import type postcss from 'postcss';
 import postcssImport from 'postcss-import';
 import tailwindcss from 'tailwindcss';
 import tailwindcssNesting from 'tailwindcss/nesting/index.js';
-import type { PostCssProcessorPluginConfig } from '../plugin.ts';
+import type { PluginFactoryRecord, PostCssProcessorPluginConfig } from '../plugin.ts';
 
 type PluginsRecord = Record<string, postcss.AcceptedPlugin>;
 
@@ -23,6 +23,8 @@ type PluginsRecord = Record<string, postcss.AcceptedPlugin>;
  * Features:
  * - Uses classic Tailwind v3 plugin stack
  * - Includes postcss-import, tailwindcss/nesting, tailwindcss, autoprefixer, cssnano
+ * - Returns both `plugins` for immediate use and `pluginFactories` so Ecopages
+ *   can recreate fresh Tailwind/PostCSS plugin instances on dependency-driven rebuilds
  *
  * @example
  * ```typescript
@@ -49,13 +51,22 @@ export function tailwindV3Preset(): PostCssProcessorPluginConfig {
 				overrideBrowserslist: ['>0.3%', 'not ie 11', 'not dead', 'not op_mini all'],
 			};
 
-	const plugins: PluginsRecord = {
-		'postcss-import': postcssImport(),
-		'tailwindcss/nesting': tailwindcssNesting(),
-		tailwindcss: tailwindcss(),
-		autoprefixer: autoprefixer(autoprefixerOptions),
-		cssnano: cssnano(),
+	const pluginFactories: PluginFactoryRecord = {
+		'postcss-import': () => postcssImport(),
+		'tailwindcss/nesting': () => tailwindcssNesting(),
+		tailwindcss: () => tailwindcss(),
+		autoprefixer: () => autoprefixer(autoprefixerOptions),
+		cssnano: () => cssnano(),
 	};
 
-	return { plugins };
+	const plugins: PluginsRecord = Object.fromEntries(
+		Object.entries(pluginFactories).map(([name, factory]) => [name, factory()]),
+	) as PluginsRecord;
+
+	/**
+	 * Keep both forms:
+	 * - `plugins` are used immediately by the processor
+	 * - `pluginFactories` let the processor recreate fresh plugin instances later
+	 */
+	return { plugins, pluginFactories };
 }

package/src/presets/tailwind-v4.d.ts

@@ -23,6 +23,8 @@ export interface TailwindV4PresetOptions {
  * - Uses `@tailwindcss/postcss` plugin (v4)
  * - Automatically injects `@reference` headers for `@apply` support
  * - Includes cssnano for CSS minification
+ * - Returns both `plugins` for immediate use and `pluginFactories` so Ecopages
+ *   can recreate fresh Tailwind/PostCSS plugin instances on dependency-driven rebuilds
  *
  * @example
  * ```typescript

package/src/presets/tailwind-v4.js

@@ -11,14 +11,20 @@ function tailwindV4Preset(options) {
   const autoprefixerOptions = browserslistConfig ? {} : {
     overrideBrowserslist: [">0.3%", "not ie 11", "not dead", "not op_mini all"]
   };
+  const pluginFactories = {
+    "postcss-import": () => postcssImport(),
+    "postcss-nested": () => postcssNested(),
+    "@tailwindcss/postcss": () => tailwindcss(),
+    autoprefixer: () => autoprefixer(autoprefixerOptions),
+    cssnano: () => cssnano()
+  };
   return {
-    plugins: {
-      "postcss-import": postcssImport(),
-      "postcss-nested": postcssNested(),
-      "@tailwindcss/postcss": tailwindcss(),
-      autoprefixer: autoprefixer(autoprefixerOptions),
-      cssnano: cssnano()
-    },
+    /**
+     * Instantiate the initial plugin list for the active processor instance.
+     * Fresh instances can later be recreated from `pluginFactories`.
+     */
+    plugins: Object.fromEntries(Object.entries(pluginFactories).map(([name, factory]) => [name, factory()])),
+    pluginFactories,
     transformInput: async (contents, filePath) => {
       const css = contents instanceof Buffer ? contents.toString("utf-8") : contents;
       const normalizedFilePath = path.resolve(filePath);

package/src/presets/tailwind-v4.ts

@@ -13,7 +13,7 @@ import cssnano from 'cssnano';
 import path from 'node:path';
 import postcssImport from 'postcss-import';
 import postcssNested from 'postcss-nested';
-import type { PostCssProcessorPluginConfig } from '../plugin.ts';
+import type { PluginFactoryRecord, PostCssProcessorPluginConfig } from '../plugin.ts';
 
 /**
  * Options for Tailwind v4 preset
@@ -33,6 +33,8 @@ export interface TailwindV4PresetOptions {
  * - Uses `@tailwindcss/postcss` plugin (v4)
  * - Automatically injects `@reference` headers for `@apply` support
  * - Includes cssnano for CSS minification
+ * - Returns both `plugins` for immediate use and `pluginFactories` so Ecopages
+ *   can recreate fresh Tailwind/PostCSS plugin instances on dependency-driven rebuilds
  *
  * @example
  * ```typescript
@@ -63,14 +65,21 @@ export function tailwindV4Preset(options: TailwindV4PresetOptions): PostCssProce
 				overrideBrowserslist: ['>0.3%', 'not ie 11', 'not dead', 'not op_mini all'],
 			};
 
+	const pluginFactories: PluginFactoryRecord = {
+		'postcss-import': () => postcssImport(),
+		'postcss-nested': () => postcssNested(),
+		'@tailwindcss/postcss': () => tailwindcss(),
+		autoprefixer: () => autoprefixer(autoprefixerOptions),
+		cssnano: () => cssnano(),
+	};
+
 	return {
-		plugins: {
-			'postcss-import': postcssImport(),
-			'postcss-nested': postcssNested(),
-			'@tailwindcss/postcss': tailwindcss(),
-			autoprefixer: autoprefixer(autoprefixerOptions),
-			cssnano: cssnano(),
-		},
+		/**
+		 * Instantiate the initial plugin list for the active processor instance.
+		 * Fresh instances can later be recreated from `pluginFactories`.
+		 */
+		plugins: Object.fromEntries(Object.entries(pluginFactories).map(([name, factory]) => [name, factory()])),
+		pluginFactories,
 		transformInput: async (contents: string | Buffer, filePath: string): Promise<string> => {
 			const css = contents instanceof Buffer ? contents.toString('utf-8') : (contents as string);
 			const normalizedFilePath = path.resolve(filePath);