Passing file info to postcss `ctx.file`

[Airkro]

Description

PostCSS plugins rely on ctx.file to access file-specific context (like path and metadata) during CSS processing. In Vite's current build process, this property is undefined, creating a compatibility gap with Webpack and Rollup.
This affects plugins that need to:

• Access the current CSS file's path
• Perform path-based calculations (e.g., for relative imports)
• Generate file-specific metadata or cache keys
• Apply conditional logic based on file location or name

The issue forces developers to avoid dependent plugins, implement fragile workarounds, or face migration hurdles when moving from Webpack/Rollup to Vite.

Benefits & Use Cases

With ctx.file implemented:

• Path resolution: Plugins can accurately resolve relative paths for assets or imports.
• File-specific logic: Plugins can apply transformations conditionally based on file attributes or directories.
• Seamless migration: Plugins working in Webpack/Rollup will function identically in Vite.
• Better debugging: Error messages can include the problematic file's path.
• Enhanced capabilities: Supports advanced plugins for source maps, caching, or file-specific outputs.

This completes Vite's PostCSS integration, supporting the full PostCSS plugin ecosystem.

Suggested solution

Vite should properly implement the PostCSS API by:

1. Providing the from option: Pass the absolute path of the CSS file to postcss.process().
2. Populating ctx.file: Ensure the PostCSS context includes a valid file property with the source file's absolute path and metadata.
3. Ensuring consistency: Match the behavior of Webpack (postcss-loader) and Rollup's PostCSS integration.
4. Supporting all modes: Work consistently in both development server and production builds.

The implementation should be transparent—no user configuration changes required—enabling existing plugins that use ctx.file to work automatically.

Alternative

No response

Additional context

• References: Webpack's postcss-loader and Rollup's PostCSS plugin demonstrate correct implementation.
• PostCSS API: The from option is documented as the method to provide file context to plugins.
• Ecosystem impact: Popular plugins (e.g., autoprefixer, postcss-import) depend on ctx.file. Full compatibility benefits the Vite ecosystem.
• Migration: Fixing this eliminates a key barrier for projects transitioning from Webpack/Rollup.

---

Similar issues exists but closed and locked

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

1. Providing the from option: Pass the absolute path of the CSS file to postcss.process().

Vite already does this here.

vite/packages/vite/src/node/plugins/css.ts

Line 1709 in 66f3194

from: source,

[Airkro]

@sapphi-red

Will Vite inject source file info into ctx.file or ctx.xxx like what postcss-loader/rollup-plugin-postcss do , in the future ?

[sapphi-red]

I don't get it. What do you mean by ctx?

[Airkro]

// postcss.config.mjs
export default (ctx) => {
  console.log(ctx);

  return {
    plugins: {
      autoprefixer: {},
    },
  };
};

[sapphi-red]

ok, so you want the file name to be passed to the postcss config.
But that doesn't make sense with these "Benefits & Use Cases".

With ctx.file implemented:

• Path resolution: Plugins can accurately resolve relative paths for assets or imports.
• File-specific logic: Plugins can apply transformations conditionally based on file attributes or directories.
• Seamless migration: Plugins working in Webpack/Rollup will function identically in Vite.
• Better debugging: Error messages can include the problematic file's path.
• Enhanced capabilities: Supports advanced plugins for source maps, caching, or file-specific outputs.

[Airkro]

Why do you think that does not fit?

If the function allows returning different configurations by condition of file info, then the user can do that magic to get these "benefits."

[Airkro]

About the “Benefits & Use Cases,” maybe it's because I'm using AI to translate these issues, so they're not correct. Sorry, but it doesn't mean it adds new features to Vite.