Resolving "Cannot read property 'unprefixed' of undefined" on npm run serve with animate.css package

I am developing an application using Vue, Quasar, and the animate.css package for CSS animations in my website. Everything has been going smoothly until recently I was having an issue with the npm run build command, which leads to the error in the title. Upon some investigation, I tried to install the postcss-rtlcss package, which led to this error occurring on npm run serve as well. Please note that I am relatively new to the Vue and node.js ecosystem, so please let me know if I am doing something completely wrong.

The error upon running npm run serve

ERROR  Failed to compile with 1 error                                                                                                                                          10:28:49 PM

error  in ./node_modules/animate.css/animate.css

Syntax Error: TypeError: Cannot read property 'unprefixed' of undefined


 @ ./node_modules/animate.css/animate.css 4:14-163 15:3-20:5 16:22-171
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.0.0.251:8080&sockPath=/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js

In addition to this, here is my package.json.

{
  "name": "socialapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "animate.css": "^4.1.1",
    "core-js": "^3.6.5",
    "css-loader": "^6.2.0",
    "quasar": "^2.0.0",
    "vue": "^3.1.4",
    "vue-body-class": "^3.0.2",
    "vue-router": "^4.0.0-0",
    "vue-style-loader": "^4.1.3",
    "webpack": "^4.45.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "^4.5.13",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "postcss-rtl": "^1.2.3",
    "sass": "1.32.12",
    "sass-loader": "^10.1.0",
    "vue-cli-plugin-quasar": "~4.0.1"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Please let me know in a comment if you need anything else from me and I will try my best to provide it. Thank you for your help.

I fixed the problem by downgrading my PostCSS version to ^7.0.36 in package.json. While this may cause issues in the dependency tree, when I tried to install with the --force argument, it worked just fine. All commands work fine now.