From 735f113a1fe08e76acdfd62aef70a620606a25fe Mon Sep 17 00:00:00 2001
From: Bob Fanger <b.fanger@wearetriple.com>
Date: Mon, 20 Jun 2022 14:47:20 +0200
Subject: [PATCH] feat: Support css units in fly and blur transitions

---
 site/content/docs/04-run-time.md |  7 +++---
 src/runtime/internal/utils.ts    | 12 ++++++++++
 src/runtime/transition/index.ts  | 17 +++++++-------
 test/utils/index.ts              | 38 ++++++++++++++++++++++++++++++++
 4 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/site/content/docs/04-run-time.md b/site/content/docs/04-run-time.md
index ef21112034..e3928b6156 100644
--- a/site/content/docs/04-run-time.md
+++ b/site/content/docs/04-run-time.md
@@ -670,7 +670,7 @@ Animates a `blur` filter alongside an element's opacity.
 * `duration` (`number`, default 400) — milliseconds the transition lasts
 * `easing` (`function`, default `cubicInOut`) — an [easing function](/docs#run-time-svelte-easing)
 * `opacity` (`number`, default 0) - the opacity value to animate out to and in from
-* `amount` (`number`, default 5) - the size of the blur in pixels
+* `amount` (`number|string`, default 5) - the size of the blur (support css units, for example: "4rem", numbers use px)
 
 ```sv
 <script>
@@ -705,10 +705,11 @@ Animates the x and y positions and the opacity of an element. `in` transitions a
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the transition lasts
 * `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
-* `x` (`number`, default 0) - the x offset to animate out to and in from
-* `y` (`number`, default 0) - the y offset to animate out to and in from
+* `x` (`number|string`, default 0) - the x offset to animate out to and in from
+* `y` (`number|string`, default 0) - the y offset to animate out to and in from
 * `opacity` (`number`, default 0) - the opacity value to animate out to and in from
 
+x and y use `px` by default but support css units, for example `x: '100vw'` or `y: '50%'`.
 You can see the `fly` transition in action in the [transition tutorial](/tutorial/adding-parameters-to-transitions).
 
 ```sv
diff --git a/src/runtime/internal/utils.ts b/src/runtime/internal/utils.ts
index 8adb0c279b..d75b38782d 100644
--- a/src/runtime/internal/utils.ts
+++ b/src/runtime/internal/utils.ts
@@ -189,3 +189,15 @@ export const has_prop = (obj, prop) => Object.prototype.hasOwnProperty.call(obj,
 export function action_destroyer(action_result) {
 	return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;
 }
+
+export function split_css_unit(value: number | string, fallback = 'px'): [number, string] {
+	if (typeof value === 'number') {
+		return [value, fallback];
+	}
+	const split = value?.match?.(/^\s*(-?[\d.]+)([^\s]*)\s*$/);
+	if (split) {
+		return [parseFloat(split[1]), split[2] || fallback];
+	}
+	console.warn('Failed to split', value);
+	return [parseFloat(value), fallback];
+}
diff --git a/src/runtime/transition/index.ts b/src/runtime/transition/index.ts
index c6d9dbc97a..082cc9bc15 100644
--- a/src/runtime/transition/index.ts
+++ b/src/runtime/transition/index.ts
@@ -1,5 +1,5 @@
 import { cubicOut, cubicInOut, linear } from 'svelte/easing';
-import { assign, is_function } from 'svelte/internal';
+import { assign, split_css_unit, is_function } from 'svelte/internal';
 
 export type EasingFunction = (t: number) => number;
 
@@ -15,7 +15,7 @@ export interface BlurParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
-	amount?: number;
+	amount?: number | string;
 	opacity?: number;
 }
 
@@ -31,12 +31,12 @@ export function blur(node: Element, {
 	const f = style.filter === 'none' ? '' : style.filter;
 
 	const od = target_opacity * (1 - opacity);
-
+	const [value, unit] = split_css_unit(amount);
 	return {
 		delay,
 		duration,
 		easing,
-		css: (_t, u) => `opacity: ${target_opacity - (od * u)}; filter: ${f} blur(${u * amount}px);`
+		css: (_t, u) => `opacity: ${target_opacity - (od * u)}; filter: ${f} blur(${u * value}${unit});`
 	};
 }
 
@@ -65,8 +65,8 @@ export interface FlyParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
-	x?: number;
-	y?: number;
+	x?: number | string;
+	y?: number | string;
 	opacity?: number;
 }
 
@@ -83,13 +83,14 @@ export function fly(node: Element, {
 	const transform = style.transform === 'none' ? '' : style.transform;
 
 	const od = target_opacity * (1 - opacity);
-
+	const [xValue, xUnit] = split_css_unit(x);
+	const [yValue, yUnit] = split_css_unit(y);
 	return {
 		delay,
 		duration,
 		easing,
 		css: (t, u) => `
-			transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
+			transform: ${transform} translate(${(1 - t) * xValue}${xUnit}, ${(1 - t) * yValue}${yUnit});
 			opacity: ${target_opacity - (od * u)}`
 	};
 }
diff --git a/test/utils/index.ts b/test/utils/index.ts
index a8aed9387a..77749335f3 100644
--- a/test/utils/index.ts
+++ b/test/utils/index.ts
@@ -1,5 +1,6 @@
 import * as assert from 'assert';
 import { trim_start, trim_end } from '../../src/compiler/utils/trim';
+import { split_css_unit } from '../../src/runtime/internal/utils';
 
 describe('utils', () => {
 	describe('trim', () => {
@@ -13,4 +14,41 @@ describe('utils', () => {
 			assert.equal(value, '	\r\n\t svelte content');
 		});
 	});
+
+	describe('split_css_unit', () => {
+		it('should use px as default', () => {
+			assert.deepEqual(split_css_unit(10), [10, 'px']);
+			assert.deepEqual(split_css_unit('10'), [10, 'px']);
+		});
+
+		it('should use the fallback', () => {
+			assert.deepEqual(split_css_unit(100, '%'), [100, '%']);
+			assert.deepEqual(split_css_unit('100', '%'), [100, '%']);
+		});
+
+		it('should split the css notation into value and unit', () => {
+			assert.deepEqual(split_css_unit('-50%'), [-50, '%']);
+			assert.deepEqual(split_css_unit('0.1rem'), [0.1, 'rem']);
+			assert.deepEqual(split_css_unit('.1rem'), [0.1, 'rem']);
+		});
+
+		it('should complain for invalid input', () => {
+			const warnings = [];
+			const warn = console.warn;
+			console.warn = (...args) => {
+				warnings.push(args);
+			};
+
+			split_css_unit('calc(100vw - 10rem)');
+			split_css_unit(undefined);
+			assert.deepEqual(split_css_unit('100 %'), [100, 'px']);
+			assert.deepEqual(warnings, [
+				['Failed to split', 'calc(100vw - 10rem)'],
+				['Failed to split', undefined],
+				['Failed to split', '100 %']
+			]);
+
+			console.warn = warn;
+		});
+	});
 });