Vite 4 CSS pipeline shift breaks legacy PostCSS plugins

Minimal configuration for PostCSS plugins in Vite 4

Vite 4's switch from esbuild to Rollup for CSS processing means PostCSS plugins must be explicitly registered in the css.postcss.plugins array. Simply adding a plugin to the top-level plugins array will not trigger PostCSS processing.

Required setup

Place your PostCSS plugins directly in vite.config.js:

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        require('postcss-nested'),
        require('autoprefixer'),
        // other plugins
      ]
    }
  }
})

Why this works

Vite 4's Rollup-based CSS pipeline only processes plugins when they're declared in css.postcss.plugins. The top-level plugins array is for Vite plugins, not PostCSS plugins.

Workarounds for esbuild-dependent plugins

For plugins that rely on esbuild-specific APIs:

1. Wrap with postcss plugin adapter: Create a thin wrapper that exposes the plugin as a standard PostCSS pluginCheck for updated versions: Many popular plugins (postcss-preset-env, postcss-nested, etc.) now support Rollup's CSS pipelineUse postcss v8 syntax: Ensure plugins use the modern plugin format with postcss.plugin or object-based exports

   Verification steps

   Run a build and check the output:

   vite build --mode development

   Inspect .vite/manifest.json for CSS processing errors and compare generated CSS with expected transformations.

   When plugins still fail

   If a plugin has unmaintained esbuild-specific code, consider:

   • Filing an issue with the plugin maintainer
   • Using a Vite 3 build for CSS while keeping Vite 4 for other features
   • Implementing the transformation as a separate build step before Vite processes CSS

   One missing detail: Which specific PostCSS plugin(s) are failing? This determines whether a wrapper or alternative approach is needed.