@octanejs/spring 0.0.1

package/src/types/index.ts

@@ -0,0 +1,9 @@
+// React-free public type surface aligned with @react-spring/types + core types at v10.1.2.
+export * from './interpolation';
+export * from './animated';
+export * from './utils';
+export * from './fluid';
+export * from './common';
+export * from './objects';
+export * from './props';
+export type { Interpolator, Interpolated } from './interpolate';

package/src/types/interpolate.ts

@@ -0,0 +1,50 @@
+import type { Interpolation } from '../core/Interpolation';
+import type { FrameValue } from '../core/FrameValue';
+import type { Animatable } from './animated';
+import type { FluidValue } from './fluid';
+import type { Arrify, Constrain, OneOrMore } from './utils';
+import type { ExtrapolateType, InterpolatorConfig, InterpolatorFn } from './interpolation';
+
+/** Extract the raw value types that are being interpolated */
+export type Interpolated<T extends ReadonlyArray<any>> = {
+	[P in keyof T]: T[P] extends infer Element
+		? Element extends FluidValue<infer U>
+			? U
+			: Element extends FrameValue<infer U>
+				? U
+				: Element
+		: never;
+};
+
+/**
+ * This interpolates one or more fluid/frame values.
+ */
+export interface Interpolator {
+	<Input extends ReadonlyArray<any>, Output>(
+		parents: Input,
+		interpolator: (...args: Interpolated<Input>) => Output,
+	): Interpolation<Output>;
+
+	<Input, Output>(
+		parent: FluidValue<Input> | FrameValue<Input> | Input,
+		interpolator: InterpolatorFn<Input, Output>,
+	): Interpolation<Output>;
+
+	<Out>(
+		parents: OneOrMore<FluidValue<any> | FrameValue<any>>,
+		config: InterpolatorConfig<Out>,
+	): Interpolation<Animatable<Out>>;
+
+	<Out>(
+		parents:
+			| OneOrMore<FluidValue<number> | FrameValue<number>>
+			| FluidValue<number[]>
+			| FrameValue<number[]>,
+		range: readonly number[],
+		output: readonly Constrain<Out, Animatable>[],
+		extrapolate?: ExtrapolateType,
+	): Interpolation<Animatable<Out>>;
+}
+
+// Re-export Arrify for InterpolatorFn consumers
+export type { Arrify };

package/src/types/interpolation.ts

@@ -0,0 +1,18 @@
+// Ported from @react-spring/types v10.1.2 (packages/types/src/interpolation.ts).
+import type { Animatable } from './animated';
+import type { Arrify, Constrain } from './utils';
+
+export type ExtrapolateType = 'identity' | 'clamp' | 'extend';
+export type EasingFunction = (value: number) => number;
+
+export type InterpolatorFn<Input = any, Output = any> = (...inputs: Arrify<Input>) => Output;
+
+export interface InterpolatorConfig<Output = Animatable> {
+	range?: readonly number[];
+	output: readonly Constrain<Output, Animatable>[];
+	easing?: EasingFunction;
+	extrapolate?: ExtrapolateType;
+	extrapolateLeft?: ExtrapolateType;
+	extrapolateRight?: ExtrapolateType;
+	map?: (value: number) => number;
+}

package/src/types/objects.ts

@@ -0,0 +1,17 @@
+import type { Any, Lookup } from './utils';
+import type { FluidValue } from './fluid';
+import type { SpringValue } from '../core/SpringValue';
+
+/**
+ * The set of `SpringValue` objects returned by a `useSpring` call (or similar).
+ */
+export type SpringValues<T extends Lookup = any> = [T] extends [Any]
+	? Lookup<SpringValue<unknown> | undefined>
+	: { [P in keyof T]: SpringWrap<T[P]> };
+
+type SpringWrap<T> = [Exclude<T, FluidValue>, Extract<T, readonly any[]>] extends [
+	object | void,
+	never,
+]
+	? never
+	: SpringValue<Exclude<T, FluidValue | void>> | Extract<T, void>;

package/src/types/props.ts

@@ -0,0 +1,275 @@
+import type { SpringConfig } from '../core/SpringValue';
+import type { SpringRef } from '../core/SpringRef';
+import type { SpringValue } from '../core/SpringValue';
+import type { Controller } from '../core/Controller';
+import type { AnimationResult } from '../core/AnimationResult';
+import type { FluidProps, FluidValue } from './fluid';
+import type { IsPlainObject, RawValues, StringKeys } from './common';
+import type {
+	Any,
+	Constrain,
+	Falsy,
+	Lookup,
+	Merge,
+	ObjectFromUnion,
+	ObjectType,
+	OneOrMore,
+	Remap,
+	UnknownProps,
+} from './utils';
+
+/** The phases of a `useTransition` item */
+export type TransitionKey = 'initial' | 'enter' | 'update' | 'leave';
+
+/**
+ * Extract a union of animated values from a set of `useTransition` props.
+ */
+export type TransitionValues<Props extends object> = unknown &
+	ForwardProps<
+		ObjectFromUnion<
+			Constrain<
+				ObjectType<
+					Props[TransitionKey & keyof Props] extends infer T
+						? T extends ReadonlyArray<infer Element>
+							? Element
+							: T extends (...args: any[]) => infer Return
+								? Return extends ReadonlyArray<infer ReturnElement>
+									? ReturnElement
+									: Return
+								: T
+						: never
+				>,
+				{}
+			>
+		>
+	>;
+
+/**
+ * Move all non-reserved props into the `to` prop.
+ */
+export type InferTo<T extends object> = Merge<
+	{ to: ForwardProps<T> },
+	Pick<T, keyof T & keyof ReservedProps>
+>;
+
+export type SpringUpdate<T = any> = ToProps<T> & SpringProps<T>;
+
+export type SpringsUpdate<State extends Lookup = UnknownProps> =
+	| OneOrMore<ControllerUpdate<State>>
+	| ((index: number, ctrl: Controller<State>) => ControllerUpdate<State> | null);
+
+export interface SpringProps<T = any> extends AnimationProps<T> {
+	from?: GoalValue<T>;
+	loop?: LoopProp<SpringUpdate>;
+	onProps?: EventProp<OnProps<T>>;
+	onStart?: EventProp<OnStart<SpringValue<T>, SpringValue<T>>>;
+	onChange?: EventProp<OnChange<SpringValue<T>, SpringValue<T>>>;
+	onPause?: EventProp<OnPause<SpringValue<T>, SpringValue<T>>>;
+	onResume?: EventProp<OnResume<SpringValue<T>, SpringValue<T>>>;
+	onRest?: EventProp<OnRest<SpringValue<T>, SpringValue<T>>>;
+}
+
+export type ToProps<T = any> =
+	| { to?: GoalProp<T> | SpringToFn<T> | SpringChain<T> }
+	| ([T] extends [IsPlainObject<T>] ? InlineToProps<T> : never);
+
+export type GoalProp<T> = [T] extends [IsPlainObject<T>] ? GoalValues<T> | Falsy : GoalValue<T>;
+
+export type GoalValues<T> =
+	FluidProps<T> extends infer Props ? { [P in keyof Props]?: Props[P] | null } : never;
+
+export type GoalValue<T> = T | FluidValue<T> | UnknownProps | null | undefined;
+
+export type InlineToProps<T = any> = Remap<GoalValues<T> & { to?: undefined }>;
+
+export interface SpringChain<T = any> extends Array<
+	[T] extends [IsPlainObject<T>] ? ControllerUpdate<T> : SpringTo<T> | SpringUpdate<T>
+> {}
+
+export type SpringTo<T = any> =
+	| ([T] extends [IsPlainObject<T>] ? never : T | FluidValue<T>)
+	| SpringChain<T>
+	| SpringToFn<T>
+	| Falsy;
+
+export type ControllerUpdate<State extends Lookup = Lookup, Item = undefined> = unknown &
+	ToProps<State> &
+	ControllerProps<State, Item>;
+
+export interface ControllerProps<
+	State extends Lookup = Lookup,
+	Item = undefined,
+> extends AnimationProps<State> {
+	ref?: SpringRef<State>;
+	from?: GoalValues<State> | Falsy;
+	loop?: LoopProp<ControllerUpdate>;
+	onStart?:
+		| OnStart<SpringValue<State>, Controller<State>, Item>
+		| {
+				[P in keyof State]?: OnStart<SpringValue<State[P]>, Controller<State>, Item>;
+		  };
+	onRest?:
+		| OnRest<SpringValue<State>, Controller<State>, Item>
+		| {
+				[P in keyof State]?: OnRest<SpringValue<State[P]>, Controller<State>, Item>;
+		  };
+	onChange?:
+		| OnChange<SpringValue<State>, Controller<State>, Item>
+		| {
+				[P in keyof State]?: OnChange<SpringValue<State[P]>, Controller<State>, Item>;
+		  };
+	onPause?:
+		| OnPause<SpringValue<State>, Controller<State>, Item>
+		| {
+				[P in keyof State]?: OnPause<SpringValue<State[P]>, Controller<State>, Item>;
+		  };
+	onResume?:
+		| OnResume<SpringValue<State>, Controller<State>, Item>
+		| {
+				[P in keyof State]?: OnResume<SpringValue<State[P]>, Controller<State>, Item>;
+		  };
+	onProps?: OnProps<State> | { [P in keyof State]?: OnProps<State[P]> };
+	onResolve?: OnResolve<SpringValue<State>, Controller<State>, Item>;
+}
+
+export type LoopProp<T extends object> = boolean | T | (() => boolean | T);
+
+export type MatchProp<T> = boolean | OneOrMore<StringKeys<T>> | ((key: StringKeys<T>) => boolean);
+
+export type EventProp<T> = T | Lookup<T | undefined>;
+
+export interface AnimationProps<T = any> {
+	config?: SpringConfig | ((key: StringKeys<T>) => SpringConfig);
+	delay?: number | ((key: StringKeys<T>) => number);
+	immediate?: MatchProp<T>;
+	cancel?: MatchProp<T>;
+	pause?: MatchProp<T>;
+	reset?: MatchProp<T>;
+	reverse?: boolean;
+	default?: boolean | SpringProps<T>;
+}
+
+export type ForwardProps<T extends object> = RawValues<Omit<Constrain<T, {}>, keyof ReservedProps>>;
+
+export interface ReservedProps extends ReservedEventProps {
+	config?: any;
+	from?: any;
+	to?: any;
+	ref?: any;
+	loop?: any;
+	pause?: any;
+	reset?: any;
+	cancel?: any;
+	reverse?: any;
+	immediate?: any;
+	default?: any;
+	delay?: any;
+	items?: any;
+	trail?: any;
+	sort?: any;
+	expires?: any;
+	initial?: any;
+	enter?: any;
+	update?: any;
+	leave?: any;
+	children?: any;
+	keys?: any;
+	callId?: any;
+	parentId?: any;
+}
+
+export interface ReservedEventProps {
+	onProps?: any;
+	onStart?: any;
+	onChange?: any;
+	onPause?: any;
+	onResume?: any;
+	onRest?: any;
+	onResolve?: any;
+	onDestroyed?: any;
+}
+
+export type PickAnimated<Props extends object, Fwd = true> = unknown &
+	([Props] extends [Any]
+		? Lookup
+		: [object] extends [Props]
+			? Lookup
+			: ObjectFromUnion<
+					Props extends { from: infer From }
+						? | (From extends () => any ? ReturnType<From> : ObjectType<From>)
+							| (TransitionKey & keyof Props extends never
+									? ToValues<Omit<Props, 'from'>, Fwd>
+									: TransitionValues<Omit<Props, 'from'>>)
+						: TransitionKey & keyof Props extends never
+							? ToValues<Props, Fwd>
+							: TransitionValues<Props>
+				>);
+
+export type ToValues<Props extends object, AndForward = true> = unknown &
+	(AndForward extends true ? ForwardProps<Props> : unknown) &
+	(Props extends { to?: any }
+		? Exclude<Props['to'], Function | ReadonlyArray<any>> extends infer To
+			? ForwardProps<[To] extends [object] ? To : Partial<Extract<To, object>>>
+			: never
+		: unknown);
+
+export interface SpringToFn<T = any> {
+	(start: any, stop: any): Promise<any> | void;
+}
+
+type EventHandler<TResult = any, TSource = unknown, Item = undefined> = (
+	result: AnimationResult<TResult extends { get(): infer U } ? U : any>,
+	ctrl: TSource,
+	item?: Item,
+) => void;
+
+export type OnStart<TResult = any, TSource = unknown, Item = undefined> = EventHandler<
+	TResult,
+	TSource,
+	Item
+>;
+export type OnChange<TResult = any, TSource = unknown, Item = undefined> = EventHandler<
+	TResult,
+	TSource,
+	Item
+>;
+export type OnPause<TResult = any, TSource = unknown, Item = undefined> = EventHandler<
+	TResult,
+	TSource,
+	Item
+>;
+export type OnResume<TResult = any, TSource = unknown, Item = undefined> = EventHandler<
+	TResult,
+	TSource,
+	Item
+>;
+export type OnRest<TResult = any, TSource = unknown, Item = undefined> = EventHandler<
+	TResult,
+	TSource,
+	Item
+>;
+export type OnResolve<TResult = any, TSource = unknown, Item = undefined> = EventHandler<
+	TResult,
+	TSource,
+	Item
+>;
+
+export type OnProps<T = unknown> = (
+	props: Readonly<SpringProps<T>>,
+	spring: SpringValue<T>,
+) => void;
+
+/**
+ * Update the props of a `Controller` object or `useSpring` call.
+ */
+export type SpringUpdateFn<T = any> =
+	T extends IsPlainObject<T>
+		? {
+				(to: SpringTo<T>, props?: ControllerProps<T>): Promise<AnimationResult<T>>;
+				(props: InlineToProps<T> & ControllerProps<T>): Promise<AnimationResult<T>>;
+				(props: { to?: GoalValues<T> | Falsy } & ControllerProps<T>): Promise<AnimationResult<T>>;
+			}
+		: {
+				(to: SpringTo<T>, props?: SpringProps<T>): Promise<AnimationResult<T>>;
+				(props: { to?: GoalValue<T> } & SpringProps<T>): Promise<AnimationResult<T>>;
+			};

package/src/types/utils.ts

@@ -0,0 +1,57 @@
+// React-free subset of @react-spring/types v10.1.2 utils (no React element types).
+
+/** Override the property types of `A` with `B` and merge any new properties */
+export type Merge<A, B> = Remap<
+	{ [P in keyof A]: P extends keyof B ? B[P] : A[P] } & Omit<B, keyof A>
+>;
+
+/** Better type errors for overloads with generic types */
+export type Constrain<T, U> = [T] extends [Any] ? U : [T] extends [U] ? T : U;
+
+/** Try to simplify `&` out of an object type */
+export type Remap<T> = {} & {
+	[P in keyof T]: T[P];
+};
+
+export type OneOrMore<T> = T | readonly T[];
+
+export type Falsy = false | null | undefined;
+
+export type NoInfer<T> = [T][T extends any ? 0 : never];
+
+export interface Lookup<T = any> {
+	[key: string]: T;
+}
+
+export type LoosePick<T, K> = {} & Pick<T, K & keyof T>;
+
+/** Intersected with other object types to allow for unknown properties */
+export interface UnknownProps extends Lookup<unknown> {}
+
+/** Use `[T] extends [Any]` to know if a type parameter is `any` */
+export class Any {
+	// @ts-expect-error – dont worry about this.
+	private _: never;
+}
+
+/** Ensure the given type is an object type */
+export type ObjectType<T> = T extends object ? T : {};
+
+/** Intersect a union of objects but merge property types with _unions_ */
+export type ObjectFromUnion<T extends object> = Remap<{
+	[P in keyof Intersect<T>]: T extends infer U ? (P extends keyof U ? U[P] : never) : never;
+}>;
+
+/** Convert a union to an intersection */
+type Intersect<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void
+	? I
+	: never;
+
+/** Ensure each type of `T` is an array */
+export type Arrify<T> = [T, T] extends [infer T, infer DT]
+	? DT extends ReadonlyArray<any>
+		? Array<DT[number]> extends DT
+			? ReadonlyArray<T extends ReadonlyArray<infer U> ? U : T>
+			: DT
+		: ReadonlyArray<T extends ReadonlyArray<infer U> ? U : T>
+	: never;

package/src/upstream-compat.ts

@@ -0,0 +1,164 @@
+// Behavioral ports of public helpers exported by @react-spring/web@10.1.2.
+import { raf } from '@react-spring/rafz';
+export { Globals } from './shared/globals';
+
+export class Any {}
+
+export class BailSignal extends Error {
+	result: unknown;
+
+	constructor() {
+		super(
+			'An async animation has been interrupted. You see this error because you forgot to use `await` or `.catch(...)` on its returned promise.',
+		);
+	}
+}
+
+export const update = raf.advance;
+
+export interface InterpolatorConfig<T = number> {
+	range?: readonly number[];
+	output: readonly T[];
+	extrapolate?: 'identity' | 'clamp' | 'extend';
+	extrapolateLeft?: 'identity' | 'clamp' | 'extend';
+	extrapolateRight?: 'identity' | 'clamp' | 'extend';
+	easing?: (value: number) => number;
+	map?: (value: number) => number;
+}
+
+// Public `createInterpolator` is re-exported from `./shared/createInterpolator`
+// via the package root so string/color ranges blend instead of snapping.
+
+const bounceOut = (x: number) => {
+	const n = 7.5625;
+	const d = 2.75;
+	if (x < 1 / d) return n * x * x;
+	if (x < 2 / d) return n * (x -= 1.5 / d) * x + 0.75;
+	if (x < 2.5 / d) return n * (x -= 2.25 / d) * x + 0.9375;
+	return n * (x -= 2.625 / d) * x + 0.984375;
+};
+
+export const easings = {
+	linear: (x: number) => x,
+	easeInQuad: (x: number) => x * x,
+	easeOutQuad: (x: number) => 1 - (1 - x) * (1 - x),
+	easeInOutQuad: (x: number) => (x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2),
+	easeInCubic: (x: number) => x * x * x,
+	easeOutCubic: (x: number) => 1 - Math.pow(1 - x, 3),
+	easeInOutCubic: (x: number) => (x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2),
+	easeInQuart: (x: number) => x ** 4,
+	easeOutQuart: (x: number) => 1 - (1 - x) ** 4,
+	easeInOutQuart: (x: number) => (x < 0.5 ? 8 * x ** 4 : 1 - (-2 * x + 2) ** 4 / 2),
+	easeInQuint: (x: number) => x ** 5,
+	easeOutQuint: (x: number) => 1 - (1 - x) ** 5,
+	easeInOutQuint: (x: number) => (x < 0.5 ? 16 * x ** 5 : 1 - (-2 * x + 2) ** 5 / 2),
+	easeInSine: (x: number) => 1 - Math.cos((x * Math.PI) / 2),
+	easeOutSine: (x: number) => Math.sin((x * Math.PI) / 2),
+	easeInOutSine: (x: number) => -(Math.cos(Math.PI * x) - 1) / 2,
+	easeInExpo: (x: number) => (x === 0 ? 0 : 2 ** (10 * x - 10)),
+	easeOutExpo: (x: number) => (x === 1 ? 1 : 1 - 2 ** (-10 * x)),
+	easeInOutExpo: (x: number) =>
+		x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? 2 ** (20 * x - 10) / 2 : (2 - 2 ** (-20 * x + 10)) / 2,
+	easeInCirc: (x: number) => 1 - Math.sqrt(1 - x ** 2),
+	easeOutCirc: (x: number) => Math.sqrt(1 - (x - 1) ** 2),
+	easeInOutCirc: (x: number) =>
+		x < 0.5 ? (1 - Math.sqrt(1 - (2 * x) ** 2)) / 2 : (Math.sqrt(1 - (-2 * x + 2) ** 2) + 1) / 2,
+	easeInBack: (x: number) => 2.70158 * x ** 3 - 1.70158 * x ** 2,
+	easeOutBack: (x: number) => 1 + 2.70158 * (x - 1) ** 3 + 1.70158 * (x - 1) ** 2,
+	easeInOutBack: (x: number) => {
+		const c = 1.70158 * 1.525;
+		return x < 0.5
+			? ((2 * x) ** 2 * ((c + 1) * 2 * x - c)) / 2
+			: ((2 * x - 2) ** 2 * ((c + 1) * (2 * x - 2) + c) + 2) / 2;
+	},
+	easeInElastic: (x: number) =>
+		x === 0
+			? 0
+			: x === 1
+				? 1
+				: -(2 ** (10 * x - 10)) * Math.sin((10 * x - 10.75) * ((2 * Math.PI) / 3)),
+	easeOutElastic: (x: number) =>
+		x === 0
+			? 0
+			: x === 1
+				? 1
+				: 2 ** (-10 * x) * Math.sin((10 * x - 0.75) * ((2 * Math.PI) / 3)) + 1,
+	easeInOutElastic: (x: number) => {
+		const c = (2 * Math.PI) / 4.5;
+		return x === 0
+			? 0
+			: x === 1
+				? 1
+				: x < 0.5
+					? -(2 ** (20 * x - 10) * Math.sin((20 * x - 11.125) * c)) / 2
+					: (2 ** (-20 * x + 10) * Math.sin((20 * x - 11.125) * c)) / 2 + 1;
+	},
+	easeInBounce: (x: number) => 1 - bounceOut(1 - x),
+	easeOutBounce: bounceOut,
+	easeInOutBounce: (x: number) =>
+		x < 0.5 ? (1 - bounceOut(1 - 2 * x)) / 2 : (1 + bounceOut(2 * x - 1)) / 2,
+	steps:
+		(count: number, direction: 'start' | 'end' = 'end') =>
+		(progress: number) => {
+			progress = direction === 'end' ? Math.min(progress, 0.999) : Math.max(progress, 0.001);
+			return Math.max(
+				0,
+				Math.min(
+					1,
+					(direction === 'end' ? Math.floor(progress * count) : Math.ceil(progress * count)) /
+						count,
+				),
+			);
+		},
+} as const;
+
+const RESERVED = new Set([
+	'config',
+	'from',
+	'to',
+	'ref',
+	'loop',
+	'reset',
+	'pause',
+	'cancel',
+	'reverse',
+	'immediate',
+	'default',
+	'delay',
+	'onProps',
+	'onStart',
+	'onChange',
+	'onPause',
+	'onResume',
+	'onRest',
+	'onResolve',
+	'items',
+	'trail',
+	'sort',
+	'expires',
+	'initial',
+	'enter',
+	'update',
+	'leave',
+	'children',
+	'onDestroyed',
+	'keys',
+	'callId',
+	'parentId',
+]);
+
+export function hasReservedProps(props: object): boolean {
+	for (const key of Object.keys(props)) {
+		if (RESERVED.has(key)) return true;
+	}
+	return false;
+}
+
+export function inferTo<T extends object>(props: T): T & { to?: object } {
+	const to: Record<string, unknown> = {};
+	const rest: Record<string, unknown> = {};
+	for (const [key, value] of Object.entries(props)) {
+		(RESERVED.has(key) ? rest : to)[key] = value;
+	}
+	return (Object.keys(to).length === 0 ? { ...props } : { ...rest, to }) as T & { to?: object };
+}

package/src/web/AnimatedStyle.ts

@@ -0,0 +1,51 @@
+import { FrameValue } from '../core/FrameValue';
+
+const transforms =
+	/^(matrix3d|matrix|translate3d|translate[XYZ]?|scale3d|scale[XYZ]?|rotate3d|rotate[XYZ]?|skew[XY]?)$/;
+
+function read(value: any): any {
+	if (value instanceof FrameValue) return value.get();
+	if (Array.isArray(value)) return value.map(read);
+	return value;
+}
+
+function unit(value: any, suffix: string): any {
+	return typeof value === 'number' && value !== 0 ? `${value}${suffix}` : value;
+}
+
+function identity(values: any[], expected: number): boolean {
+	return values.every(
+		(value) => (typeof value === 'number' ? value : Number.parseFloat(value)) === expected,
+	);
+}
+
+export function resolveAnimatedStyle(input: Record<string, any>): Record<string, any> {
+	const { x, y, z, ...source } = input;
+	const style: Record<string, any> = {};
+	const output: string[] = [];
+	let allIdentity = true;
+	if (x !== undefined || y !== undefined || z !== undefined) {
+		const values = [read(x ?? 0), read(y ?? 0), read(z ?? 0)];
+		output.push(`translate3d(${values.map((value) => unit(value, 'px')).join(',')})`);
+		allIdentity = identity(values, 0);
+	}
+	for (const key in source) {
+		const value = source[key];
+		if (key === 'transform') {
+			const resolved = read(value) || '';
+			if (resolved) output.push(resolved);
+			allIdentity = allIdentity && resolved === '';
+		} else if (transforms.test(key)) {
+			const values = (Array.isArray(value) ? value : [value]).map(read);
+			const suffix = key.startsWith('translate')
+				? 'px'
+				: key.startsWith('rotate') || key.startsWith('skew')
+					? 'deg'
+					: '';
+			output.push(`${key}(${values.map((item) => unit(item, suffix)).join(',')})`);
+			allIdentity = allIdentity && identity(values, key.startsWith('scale') ? 1 : 0);
+		} else style[key] = read(value);
+	}
+	if (output.length) style.transform = allIdentity ? 'none' : ` ${output.join(' ')}`;
+	return style;
+}