fix(compat): restore legacy utils

.eslintrc.json

@@ -20,6 +20,7 @@
   "rules": {
     "eslint-comments/no-unused-disable": "error",
     "security/detect-object-injection": "off", // ts handles this
+    "import/prefer-default-export": "off",
 
     "@typescript-eslint/array-type": ["error", { "default": "generic" }],
     "@typescript-eslint/ban-tslint-comment": "error",

.yarn/sdks/eslint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint",
-  "version": "8.4.1-sdk",
+  "version": "8.5.0-sdk",
   "main": "./lib/api.js",
   "type": "commonjs"
 }

README.md

@@ -96,7 +96,7 @@ Also, refer [the official Tailwind CSS documentation on using animations with ar
 
 You don't need any additional configuration. IntelliSense will automatically detect the animation classes. However, it cannot _autocomplete_ the arbitrary valued classes. But it should show the rules set by a class if you hover on it.
 
-If you see an `--animate-distance` variable while hovering over a class, you can also modify its translating distance using a class like this `animate-distance-[100px]`. Just to inform, following are the classes:
+If you see an `--animate-distance` variable while hovering over a class, you can also modify its translating distance using a class like `animate-distance-[100px]`. Just to inform, following animation classes can be customized this way:
 
 ```txt
 animate-backXY
@@ -145,13 +145,13 @@ The animation classes this package provides are similar but not the same as the
 
 #### From v2 to v3
 
-- We now requires at least Node.js v12 and Tailwind CSS v3. So first migrate to their newer versions. Refer: [Tailwind CSS Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide). Then run the command given in [the installation section](#installation).
+- We now require at least Tailwind CSS v3. So first upgrade it. Refer: [Tailwind CSS Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide). Then run the command given in [our installation section](#installation).
 
 - `animate-animated` class is no longer required. You can remove it.
 
-- Accessibility measures are no longer enforced by us. Refer [accessibility section](#accessibility).
+- Accessibility measures are no longer enforced by us. Refer [the accessibility section](#accessibility).
 
-- Change
+- _(Optional)_ Consider changing
 
   |               this | to                          |
   | -----------------: | :-------------------------- |
@@ -163,6 +163,8 @@ The animation classes this package provides are similar but not the same as the
   |     `animate-slow` | `animate-duration-[2s]`     |
   |   `animate-slower` | `animate-duration-[3s]`     |
 
+  Although the former are still present for backward compatibility, they may be removed from future versions.
+
 - Also remove experimental options that you might be earlier passing to `withAnimations` wrapper. Those features are now covered by semantic versioning and can be considered stable.
 
 ---

package-dist.json

@@ -25,8 +25,8 @@
     "lodash.set": "^4"
   },
   "peerDependencies": {
-    "postcss": ">=7",
-    "tailwindcss": ">=3"
+    "postcss": "^8",
+    "tailwindcss": "^3"
   },
   "keywords": [
     "animate.css",

scripts/build

@@ -1,6 +1,7 @@
 #!/bin/sh
 
 set -e
+rm -rf dist
 yarn
 yarn ttsc
 NODE_OPTIONS='--unhandled-rejections=strict' yarn ts-node --skip-project build.ts

scripts/update

@@ -1,6 +1,6 @@
 #!/bin/sh
 
 set -e
-rm yarn.lock
+rm -f yarn.lock
 yarn
 yarn dlx @yarnpkg/sdks vscode

src/index.ts

@@ -1,8 +1,8 @@
 import get from 'lodash.get';
 import set from 'lodash.set';
 
-import keyframes from '@/keyframes';
-import utilities from '@/utilities';
+import { keyframes } from '@/keyframes';
+import { utilities, legacyUtils } from '@/utilities';
 
 const withAnimations: EntryPoint = (config = {}) => {
   // animations
@@ -52,7 +52,7 @@ const withAnimations: EntryPoint = (config = {}) => {
   const plugins: PluginsConfig = [
     // static utilities
     ({ addUtilities }): void => {
-      addUtilities(prefixed);
+      addUtilities({ ...prefixed, ...legacyUtils });
     },
 
     // dynamic utilities

src/keyframes.ts

@@ -1,4 +1,4 @@
-const keyframes: Keyframes = {
+export const keyframes: Keyframes = {
   bounce: {
     'from, 20%, 53%, to': {
       animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
@@ -402,5 +402,3 @@ const keyframes: Keyframes = {
   slideOutRight: { to: { transform: 'translate3d(100%, 0, 0)' } },
   slideOutUp: { to: { transform: 'translate3d(0, -100%, 0)' } },
 };
-
-export = keyframes;

src/utilities.ts

@@ -1,4 +1,4 @@
-const utilities: CSSBlock = {
+export const utilities: CSSBlock = {
   bounce: { transformOrigin: 'center bottom' },
   pulse: { animationTimingFunction: 'ease-in-out' },
   headShake: { animationTimingFunction: 'ease-in-out' },
@@ -44,4 +44,18 @@ const utilities: CSSBlock = {
   zoomOutUp: { transformOrigin: 'center bottom' },
 };
 
-export = utilities;
+export const legacyUtils: CSSBlock = {
+  '.animate-infinite': { animationIterationCount: 'infinite' },
+  '.animate-repeat-1': { animationIterationCount: '1' },
+  '.animate-repeat-2': { animationIterationCount: '2' },
+  '.animate-repeat-3': { animationIterationCount: '3' },
+  '.animate-delay-1s': { animationDelay: '1s' },
+  '.animate-delay-2s': { animationDelay: '2s' },
+  '.animate-delay-3s': { animationDelay: '3s' },
+  '.animate-delay-4s': { animationDelay: '4s' },
+  '.animate-delay-5s': { animationDelay: '5s' },
+  '.animate-faster': { animationDuration: '0.5s' },
+  '.animate-fast': { animationDuration: '0.8s' },
+  '.animate-slow': { animationDuration: '2s' },
+  '.animate-slower': { animationDuration: '3s' },
+};

yarn.lock

@@ -2304,8 +2304,8 @@ __metadata:
   linkType: hard
 
 "eslint@npm:latest":
-  version: 8.4.1
-  resolution: "eslint@npm:8.4.1"
+  version: 8.5.0
+  resolution: "eslint@npm:8.5.0"
   dependencies:
     "@eslint/eslintrc": ^1.0.5
     "@humanwhocodes/config-array": ^0.9.2
@@ -2347,7 +2347,7 @@ __metadata:
     v8-compile-cache: ^2.0.3
   bin:
     eslint: bin/eslint.js
-  checksum: d962cd7cd0f68ddc2412f47154b8992ad3af987cf47fa6e60e51a2b7d32a91f934388f7d29e2c45b16b7ac69f0d220d0a483189ec6ba43a8a480110c34f158f9
+  checksum: c1a9e26070520a308cc30b62ba0d37d5b115ed23987a93219819537bdea9398e6ebe57c27d97be36ecc83b5162c72e82ecb0a9e5b44b7992980f9be90eb5c4b3
   languageName: node
   linkType: hard
 
@@ -4068,9 +4068,9 @@ __metadata:
   linkType: hard
 
 "object-inspect@npm:^1.11.0, object-inspect@npm:^1.9.0":
-  version: 1.11.1
-  resolution: "object-inspect@npm:1.11.1"
-  checksum: 98bc8e1e108b193cfb5d9bfb71b79f0e19d187aca4f9a3f28ea0e946c0011a74f9fc2ada83ecf2216b3e69fe6bf697fda8230ed84a6ca5680887e7bb73cf34ad
+  version: 1.12.0
+  resolution: "object-inspect@npm:1.12.0"
+  checksum: 2b36d4001a9c921c6b342e2965734519c9c58c355822243c3207fbf0aac271f8d44d30d2d570d450b2cc6f0f00b72bcdba515c37827d2560e5f22b1899a31cf4
   languageName: node
   linkType: hard