fix: clean up utilities

README.md

@@ -151,20 +151,6 @@ The animation classes this package provides are similar but not the same as the
 
 - Accessibility measures are no longer enforced by us. Refer [the accessibility section](#accessibility).
 
-- _(Optional)_ Consider changing
-
-  |               this | to                          |
-  | -----------------: | :-------------------------- |
-  | `animate-infinite` | `animate-repeat-[infinite]` |
-  | `animate-repeat-x` | `animate-repeat-[x]`        |
-  | `animate-delay-xs` | `animate-delay-[xs]`        |
-  |   `animate-faster` | `animate-duration-[0.5s]`   |
-  |     `animate-fast` | `animate-duration-[0.8s]`   |
-  |     `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 any experimental options that you might earlier be passing to `withAnimations` wrapper. Those features are now covered by semantic versioning and can be considered stable.
 
 ---

package-dist.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "csstype": "^3",
     "lodash.get": "^4",
+    "lodash.range": "^3",
     "lodash.set": "^4"
   },
   "peerDependencies": {

package.json

@@ -11,6 +11,7 @@
     "@commitlint/config-conventional": "latest",
     "@release-it/conventional-changelog": "latest",
     "@types/lodash.get": "latest",
+    "@types/lodash.range": "latest",
     "@types/lodash.set": "latest",
     "@types/node": "latest",
     "@typescript-eslint/eslint-plugin": "latest",

src/defaults.ts

@@ -0,0 +1,93 @@
+import range from 'lodash.range';
+
+const expandArray = <T extends number | string>(
+  arr: Array<T>,
+  append = '',
+  inKey = false,
+  transform = (v: T): T => v,
+): Record<string, string> =>
+  arr.reduce((a, v) => ({ ...a, [`${v}${inKey ? append : ''}`]: `${transform(v)}${append}` }), {});
+
+export const duration = expandArray([75, 100, 150, 200, 300, 500, 700, 1000], 'ms');
+
+export const ease = {
+  linear: '0,0,1,1',
+  in: '.42,0,1,1',
+  out: '0,0,.58,1',
+  'in-out': '.42,0,.58,1',
+  'in-sine': '.12,0,.39,0',
+  'out-sine': '.61,1,.88,1',
+  'in-out-sine': '.37,0,.63,1',
+  'in-quad': '.11,0,.5,0',
+  'out-quad': '.5,1,.89,1',
+  'in-out-quad': '.45,0,.55,1',
+  'in-cubic': '.32,0,.67,0',
+  'out-cubic': '.33,1,.68,1',
+  'in-out-cubic': '.65,0,.35,1',
+  'in-quart': '.5,0,.75,0',
+  'out-quart': '.25,1,.5,1',
+  'in-out-quart': '.76,0,.24,1',
+  'in-quint': '.64,0,.78,0',
+  'out-quint': '.22,1,.36,1',
+  'in-out-quint': '.83,0,.17,1',
+  'in-expo': '.7,0,.84,0',
+  'out-expo': '.16,1,.3,1',
+  'in-out-expo': '.87,0,.13,1',
+  'in-circ': '.55,0,1,.45',
+  'out-circ': '0,.55,.45,1',
+  'in-out-circ': '.85,0,.15,1',
+  'in-back': '.36,0,.66,-.56',
+  'out-back': '.34,1.56,.64,1',
+  'in-out-back': '.68,-.6,.32,1.6',
+};
+
+export const delay = { ...duration, ...expandArray(range(6), 's', true) };
+
+export const repeat = expandArray(range(12));
+
+export const fill = expandArray(['none', 'forwards', 'backwards', 'both']);
+
+export const distance: Record<string, string> = {
+  px: '1px',
+  ...expandArray(
+    [
+      ...range(0, 4, 0.5),
+      ...range(4, 12, 1),
+      ...range(12, 16, 2),
+      ...range(16, 64, 4),
+      ...range(64, 80, 8),
+      ...range(80, 100, 16),
+    ],
+    'rem',
+    false,
+    (v) => v * 0.25,
+  ),
+  '1/2': '50%',
+  '1/3': '33.333333%',
+  '2/3': '66.666667%',
+  '1/4': '25%',
+  '2/4': '50%',
+  '3/4': '75%',
+  '1/5': '20%',
+  '2/5': '40%',
+  '3/5': '60%',
+  '4/5': '80%',
+  '1/6': '16.666667%',
+  '2/6': '33.333333%',
+  '3/6': '50%',
+  '4/6': '66.666667%',
+  '5/6': '83.333333%',
+  '1/12': '8.333333%',
+  '2/12': '16.666667%',
+  '3/12': '25%',
+  '4/12': '33.333333%',
+  '5/12': '41.666667%',
+  '6/12': '50%',
+  '7/12': '58.333333%',
+  '8/12': '66.666667%',
+  '9/12': '75%',
+  '10/12': '83.333333%',
+  '11/12': '91.666667%',
+  full: '100%',
+  screen: '100vh',
+};

src/index.ts

@@ -1,29 +1,17 @@
 import get from 'lodash.get';
 import set from 'lodash.set';
 
+import { delay, distance, duration, ease, fill, repeat } from '@/defaults';
 import { keyframes } from '@/keyframes';
-import { utilities, fineTuneUtils } from '@/utilities';
-import { easings } from '@/easings';
-
-const array = (from: number, to: number): Array<number> =>
-  Array.from({ length: to - from + 1 }, (_, i) => i + from);
-
-const expandArray = (
-  arr: Array<number | string>,
-  append = '',
-  inKey = false,
-): Record<string, string> =>
-  arr.reduce((a, v) => ({ ...a, [`${v}${inKey ? append : ''}`]: `${v}${append}` }), {});
-
-const twTimeRecord = expandArray([75, 100, 150, 200, 300, 500, 700, 1000], 'ms');
+import { animationUtils, keyframeUtils } from '@/utilities';
 
 const withAnimations: EntryPoint = (config = {}) => {
   // animations
   const animations: KeyValuePair = Object.fromEntries(
     Object.keys(keyframes).map((k) => [
       k,
-      `${(utilities[k] as CSSProperties | undefined)?.animationDuration || '1s'}
-      ${(utilities[k] as CSSProperties | undefined)?.animationTimingFunction || ''}
+      `${(keyframeUtils[k] as CSSProperties | undefined)?.animationDuration || '1s'}
+      ${(keyframeUtils[k] as CSSProperties | undefined)?.animationTimingFunction || ''}
       both ${k}`.replace(/\s+/g, ' '),
     ]),
   );
@@ -50,51 +38,57 @@ const withAnimations: EntryPoint = (config = {}) => {
 
   // utilities
   const prefixed: CSSBlock = Object.fromEntries(
-    Object.entries(utilities).flatMap(([animation, block]) => {
-      if (animation in configAnimations) return [];
+    Object.entries({ ...keyframeUtils, ...animationUtils }).flatMap(([util, block]) => {
+      if (util in configAnimations) return [];
 
-      const filtered: CSSBlock[string] = Object.fromEntries(
-        Object.entries(block).filter(([key]) => !key.startsWith('animation')),
-      );
+      const filtered: CSSBlock[string] =
+        util in animationUtils
+          ? block // skip filtering
+          : Object.fromEntries(
+              Object.entries(block).filter(([key]) => !key.startsWith('animation')),
+            );
 
-      return Object.keys(filtered).length > 0 ? [[`.animate-${animation}`, filtered]] : [];
+      return Object.keys(filtered).length > 0 ? [[`.animate-${util}`, filtered]] : [];
     }),
   );
 
   // plugins
   const plugins: PluginsConfig = [
     // static utilities
     ({ addUtilities }): void => {
-      addUtilities({ ...prefixed, ...fineTuneUtils });
+      addUtilities(prefixed);
     },
 
     // dynamic utilities
     ({ matchUtilities }): void => {
       matchUtilities<string>(
-        { 'animate-delay': (value) => ({ animationDelay: value }) },
-        { values: { ...expandArray(array(0, 5), 's', true), ...twTimeRecord } },
+        { 'animate-duration': (value) => ({ animationDuration: value }) },
+        { values: duration },
       );
 
-      matchUtilities<string>({ 'animate-distance': (value) => ({ '--animate-distance': value }) });
+      matchUtilities<string>(
+        { 'animate-ease': (value) => ({ animationTimingFunction: `cubic-bezier(${value})` }) },
+        { values: ease },
+      );
 
       matchUtilities<string>(
-        { 'animate-duration': (value) => ({ animationDuration: value }) },
-        { values: twTimeRecord },
+        { 'animate-delay': (value) => ({ animationDelay: value }) },
+        { values: delay },
       );
 
       matchUtilities<string>(
-        { 'animate-fill': (value) => ({ animationFillMode: value }) },
-        { values: expandArray(['none', 'forwards', 'backwards', 'both']) },
+        { 'animate-repeat': (value) => ({ animationIterationCount: value }) },
+        { values: repeat },
       );
 
       matchUtilities<string>(
-        { repeat: (value) => ({ animationIterationCount: value }) },
-        { values: expandArray([...array(0, 5), 'infinite', 'once', 'twice', 'thrice']) },
+        { 'animate-fill': (value) => ({ animationFillMode: value }) },
+        { values: fill },
       );
 
       matchUtilities<string>(
-        { 'animate-ease': (value) => ({ animationTimingFunction: value }) },
-        { values: easings },
+        { 'animate-distance': (value) => ({ '--animate-distance': value }) },
+        { values: distance },
       );
     },
   ];

src/utilities.ts

@@ -1,4 +1,4 @@
-export const utilities: CSSBlock = {
+export const keyframeUtils: CSSBlock = {
   bounce: { transformOrigin: 'center bottom' },
   pulse: { animationTimingFunction: 'ease-in-out' },
   headShake: { animationTimingFunction: 'ease-in-out' },
@@ -44,19 +44,23 @@ export const utilities: CSSBlock = {
   zoomOutUp: { transformOrigin: 'center bottom' },
 };
 
-export const fineTuneUtils: CSSBlock = {
-  '.animate-faster': { animationDuration: '0.5s' },
-  '.animate-fast': { animationDuration: '0.8s' },
-  '.animate-slow': { animationDuration: '2s' },
-  '.animate-slower': { animationDuration: '3s' },
+export const animationUtils: CSSBlock = {
+  none: { animation: 'none' },
 
-  '.animate-normal': { animationDirection: 'normal' },
-  '.animate-reverse': { animationDirection: 'reverse' },
-  '.animate-alternate': { animationDirection: 'alternate' },
-  '.animate-alternate-reverse': { animationDirection: 'alternate-reverse' },
+  faster: { animationDuration: '0.5s' },
+  fast: { animationDuration: '0.8s' },
+  slow: { animationDuration: '2s' },
+  slower: { animationDuration: '3s' },
 
-  '.animate-ease': { animationTimingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)' },
+  ease: { animationTimingFunction: 'cubic-bezier(.25,.1,.25,1)' },
 
-  '.paused': { animationPlayState: 'paused' },
-  '.running': { animationPlayState: 'running' },
+  infinite: { animationIterationCount: 'infinite' },
+
+  normal: { animationDirection: 'normal' },
+  reverse: { animationDirection: 'reverse' },
+  alternate: { animationDirection: 'alternate' },
+  'alternate-reverse': { animationDirection: 'alternate-reverse' },
+
+  paused: { animationPlayState: 'paused' },
+  running: { animationPlayState: 'running' },
 };