@ecopages/postcss-processor 0.2.0-alpha.4 → 0.2.0-alpha.41

package/README.md

@@ -1,56 +1,32 @@
-# PostCSS Processor
+# @ecopages/postcss-processor
 
-This module provides a PostCSS processor plugin for Ecopages and utility functions for processing CSS files and strings using PostCSS. It includes built-in presets for Tailwind CSS (v3 and v4).
+PostCSS processing pipeline for Ecopages. It provides a processor plugin that seamlessly integrates PostCSS into the Ecopages build system, and includes built-in presets for Tailwind CSS (v3 and v4).
 
 ## Features
 
-- **Ecopages Processor Plugin**: Seamless integration with Ecopages build system.
-- **Tailwind Presets**: Ready-to-use configurations for Tailwind CSS v3 and v4.
-- **Automatic Configuration**: Detects `postcss.config.{js,ts,etc}` automatically.
-- **Standalone Usage**: Process CSS files or strings directly.
-- **Bun Loader**: Automatically registers a Bun loader for importing CSS in TS/JS files.
+- **Ecopages Processor Plugin**: Hook right into the build pipeline.
+- **Tailwind Presets**: Pre-configured pipelines for Tailwind CSS v3 and v4.
+- **Automatic Configuration**: Detects existing `postcss.config.{js,ts,etc}`.
+- **Bun Loader**: Registers a Bun loader for importing CSS in TS/JS files.
 
-## Install
+## Installation
 
 ```bash
-bunx jsr add @ecopages/postcss-processor
+bun add @ecopages/postcss-processor
 ```
 
-## Usage with Ecopages
+## Usage
 
-Integrate the processor into your `eco.config.ts` using one of the available presets.
-
-### Tailwind v3 Preset
-
-Includes `tailwindcss`, `autoprefixer`, `postcss-import`, `cssnano`.
-
-```bash
-bun add -D tailwindcss@3.4.19
-```
-
-```typescript
-// eco.config.ts
-import { ConfigBuilder } from '@ecopages/core';
-import { postcssProcessorPlugin } from '@ecopages/postcss-processor';
-import { tailwindV3Preset } from '@ecopages/postcss-processor/presets/tailwind-v3';
-
-const config = await new ConfigBuilder().setProcessors([postcssProcessorPlugin(tailwindV3Preset())]).build();
-
-export default config;
-```
+Integrate the processor into your `eco.config.ts` using a preset.
 
 ### Tailwind v4 Preset (Recommended)
 
-Includes `@tailwindcss/postcss`, `autoprefixer`, `postcss-nested`, `cssnano`, and handles `@reference` injection for `@apply`.
-
-```bash
-bun add -D @tailwindcss/postcss tailwindcss
-```
+Requires `@tailwindcss/postcss` and `tailwindcss` to be installed.
 
 ```typescript
 // eco.config.ts
 import path from 'node:path';
-import { ConfigBuilder } from '@ecopages/core';
+import { ConfigBuilder } from '@ecopages/core/config-builder';
 import { postcssProcessorPlugin } from '@ecopages/postcss-processor';
 import { tailwindV4Preset } from '@ecopages/postcss-processor/presets/tailwind-v4';
 
@@ -58,7 +34,7 @@ const config = await new ConfigBuilder()
 	.setProcessors([
 		postcssProcessorPlugin(
 			tailwindV4Preset({
-				referencePath: path.resolve(import.meta.dir, 'src/styles/app.css'),
+				referencePath: path.resolve(import.meta.dirname, 'src/styles/app.css'),
 			}),
 		),
 	])
@@ -67,53 +43,41 @@ const config = await new ConfigBuilder()
 export default config;
 ```
 
-### Browser Support
-
-By default, the presets target a broad range of modern browsers (`>0.3%, not ie 11, not dead, not op_mini all`).
-
-To override this, add a `browserslist` configuration to your `package.json` or create a `.browserslistrc` file in your project root. The processor will automatically detect and use your custom configuration.
-
-### Custom Configuration
-
-You can also use a standard `postcss.config.js` file or pass plugins manually.
-
-**Using `postcss.config.js`:**
-Create the file in your root, and simply add `postcssProcessorPlugin()` to your config without arguments.
+### Tailwind v3 Preset
 
-**Manual Configuration:**
+Requires `tailwindcss@3`, `autoprefixer`, `postcss-import`, and `cssnano` to be installed.
 
 ```typescript
+// eco.config.ts
+import { ConfigBuilder } from '@ecopages/core/config-builder';
 import { postcssProcessorPlugin } from '@ecopages/postcss-processor';
-import myPlugin from 'postcss-my-plugin';
+import { tailwindV3Preset } from '@ecopages/postcss-processor/presets/tailwind-v3';
+
+const config = await new ConfigBuilder().setProcessors([postcssProcessorPlugin(tailwindV3Preset())]).build();
 
-postcssProcessorPlugin({
-	plugins: {
-		'my-plugin': myPlugin(),
-	},
-});
+export default config;
 ```
 
-**Advanced Configuration:**
+## Custom Configuration
 
-For advanced use cases, use transformation hooks to modify CSS before or after processing:
+To use your own `postcss.config.js`, simply call `postcssProcessorPlugin()` without arguments.
+
+You can also pass raw plugins or transformation hooks manually:
 
 ```typescript
-import { ConfigBuilder } from '@ecopages/core';
+import { ConfigBuilder } from '@ecopages/core/config-builder';
 import { postcssProcessorPlugin } from '@ecopages/postcss-processor';
+import myPlugin from 'postcss-my-plugin';
 
 const config = await new ConfigBuilder()
 	.setProcessors([
 		postcssProcessorPlugin({
-			// Define a filter for files to process (defaults to /\.css$/)
 			filter: /\.css$/,
-			// Provide a function to transform input before processing
-			transformInput: async (css) => `/* My Custom Header */\n${css}`,
-			// Provide a function to transform output after processing
-			transformOutput: async (css) => css.replace('blue', 'red'),
-			// Explicitly provide plugins (overrides defaults)
 			plugins: {
-				/* custom plugins */
+				'my-plugin': myPlugin(),
 			},
+			transformInput: async (css) => `/* Header */\n${css}`,
+			transformOutput: async (css) => css.replace('blue', 'red'),
 		}),
 	])
 	.build();
@@ -121,9 +85,9 @@ const config = await new ConfigBuilder()
 export default config;
 ```
 
-## Standalone Usage
+## Standalone Processing
 
-You can use the underlying processor functions directly:
+You can bypass Ecopages entirely and use the processor utilities directly:
 
 ```typescript
 import { PostCssProcessor } from '@ecopages/postcss-processor';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/postcss-processor",
-  "version": "0.2.0-alpha.4",
+  "version": "0.2.0-alpha.41",
   "description": "Postcss processor, transform string or postcss file to css",
   "keywords": [
     "postcss",
@@ -17,17 +17,17 @@
     "directory": "packages/processors/postcss-processor"
   },
   "dependencies": {
-    "@ecopages/core": "0.2.0-alpha.4",
-    "@ecopages/file-system": "0.2.0-alpha.4",
-    "@ecopages/logger": "latest",
-    "autoprefixer": "^10.4.0",
-    "browserslist": "^4.28.1",
-    "cssnano": "^6.0.0",
-    "postcss": "^8.4.32",
-    "postcss-import": "^15.0.0",
+    "@ecopages/file-system": "0.2.0-alpha.34",
+    "@ecopages/logger": "^0.2.3",
+    "autoprefixer": "^10.5.0",
+    "browserslist": "^4.28.2",
+    "cssnano": "^7.1.9",
+    "postcss": "^8.5.14",
+    "postcss-import": "^16.1.1",
     "postcss-nested": "^7.0.2"
   },
   "peerDependencies": {
+    "@ecopages/core": "0.2.0-alpha.41",
     "@tailwindcss/postcss": ">=4",
     "tailwindcss": ">=3"
   },

package/src/index.d.ts

@@ -1,2 +1,2 @@
-export * from './plugin';
-export * from './postcss-processor';
+export * from './plugin.js';
+export * from './postcss-processor.js';

package/src/index.js

@@ -1,2 +1,2 @@
-export * from "./plugin";
-export * from "./postcss-processor";
+export * from "./plugin.js";
+export * from "./postcss-processor.js";

package/src/plugin.d.ts

@@ -2,8 +2,7 @@
  * PostCssProcessorPlugin
  * @module @ecopages/postcss-processor
  */
-import { Processor, type ProcessorConfig } from '@ecopages/core/plugins/processor';
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import { Processor, type EcoBuildPlugin, type ProcessorConfig } from '@ecopages/core/plugins/processor';
 import type postcss from 'postcss';
 /**
  * Record of PostCSS plugins keyed by name
@@ -26,6 +25,13 @@ export interface PostCssProcessorPluginConfig {
      * Regex filter to match files to process
      */
     filter?: RegExp;
+    /**
+     * CSS entry files to rebuild when a non-CSS dependency changes.
+     *
+     * Use this when the processor watches template or script files that affect a
+     * known stylesheet entry, such as a Tailwind reference file.
+     */
+    dependencyEntryPaths?: string[];
     /**
      * Function to transform the contents of the file.
      * It can be handy to add a custom header or footer to the file.
@@ -61,16 +67,44 @@ export interface PostCssProcessorPluginConfig {
  */
 export declare class PostCssProcessorPlugin extends Processor<PostCssProcessorPluginConfig> {
     static DEFAULT_OPTIONS: Required<Pick<PostCssProcessorPluginConfig, 'filter'>>;
+    private buildContributionsPrepared;
     private postcssPlugins;
     private pluginFactories?;
     private readonly runtimeCssCache;
     private readonly trackedCssFiles;
     private watchQueue;
+    /**
+     * Maps an imported CSS file path → set of tracked CSS entry files that import it.
+     * Used to resolve which parent entry files need re-processing when a dependency changes.
+     */
+    private readonly cssDependencyMap;
     private getCssFilter;
     private resolveProcessedCssPath;
     private readProcessedCssFromDist;
     private persistProcessedCss;
     private prewarmRuntimeCssCache;
+    /**
+     * Regex to match CSS @import statements and extract the path.
+     * Handles: @import './foo.css'; @import "./foo.css"; @import url('./foo.css');
+     */
+    private static readonly CSS_IMPORT_REGEX;
+    /**
+     * Builds the CSS dependency map by scanning tracked CSS files for @import directives.
+     * Maps each imported file to the set of tracked entry files that import it (directly or transitively).
+     */
+    private buildCssDependencyMap;
+    /**
+     * Extracts resolved absolute paths of CSS files imported via @import in the given CSS content.
+     * Recursively follows imports to capture transitive dependencies.
+     * It skips bare module imports like @import 'tailwindcss'.
+     * It recursively follows imports to capture transitive dependencies.
+     */
+    private extractCssImports;
+    /**
+     * Resolves a changed CSS file to its parent entry file(s) if it is an @import dependency.
+     * Returns an empty array if the file is not an import dependency (i.e., it's an entry file itself).
+     */
+    private resolveEntryFiles;
     private transformCssSync;
     private transformCssAsync;
     matchesFileFilter(filepath: string): boolean;
@@ -78,17 +112,33 @@ export declare class PostCssProcessorPlugin extends Processor<PostCssProcessorPl
     private refreshConfiguredPlugins;
     private enqueueWatchTask;
     private getTrackedCssFiles;
+    private getTrackedCssEntryFiles;
+    private getDependencyEntryFiles;
     private handleDependencyChange;
     constructor(config?: Omit<ProcessorConfig<PostCssProcessorPluginConfig>, 'name' | 'description'>);
     /**
      * Handles CSS file changes during development.
-     * Processes the file and broadcasts a css-update event for hot reloading.
+     * If the file is an @import dependency, re-processes the parent entry file(s) instead.
+     * Broadcasts a css-update event for hot reloading.
      */
     private handleCssChange;
+    /**
+     * Processes a CSS file and broadcasts a css-update event.
+     * Skips broadcast if the processed output hasn't changed.
+     */
+    private processAndBroadcast;
     get buildPlugins(): EcoBuildPlugin[];
     get plugins(): EcoBuildPlugin[];
     /**
-     * Setup the PostCSS processor.
+     * Resolves the configured PostCSS plugin list before config build seals the
+     * app manifest.
+     *
+     * @remarks
+     * Runtime setup reuses this prepared list and only performs cache prewarming.
+     */
+    prepareBuildContributions(): Promise<void>;
+    /**
+     * Prepares build contributions if not already done and prewarms the runtime CSS cache.
      */
     setup(): Promise<void>;
     /**

package/src/plugin.js

@@ -2,8 +2,8 @@ import path from "node:path";
 import { fileSystem } from "@ecopages/file-system";
 import { Processor } from "@ecopages/core/plugins/processor";
 import { Logger } from "@ecopages/logger";
-import { PostCssProcessor } from "./postcss-processor";
-import { createCssLoaderPlugin } from "./runtime/css-loader-plugin";
+import { PostCssProcessor } from "./postcss-processor.js";
+import { createCssLoaderPlugin } from "./runtime/css-loader-plugin.js";
 const logger = new Logger("[@ecopages/postcss-processor]", {
   debug: process.env.ECOPAGES_LOGGER_DEBUG === "true"
 });
@@ -11,11 +11,17 @@ class PostCssProcessorPlugin extends Processor {
   static DEFAULT_OPTIONS = {
     filter: /\.css$/
   };
+  buildContributionsPrepared = false;
   postcssPlugins = [];
   pluginFactories;
   runtimeCssCache = /* @__PURE__ */ new Map();
   trackedCssFiles = /* @__PURE__ */ new Set();
   watchQueue = Promise.resolve();
+  /**
+   * Maps an imported CSS file path → set of tracked CSS entry files that import it.
+   * Used to resolve which parent entry files need re-processing when a dependency changes.
+   */
+  cssDependencyMap = /* @__PURE__ */ new Map();
   getCssFilter() {
     return this.options?.filter ?? PostCssProcessorPlugin.DEFAULT_OPTIONS.filter;
   }
@@ -66,6 +72,69 @@ class PostCssProcessorPlugin extends Processor {
       this.runtimeCssCache.set(filePath, processed);
       await this.persistProcessedCss(filePath, processed);
     }
+    this.buildCssDependencyMap();
+  }
+  /**
+   * Regex to match CSS @import statements and extract the path.
+   * Handles: @import './foo.css'; @import "./foo.css"; @import url('./foo.css');
+   */
+  static CSS_IMPORT_REGEX = /@import\s+(?:url\(\s*)?['"]([^'"]+\.css)['"](?:\s*\))?\s*;/gm;
+  /**
+   * Builds the CSS dependency map by scanning tracked CSS files for @import directives.
+   * Maps each imported file to the set of tracked entry files that import it (directly or transitively).
+   */
+  buildCssDependencyMap() {
+    this.cssDependencyMap.clear();
+    for (const entryFile of this.trackedCssFiles) {
+      if (!fileSystem.exists(entryFile)) continue;
+      const rawContents = fileSystem.readFileAsBuffer(entryFile).toString("utf-8");
+      const imports = this.extractCssImports(rawContents, entryFile);
+      for (const importedFile of imports) {
+        if (!this.cssDependencyMap.has(importedFile)) {
+          this.cssDependencyMap.set(importedFile, /* @__PURE__ */ new Set());
+        }
+        this.cssDependencyMap.get(importedFile).add(entryFile);
+      }
+    }
+  }
+  /**
+   * Extracts resolved absolute paths of CSS files imported via @import in the given CSS content.
+   * Recursively follows imports to capture transitive dependencies.
+   * It skips bare module imports like @import 'tailwindcss'.
+   * It recursively follows imports to capture transitive dependencies.
+   */
+  extractCssImports(cssContent, fromFile, visited = /* @__PURE__ */ new Set()) {
+    const dir = path.dirname(fromFile);
+    const imports = [];
+    let match;
+    const regex = new RegExp(PostCssProcessorPlugin.CSS_IMPORT_REGEX.source, "gm");
+    while ((match = regex.exec(cssContent)) !== null) {
+      const importPath = match[1];
+      if (!importPath.startsWith(".") && !importPath.startsWith("/")) {
+        continue;
+      }
+      const resolvedPath = path.resolve(dir, importPath);
+      if (visited.has(resolvedPath)) continue;
+      visited.add(resolvedPath);
+      imports.push(resolvedPath);
+      if (fileSystem.exists(resolvedPath)) {
+        const nestedContent = fileSystem.readFileAsBuffer(resolvedPath).toString("utf-8");
+        const nestedImports = this.extractCssImports(nestedContent, resolvedPath, visited);
+        imports.push(...nestedImports);
+      }
+    }
+    return imports;
+  }
+  /**
+   * Resolves a changed CSS file to its parent entry file(s) if it is an @import dependency.
+   * Returns an empty array if the file is not an import dependency (i.e., it's an entry file itself).
+   */
+  resolveEntryFiles(filePath) {
+    const entries = this.cssDependencyMap.get(filePath);
+    if (!entries || entries.size === 0) {
+      return [];
+    }
+    return Array.from(entries);
   }
   transformCssSync(input) {
     const cached = this.runtimeCssCache.get(input.filePath);
@@ -115,11 +184,24 @@ class PostCssProcessorPlugin extends Processor {
       (filePath) => this.matchesFileFilter(filePath) && fileSystem.exists(filePath)
     );
   }
+  getTrackedCssEntryFiles() {
+    const importedCssFiles = new Set(this.cssDependencyMap.keys());
+    return this.getTrackedCssFiles().filter((filePath) => !importedCssFiles.has(filePath));
+  }
+  getDependencyEntryFiles() {
+    const configuredEntryPaths = this.options?.dependencyEntryPaths;
+    if (!configuredEntryPaths || configuredEntryPaths.length === 0) {
+      return this.getTrackedCssEntryFiles();
+    }
+    return configuredEntryPaths.filter(
+      (filePath) => this.matchesFileFilter(filePath) && fileSystem.exists(filePath)
+    );
+  }
   async handleDependencyChange(bridge) {
     if (!this.context) {
       return;
     }
-    const cssFiles = this.getTrackedCssFiles();
+    const cssFiles = this.getDependencyEntryFiles();
     if (cssFiles.length === 0) {
       return;
     }
@@ -168,6 +250,8 @@ class PostCssProcessorPlugin extends Processor {
         onCreate: async ({ path: path2, bridge }) => {
           await this.enqueueWatchTask(async () => {
             if (this.matchesFileFilter(path2)) {
+              this.trackedCssFiles.add(path2);
+              this.buildCssDependencyMap();
               await this.handleCssChange(path2, bridge);
               return;
             }
@@ -179,6 +263,8 @@ class PostCssProcessorPlugin extends Processor {
             if (this.matchesFileFilter(path2)) {
               this.runtimeCssCache.delete(path2);
               this.trackedCssFiles.delete(path2);
+              this.cssDependencyMap.delete(path2);
+              this.buildCssDependencyMap();
               return;
             }
             await this.handleDependencyChange(bridge);
@@ -190,9 +276,28 @@ class PostCssProcessorPlugin extends Processor {
   }
   /**
    * Handles CSS file changes during development.
-   * Processes the file and broadcasts a css-update event for hot reloading.
+   * If the file is an @import dependency, re-processes the parent entry file(s) instead.
+   * Broadcasts a css-update event for hot reloading.
    */
   async handleCssChange(filePath, bridge, refreshPlugins = true) {
+    if (!this.context) return;
+    if (!fileSystem.exists(filePath)) return;
+    const entryFiles = this.resolveEntryFiles(filePath);
+    if (entryFiles.length > 0) {
+      logger.debug(`CSS dependency changed: ${filePath}, re-processing ${entryFiles.length} parent(s)`);
+      for (const entryFile of entryFiles) {
+        this.runtimeCssCache.delete(entryFile);
+        await this.processAndBroadcast(entryFile, bridge, refreshPlugins);
+      }
+      return;
+    }
+    await this.processAndBroadcast(filePath, bridge, refreshPlugins);
+  }
+  /**
+   * Processes a CSS file and broadcasts a css-update event.
+   * Skips broadcast if the processed output hasn't changed.
+   */
+  async processAndBroadcast(filePath, bridge, refreshPlugins = true) {
     if (!this.context) return;
     if (!fileSystem.exists(filePath)) return;
     try {
@@ -238,10 +343,24 @@ class PostCssProcessorPlugin extends Processor {
     ];
   }
   /**
-   * Setup the PostCSS processor.
+   * Resolves the configured PostCSS plugin list before config build seals the
+   * app manifest.
+   *
+   * @remarks
+   * Runtime setup reuses this prepared list and only performs cache prewarming.
    */
-  async setup() {
+  async prepareBuildContributions() {
+    if (this.buildContributionsPrepared) {
+      return;
+    }
     await this.collectPostcssPlugins();
+    this.buildContributionsPrepared = true;
+  }
+  /**
+   * Prepares build contributions if not already done and prewarms the runtime CSS cache.
+   */
+  async setup() {
+    await this.prepareBuildContributions();
     await this.prewarmRuntimeCssCache();
   }
   /**
@@ -266,7 +385,10 @@ class PostCssProcessorPlugin extends Processor {
     if (foundConfigPath) {
       try {
         logger.debug(`Loading PostCSS config from: ${foundConfigPath}`);
-        const postcssConfigModule = await import(foundConfigPath);
+        const postcssConfigModule = await import(
+          /* @vite-ignore */
+          foundConfigPath
+        );
         const postcssConfig = postcssConfigModule.default || postcssConfigModule;
         if (postcssConfig && typeof postcssConfig.pluginFactories === "object" && postcssConfig.pluginFactories !== null) {
           loadedPluginFactories = postcssConfig.pluginFactories;
@@ -296,14 +418,15 @@ class PostCssProcessorPlugin extends Processor {
     } 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 if (this.options?.pluginFactories || this.options?.plugins) {
+      this.pluginFactories = this.options?.pluginFactories;
+      if (this.options?.plugins) {
+        logger.debug("Using PostCSS plugins provided in processor options.");
+        this.postcssPlugins = Object.values(this.options.plugins);
+      } else if (this.options?.pluginFactories) {
+        logger.debug("Using PostCSS plugin factories provided in processor options.");
+        this.postcssPlugins = this.materializePluginFactories(this.options.pluginFactories);
+      }
     } else {
       logger.warn(
         "No PostCSS plugins configured. Use a preset like tailwindV3Preset() or tailwindV4Preset(), provide plugins via options, or create a postcss.config file."
@@ -323,14 +446,19 @@ class PostCssProcessorPlugin extends Processor {
    * @returns Processed CSS
    */
   async process(fileAsString, filePath) {
-    return await PostCssProcessor.processStringOrBuffer(fileAsString, {
+    const input = this.options?.transformInput && filePath ? await this.options.transformInput(fileAsString, filePath) : fileAsString;
+    return await PostCssProcessor.processStringOrBuffer(input, {
       filePath,
       plugins: this.postcssPlugins,
       transformOutput: this.options?.transformOutput
     });
   }
   processSync(fileAsString, filePath) {
-    return PostCssProcessor.processStringOrBufferSync(fileAsString, {
+    const input = this.options?.transformInput && filePath ? this.options.transformInput(fileAsString, filePath) : fileAsString;
+    if (input instanceof Promise) {
+      throw new Error("transformInput must be synchronous when used with processSync");
+    }
+    return PostCssProcessor.processStringOrBufferSync(input, {
       filePath,
       plugins: this.postcssPlugins,
       transformOutput: this.options?.transformOutput

package/src/presets/index.d.ts

@@ -2,5 +2,5 @@
  * PostCSS Processor Presets
  * @module @ecopages/postcss-processor/presets
  */
-export { tailwindV3Preset } from './tailwind-v3';
-export { tailwindV4Preset, type TailwindV4PresetOptions } from './tailwind-v4';
+export { tailwindV3Preset } from './tailwind-v3.js';
+export { tailwindV4Preset, type TailwindV4PresetOptions } from './tailwind-v4.js';

package/src/presets/index.js

@@ -1,5 +1,5 @@
-import { tailwindV3Preset } from "./tailwind-v3";
-import { tailwindV4Preset } from "./tailwind-v4";
+import { tailwindV3Preset } from "./tailwind-v3.js";
+import { tailwindV4Preset } from "./tailwind-v4.js";
 export {
   tailwindV3Preset,
   tailwindV4Preset

package/src/presets/tailwind-v4.js

@@ -11,14 +11,18 @@ function tailwindV4Preset(options) {
   const autoprefixerOptions = browserslistConfig ? {} : {
     overrideBrowserslist: [">0.3%", "not ie 11", "not dead", "not op_mini all"]
   };
+  const createTailwindPlugin = () => {
+    return tailwindcss({ optimize: false });
+  };
   const pluginFactories = {
     "postcss-import": () => postcssImport(),
     "postcss-nested": () => postcssNested(),
-    "@tailwindcss/postcss": () => tailwindcss(),
+    "@tailwindcss/postcss": createTailwindPlugin,
     autoprefixer: () => autoprefixer(autoprefixerOptions),
     cssnano: () => cssnano()
   };
   return {
+    dependencyEntryPaths: [referencePath],
     /**
      * Instantiate the initial plugin list for the active processor instance.
      * Fresh instances can later be recreated from `pluginFactories`.

package/src/runtime/css-loader-plugin.d.ts

@@ -1,5 +1,5 @@
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
-import type { CssTransform } from './css-runtime-contract';
+import type { EcoBuildPlugin } from '@ecopages/core/plugins/processor';
+import type { CssTransform } from './css-runtime-contract.js';
 type CssLoaderOptions = {
     name: string;
     filter: RegExp;

package/src/runtime/css-loader-plugin.js

@@ -1,4 +1,4 @@
-import { getFileAsBuffer } from "../postcss-processor";
+import { getFileAsBuffer } from "../postcss-processor.js";
 const createCssLoaderPlugin = ({ name, filter, transform }) => ({
   name,
   setup(build) {

package/src/runtime/css-loader.bun.d.ts

@@ -1,5 +1,5 @@
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
-import type { CssTransform } from './css-runtime-contract';
+import type { EcoBuildPlugin } from '@ecopages/core/plugins/processor';
+import type { CssTransform } from './css-runtime-contract.js';
 type BunCssLoaderOptions = {
     name: string;
     filter: RegExp;

package/src/runtime/css-loader.bun.js

@@ -1,4 +1,4 @@
-import { getFileAsBuffer } from "../postcss-processor";
+import { getFileAsBuffer } from "../postcss-processor.js";
 const createBunCssLoaderPlugin = ({ name, filter, transform }) => ({
   name,
   setup(build) {

package/CHANGELOG.md

@@ -1,26 +0,0 @@
-# Changelog
-
-All notable changes to `@ecopages/postcss-processor` are documented here.
-
-> **Note:** Changelog tracking begins at version `0.2.0`. Changes prior to this release are not recorded here but are available in the git history.
-
-## [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`).
-- **`PostcssProcessor` class** — New `postcss-processor.ts` exposes a programmatic API for the processor separate from the plugin DSL.
-
-### Refactoring
-
-- `plugin.ts` significantly overhauled to integrate with the new build adapter and support build dependency graph registration (`e7653c9b`).
-- Test suite updated for esbuild adapter and Node runtime compatibility (`31a44458`).
-- Removed unused `@types/postcss` dev dependency.
-
-### Tests
-
-- Updated `plugin.test.ts`, `postcss-processor.test.ts`, and `presets.test.ts` for new plugin contract.