From 877fbeffec960de41dac992384563c4b87c923ae Mon Sep 17 00:00:00 2001
From: Christian Kaisermann <christian@kaisermann.me>
Date: Sun, 27 May 2018 15:56:52 -0300
Subject: [PATCH] Make the compiler also transform prefixed @keyframes

---
 src/css/Stylesheet.ts                         | 15 +++++----
 src/utils/isKeyframesNode.ts                  |  7 ++++
 .../keyframes-autoprefixed/expected.css       |  1 +
 .../samples/keyframes-autoprefixed/input.html | 32 +++++++++++++++++++
 4 files changed, 48 insertions(+), 7 deletions(-)
 create mode 100644 src/utils/isKeyframesNode.ts
 create mode 100644 test/css/samples/keyframes-autoprefixed/expected.css
 create mode 100644 test/css/samples/keyframes-autoprefixed/input.html

diff --git a/src/css/Stylesheet.ts b/src/css/Stylesheet.ts
index 70f19fd48b..8dadc4e296 100644
--- a/src/css/Stylesheet.ts
+++ b/src/css/Stylesheet.ts
@@ -4,6 +4,7 @@ import { getLocator } from 'locate-character';
 import Selector from './Selector';
 import getCodeFrame from '../utils/getCodeFrame';
 import hash from '../utils/hash';
+import isKeyframesNode from '../utils/isKeyframesNode';
 import Element from '../compile/nodes/Element';
 import { Validator } from '../validate/index';
 import { Node, Ast, Warning } from '../interfaces';
@@ -26,7 +27,7 @@ class Rule {
 	}
 
 	isUsed(dev: boolean) {
-		if (this.parent && this.parent.node.type === 'Atrule' && this.parent.node.name === 'keyframes') return true;
+		if (this.parent && this.parent.node.type === 'Atrule' && isKeyframesNode(this.parent.node)) return true;
 		if (this.declarations.length === 0) return dev;
 		return this.selectors.some(s => s.used);
 	}
@@ -67,7 +68,7 @@ class Rule {
 	}
 
 	transform(code: MagicString, id: string, keyframes: Map<string, string>) {
-		if (this.parent && this.parent.node.type === 'Atrule' && this.parent.node.name === 'keyframes') return true;
+		if (this.parent && this.parent.node.type === 'Atrule' && isKeyframesNode(this.parent.node)) return true;
 
 		const attr = `.${id}`;
 
@@ -142,7 +143,7 @@ class Atrule {
 			});
 		}
 
-		else if (this.node.name === 'keyframes') {
+		else if (isKeyframesNode(this.node)) {
 			this.children.forEach((rule: Rule) => {
 				rule.selectors.forEach(selector => {
 					selector.used = true;
@@ -167,8 +168,8 @@ class Atrule {
 			});
 
 			code.remove(c, this.node.block.start);
-		} else if (this.node.name === 'keyframes') {
-			let c = this.node.start + 10;
+		} else if (isKeyframesNode(this.node)) {
+			let c = this.node.start + this.node.name.length + 1;
 			if (this.node.expression.start - c > 1) code.overwrite(c, this.node.expression.start, ' ');
 			c = this.node.expression.end;
 			if (this.node.block.start - c > 0) code.remove(c, this.node.block.start);
@@ -200,7 +201,7 @@ class Atrule {
 	}
 
 	transform(code: MagicString, id: string, keyframes: Map<string, string>) {
-		if (this.node.name === 'keyframes') {
+		if (isKeyframesNode(this.node)) {
 			this.node.expression.children.forEach(({ type, name, start, end }: Node) => {
 				if (type === 'Identifier') {
 					if (name.startsWith('-global-')) {
@@ -287,7 +288,7 @@ export default class Stylesheet {
 							this.children.push(atrule);
 						}
 
-						if (node.name === 'keyframes') {
+						if (isKeyframesNode(node)) {
 							node.expression.children.forEach((expression: Node) => {
 								if (expression.type === 'Identifier' && !expression.name.startsWith('-global-')) {
 									this.keyframes.set(expression.name, `${this.id}-${expression.name}`);
diff --git a/src/utils/isKeyframesNode.ts b/src/utils/isKeyframesNode.ts
new file mode 100644
index 0000000000..4ce899ff99
--- /dev/null
+++ b/src/utils/isKeyframesNode.ts
@@ -0,0 +1,7 @@
+import { Node } from '../interfaces';
+
+export default function isKeyframesNode(node: Node): boolean {
+	return ['', '-webkit-', '-moz-', '-o-'].some(
+		prefix => node.name === `${prefix}keyframes`
+	);
+}
diff --git a/test/css/samples/keyframes-autoprefixed/expected.css b/test/css/samples/keyframes-autoprefixed/expected.css
new file mode 100644
index 0000000000..a50a2b94d3
--- /dev/null
+++ b/test/css/samples/keyframes-autoprefixed/expected.css
@@ -0,0 +1 @@
+@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-webkit-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-moz-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-o-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.animated.svelte-xyz{animation:svelte-xyz-why 2s}.also-animated.svelte-xyz{animation:not-defined-here 2s}
\ No newline at end of file
diff --git a/test/css/samples/keyframes-autoprefixed/input.html b/test/css/samples/keyframes-autoprefixed/input.html
new file mode 100644
index 0000000000..dfe5dd4578
--- /dev/null
+++ b/test/css/samples/keyframes-autoprefixed/input.html
@@ -0,0 +1,32 @@
+<div class='animated'>animated</div>
+<div class='also-animated'>also animated</div>
+
+<style>
+	@keyframes why {
+		0% { color: red; }
+		100% { color: blue; }
+	}
+
+	@-webkit-keyframes why {
+		0% { color: red; }
+		100% { color: blue; }
+	}
+
+	@-moz-keyframes why {
+		0% { color: red; }
+		100% { color: blue; }
+	}
+
+	@-o-keyframes why {
+		0% { color: red; }
+		100% { color: blue; }
+	}
+
+	.animated {
+		animation: why 2s;
+	}
+
+	.also-animated {
+		animation: not-defined-here 2s;
+	}
+</style>