Skip to content

Comments

fix: migrate PostCSS config to v8 plugin API and update dependencies#1907

Open
kght6123 wants to merge 1 commit intoanimate-css:mainfrom
kght6123:fix/postcss-v8-plugin-migration
Open

fix: migrate PostCSS config to v8 plugin API and update dependencies#1907
kght6123 wants to merge 1 commit intoanimate-css:mainfrom
kght6123:fix/postcss-v8-plugin-migration

Conversation

@kght6123
Copy link

What this PR does

Resolves #1204 by following the PostCSS 8 plugin migration guide.

The main change is rewriting postcss.config.js to use the recommended array syntax with explicit require() calls instead of the deprecated object (string-key) syntax. This eliminates all postcss.plugin was deprecated warnings during the build.

Changes

postcss.config.js

  • Replaced the deprecated plugins: { 'plugin-name': options } object syntax with plugins: [ require('plugin')(...) ] array syntax
  • Added autoprefixer as an explicit standalone plugin (it was removed from postcss-preset-env v8+, but was already a project devDependency)
  • Used .filter(Boolean) to cleanly handle the conditional cssnano plugin

package.json — dependency updates

Package Before After
postcss ^8.4.14 ^8.5.6
postcss-preset-env ^6.7.0 ^9.6.0
postcss-prefixer ^2.1.3 ^3.0.0 (new PostCSS 8 plugin API)
postcss-header ^3.0.1 ^3.0.3 (new PostCSS 8 plugin API)
postcss-import ^14.0.2 ^16.1.0
postcss-cli ^8.3.1 ^11.0.1

Before vs After

Before — build output contained warnings:

postcss-header: postcss.plugin was deprecated. Migration guide: ...
postcss-prefixer: postcss.plugin was deprecated. Migration guide: ...

After — clean build output:

🎉🎉🎉🎉
animate.css production build was compiled sucessfully!

All three build targets (raw, prod, compat) pass cleanly.

🤖 Generated with Claude Code

Follow the PostCSS 8 plugin migration guide by switching from the
deprecated object (string-key) plugin syntax to the recommended array
syntax with explicit require() calls.

- postcss.config.js: rewrite plugins as an array of instantiated plugins
- Extract autoprefixer as a standalone plugin (removed from postcss-preset-env v8+)
- postcss: 8.4.14 → 8.5.6
- postcss-preset-env: 6.7.0 → 9.6.0
- postcss-prefixer: 2.1.3 → 3.0.0 (new PostCSS 8 plugin API)
- postcss-header: 3.0.1 → 3.0.3 (new PostCSS 8 plugin API)
- postcss-import: 14.0.2 → 16.1.0
- postcss-cli: 8.3.1 → 11.0.1

Closes animate-css#1204

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings February 20, 2026 14:12
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR successfully migrates the PostCSS configuration from the deprecated PostCSS 7 plugin API to the modern PostCSS 8 plugin API, resolving issue #1204. The migration follows the official PostCSS 8 plugin migration guide by converting from the deprecated object (string-key) syntax to the recommended array syntax with explicit require() calls.

Changes:

  • Converted postcss.config.js from object-based plugin configuration to array-based with explicit require() statements
  • Separated autoprefixer as a standalone plugin (required for postcss-preset-env v9+)
  • Updated PostCSS and related plugins to versions supporting the PostCSS 8 API

Reviewed changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated no comments.

File Description
postcss.config.js Migrated to PostCSS 8 plugin API with array syntax and explicit require() calls; separated autoprefixer configuration from postcss-preset-env; used .filter(Boolean) for conditional cssnano plugin
package.json Updated postcss-cli (v8→v11), postcss-preset-env (v6→v9), postcss-prefixer (v2→v3), postcss-import (v14→v16), postcss-header (v3.0.1→v3.0.3), and postcss (v8.4.14→v8.5.6) to versions supporting PostCSS 8 API
yarn.lock Updated dependency tree with new @csstools packages (dependencies of postcss-preset-env v9), removed deprecated PostCSS 7 dependencies, and updated related utility packages

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Properly update to postCSS v8

1 participant