Merge PR animate-css#1907: fix: migrate PostCSS config to v8 plugin API and update dependencies (conflicts resolved: prefer PR changes)

Author: friuns3

package.json

@@ -44,17 +44,17 @@
   "devDependencies": {
     "autoprefixer": "^10.4.7",
     "cssnano": "^5.0.17",
-    "eslint": "^4.1.1",
+    "eslint": "^7.32.0",
     "husky": "^7.0.4",
     "lint-staged": "^11.2.6",
     "markdown-it": "^12.3.2",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.14",
-    "postcss-cli": "^8.3.1",
-    "postcss-header": "^3.0.1",
-    "postcss-import": "^14.0.2",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "postcss-header": "^3.0.3",
+    "postcss-import": "^16.1.0",
     "postcss-prefixer": "^3.0.0",
-    "postcss-preset-env": "^11.1.3",
+    "postcss-preset-env": "^9.6.0",
     "prettier": "^2.7.1"
   },
   "lint-staged": {
@@ -65,8 +65,5 @@
     "animate.min.css",
     "animate.css",
     "source/**/*.css"
-  ],
-  "dependencies": {
-    "animate.css": "^4.1.1"
-  }
+  ]
 }

postcss.config.js

@@ -1,4 +1,11 @@
 const fs = require('fs');
+const postcssImport = require('postcss-import');
+const postcssPrefixer = require('postcss-prefixer');
+const postcssPresetEnv = require('postcss-preset-env');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+const postcssHeader = require('postcss-header');
+
 const {homepage, version, author, animateConfig} = JSON.parse(fs.readFileSync('package.json'));
 
 const header = `
@@ -23,24 +30,22 @@ module.exports = (ctx) => {
   return {
     map: ctx.options.map,
     parser: ctx.options.parser,
-    plugins: {
-      'postcss-import': {root: ctx.file.dirname},
-      'postcss-prefixer': {
+    plugins: [
+      postcssImport({root: ctx.file.dirname}),
+      postcssPrefixer({
         prefix,
         ignore: [/\[class\*=.*\]/],
-      },
-      'postcss-preset-env': {
-        autoprefixer: {
-          cascade: false,
-        },
+      }),
+      postcssPresetEnv({
         features: {
           'custom-properties': true,
         },
-      },
-      cssnano: ctx.env === 'production' || ctx.env === 'compat' ? {} : false,
-      'postcss-header': {
-        header,
-      },
-    },
+      }),
+      autoprefixer({
+        cascade: false,
+      }),
+      ctx.env === 'production' || ctx.env === 'compat' ? cssnano() : false,
+      postcssHeader({header}),
+    ].filter(Boolean),
   };
 };