add test

src/runtime/internal/style_manager.ts

@@ -18,8 +18,8 @@ function hash(str: string) {
 	return hash >>> 0;
 }
 
-export function create_static_rule(node: Element & ElementCSSInlineStyle, rule: string, uid: number = 0) {
-	const className = `__svelte_${hash(rule)}_${uid}`;
+export function create_static_rule(node: Element & ElementCSSInlineStyle, rule: string) {
+	const className = `__svelte_${hash(rule)}`;
 	const doc = node.ownerDocument as ExtendedDoc;
 	active_docs.add(doc);
 	const stylesheet = doc.__svelte_stylesheet || (doc.__svelte_stylesheet = doc.head.appendChild(element('style') as HTMLStyleElement).sheet as CSSStyleSheet);

src/runtime/internal/transitions.ts

@@ -92,7 +92,7 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
 			static_css
 		} = config || null_transition;
 
-		if (static_css) static_class_name = create_static_rule(node, static_css, uid++);
+		if (static_css) static_class_name = create_static_rule(node, static_css);
 		if (css) animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);
 		tick(0, 1);
 
@@ -157,6 +157,7 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
 export function create_out_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) {
 	let config = fn(node, params);
 	let running = true;
+	let static_class_name;
 	let animation_name;
 
 	const group = outros;
@@ -169,9 +170,11 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn:
 			duration = 300,
 			easing = linear,
 			tick = noop,
-			css
+			css,
+			static_css
 		} = config || null_transition;
 
+		if (static_css) static_class_name = create_static_rule(node, static_css);
 		if (css) animation_name = create_rule(node, 1, 0, duration, delay, easing, css);
 
 		const start_time = now() + delay;
@@ -223,6 +226,7 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn:
 
 			if (running) {
 				if (animation_name) delete_rule(node, animation_name);
+				if (static_class_name) delete_static_rule(node, static_class_name);
 				running = false;
 			}
 		}

test/runtime/samples/transition-css-in-out-in-with-static/_config.js

@@ -0,0 +1,23 @@
+export default {
+	test({ assert, component, target, window, raf }) {
+		component.visible = true;
+		const div = target.querySelector('div');
+
+		assert.equal(div.className, '__svelte_2375698960');
+		assert.equal(div.style.animation, '__svelte_3809512021_0 100ms linear 0ms 1 both');
+
+		raf.tick(50);
+		component.visible = false;
+
+		// both in and out styles
+		assert.equal(div.className, '__svelte_2375698960 __svelte_1786671888');
+		assert.equal(div.style.animation, '__svelte_3809512021_0 100ms linear 0ms 1 both, __svelte_3750847757_0 100ms linear 0ms 1 both');
+
+		raf.tick(75);
+		component.visible = true;
+
+		// reset original styles
+		assert.equal(div.style.animation, '__svelte_3809512021_1 100ms linear 0ms 1 both');
+		assert.equal(div.className, '__svelte_2375698960');
+	}
+};

test/runtime/samples/transition-css-in-out-in-with-static/main.svelte

@@ -0,0 +1,27 @@
+<script>
+	export let visible;
+
+	function foo() {
+		return {
+			duration: 100,
+			static_css: 'display: block',
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+
+	function bar() {
+		return {
+			duration: 100,
+			static_css: 'display: inline-block',
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div in:foo out:bar></div>
+{/if}