@weser/keyframes 0.0.8 → 0.0.10

package/dist/createKeyframe.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties, createElement } from 'react';
-type Key = `${number}%` | 'from' | 'to';
-export type T_Keyframe = Partial<Record<Key, CSSProperties>>;
-export default function createKeyframe(style: T_Keyframe, nonce?: string): [string, ReturnType<typeof createElement>];
+import createStyleNode from './createStyleNode.js';
+import { T_Keyframe } from './types.js';
+type Node = ReturnType<typeof createStyleNode>;
+export default function createKeyframe(style: T_Keyframe, nonce?: string): [string, Node];
 export {};

package/dist/createKeyframe.js

@@ -1,23 +1,9 @@
-import { createElement } from 'react';
-import { cssifyObject } from 'css-in-js-utils';
-import hash from './hash.js';
-const cache = new Map();
+import getValueFromCache from './getValueFromCache.js';
+import createStyleNode from './createStyleNode.js';
+import getAnimationName from './getAnimationName.js';
 export default function createKeyframe(style, nonce) {
-    const animationName = '_' + hash(JSON.stringify(style));
+    const animationName = getAnimationName(style);
     const css = getValueFromCache(animationName, style);
-    const node = createElement('style', {
-        dangerouslySetInnerHTML: { __html: css },
-        precedence: 'low',
-        href: animationName,
-        nonce,
-    });
+    const node = createStyleNode(animationName, css, nonce);
     return [animationName, node];
 }
-function getValueFromCache(animationName, style) {
-    if (!cache.has(animationName)) {
-        const keyframe = Object.entries(style).reduce((keyframe, [key, declaration = {}]) => keyframe + key + '{' + cssifyObject(declaration) + '}', '');
-        const css = `@keyframes ${animationName}{${keyframe}}`;
-        cache.set(animationName, css);
-    }
-    return cache.get(animationName);
-}

package/dist/createKeyframes.d.ts

@@ -0,0 +1,5 @@
+import createStyleNode from './createStyleNode.js';
+import { T_Keyframe } from './types.js';
+type Node = ReturnType<typeof createStyleNode>;
+export default function createKeyframes<T extends string>(keyframes: Record<T, T_Keyframe>, nonce?: string): [Record<T, string>, Node];
+export {};

package/dist/createKeyframes.js

@@ -0,0 +1,14 @@
+import getValueFromCache from './getValueFromCache.js';
+import createStyleNode from './createStyleNode.js';
+import getAnimationName from './getAnimationName.js';
+export default function createKeyframes(keyframes, nonce) {
+    const animationNameMap = {};
+    let css = '';
+    for (const key in keyframes) {
+        const animationName = getAnimationName(keyframes[key]);
+        css += getValueFromCache(animationName, keyframes[key]);
+        animationNameMap[key] = animationName;
+    }
+    const node = createStyleNode(Object.keys(keyframes).join('-'), css, nonce);
+    return [animationNameMap, node];
+}

package/dist/createStyleNode.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export default function createStyleNode(animationName: string, css: string, nonce?: string): import("react").DetailedReactHTMLElement<{
+    dangerouslySetInnerHTML: {
+        __html: string;
+    };
+    precedence: string;
+    href: string;
+    nonce: string | undefined;
+}, HTMLElement>;

package/dist/createStyleNode.js

@@ -0,0 +1,9 @@
+import { createElement } from 'react';
+export default function createStyleNode(animationName, css, nonce) {
+    return createElement('style', {
+        dangerouslySetInnerHTML: { __html: css },
+        precedence: 'low',
+        href: animationName,
+        nonce,
+    });
+}

package/dist/getAnimationName.d.ts

@@ -0,0 +1,2 @@
+import { T_Keyframe } from './types.js';
+export default function getAnimationName(style: T_Keyframe): string;

package/dist/getAnimationName.js

@@ -0,0 +1,4 @@
+import hash from './hash.js';
+export default function getAnimationName(style) {
+    return '_' + hash(JSON.stringify(style));
+}

package/dist/getValueFromCache.d.ts

@@ -0,0 +1,2 @@
+import { T_Keyframe } from './types.js';
+export default function getValueFromCache(animationName: string, style: T_Keyframe): any;

package/dist/getValueFromCache.js

@@ -0,0 +1,10 @@
+import { cssifyObject } from 'css-in-js-utils';
+const cache = new Map();
+export default function getValueFromCache(animationName, style) {
+    if (!cache.has(animationName)) {
+        const keyframe = Object.entries(style).reduce((keyframe, [key, declaration = {}]) => keyframe + key + '{' + cssifyObject(declaration) + '}', '');
+        const css = `@keyframes ${animationName}{${keyframe}}`;
+        cache.set(animationName, css);
+    }
+    return cache.get(animationName);
+}

package/dist/index.d.ts

@@ -1 +1,3 @@
-export { default as createKeyframe, T_Keyframe } from './createKeyframe.js';
+export { default as createKeyframe } from './createKeyframe.js';
+export { default as createKeyframes } from './createKeyframes.js';
+export { T_Keyframe } from './types.js';

package/dist/index.js

@@ -1 +1,2 @@
 export { default as createKeyframe } from './createKeyframe.js';
+export { default as createKeyframes } from './createKeyframes.js';

package/dist/types.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+type Key = `${number}%` | 'from' | 'to';
+export type T_Keyframe = Partial<Record<Key, CSSProperties>>;
+export {};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weser/keyframes",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Tiny helpers for CSS keyframes in React",
   "author": "Robin Weser <robin@weser.io>",
   "license": "MIT",
@@ -53,5 +53,5 @@
     "rimraf": "^3.0.2",
     "typescript": "^5.4.5"
   },
-  "gitHead": "9dce5f658f08431e80506b022369229dfeff7dd7"
+  "gitHead": "6dd1ad00ab8dacea2878edc99085324ea5d03588"
 }