From fe9a68d071f05e7f613a235027829c2d7c879529 Mon Sep 17 00:00:00 2001
From: Christian Kaisermann <christian@kaisermann.me>
Date: Fri, 22 Jun 2018 14:55:13 -0300
Subject: [PATCH] Fix prefixed animation name replacement

---
 .editorconfig                                        | 3 +++
 src/css/Stylesheet.ts                                | 6 ++++--
 src/utils/isKeyframesNode.ts                         | 7 -------
 src/utils/removeCSSPrefix.ts                         | 3 +++
 test/css/samples/keyframes-autoprefixed/expected.css | 2 +-
 test/css/samples/keyframes-autoprefixed/input.html   | 2 ++
 6 files changed, 13 insertions(+), 10 deletions(-)
 delete mode 100644 src/utils/isKeyframesNode.ts
 create mode 100644 src/utils/removeCSSPrefix.ts

diff --git a/.editorconfig b/.editorconfig
index 854167bbedb2..ed2a319d5843 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -8,6 +8,9 @@ indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
 
+[test/**/expected.css]
+insert_final_newline = false
+
 [{package.json,.travis.yml,.eslintrc.json}]
 indent_style = space
 indent_size = 2
diff --git a/src/css/Stylesheet.ts b/src/css/Stylesheet.ts
index 8dadc4e2961a..32052f50d5b3 100644
--- a/src/css/Stylesheet.ts
+++ b/src/css/Stylesheet.ts
@@ -4,11 +4,13 @@ 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 removeCSSPrefix from '../utils/removeCSSPrefix';
 import Element from '../compile/nodes/Element';
 import { Validator } from '../validate/index';
 import { Node, Ast, Warning } from '../interfaces';
 
+const isKeyframesNode = (node: Node) => removeCSSPrefix(node.name) === 'keyframes'
+
 class Rule {
 	selectors: Selector[];
 	declarations: Declaration[];
@@ -97,7 +99,7 @@ class Declaration {
 	}
 
 	transform(code: MagicString, keyframes: Map<string, string>) {
-		const property = this.node.property && this.node.property.toLowerCase();
+		const property = this.node.property && removeCSSPrefix(this.node.property.toLowerCase());
 		if (property === 'animation' || property === 'animation-name') {
 			this.node.value.children.forEach((block: Node) => {
 				if (block.type === 'Identifier') {
diff --git a/src/utils/isKeyframesNode.ts b/src/utils/isKeyframesNode.ts
deleted file mode 100644
index 4ce899ff9938..000000000000
--- a/src/utils/isKeyframesNode.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Node } from '../interfaces';
-
-export default function isKeyframesNode(node: Node): boolean {
-	return ['', '-webkit-', '-moz-', '-o-'].some(
-		prefix => node.name === `${prefix}keyframes`
-	);
-}
diff --git a/src/utils/removeCSSPrefix.ts b/src/utils/removeCSSPrefix.ts
new file mode 100644
index 000000000000..df1849f119c7
--- /dev/null
+++ b/src/utils/removeCSSPrefix.ts
@@ -0,0 +1,3 @@
+export default function(name: string): string {
+	return name.replace(/^-((webkit)|(moz)|(o)|(ms))-/, '');
+}
diff --git a/test/css/samples/keyframes-autoprefixed/expected.css b/test/css/samples/keyframes-autoprefixed/expected.css
index a50a2b94d3b8..d9866778a917 100644
--- a/test/css/samples/keyframes-autoprefixed/expected.css
+++ b/test/css/samples/keyframes-autoprefixed/expected.css
@@ -1 +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
+@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{-webkit-animation:svelte-xyz-why 2s;animation:svelte-xyz-why 2s}.also-animated.svelte-xyz{-webkit-animation:not-defined-here 2s;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
index dfe5dd457837..1c0e1bc630cf 100644
--- a/test/css/samples/keyframes-autoprefixed/input.html
+++ b/test/css/samples/keyframes-autoprefixed/input.html
@@ -23,10 +23,12 @@
 	}
 
 	.animated {
+		-webkit-animation: why 2s;
 		animation: why 2s;
 	}
 
 	.also-animated {
+		-webkit-animation: not-defined-here 2s;
 		animation: not-defined-here 2s;
 	}
 </style>