Fix prefixed animation name replacement

.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

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 isKeyframeNode = (node: Node) => removeCssPrefix(node.name) === 'keyframes'
+
 class Rule {
 	selectors: Selector[];
 	declarations: Declaration[];
@@ -27,7 +29,7 @@ class Rule {
 	}
 
 	isUsed(dev: boolean) {
-		if (this.parent && this.parent.node.type === 'Atrule' && isKeyframesNode(this.parent.node)) return true;
+		if (this.parent && this.parent.node.type === 'Atrule' && isKeyframeNode(this.parent.node)) return true;
 		if (this.declarations.length === 0) return dev;
 		return this.selectors.some(s => s.used);
 	}
@@ -68,7 +70,7 @@ class Rule {
 	}
 
 	transform(code: MagicString, id: string, keyframes: Map<string, string>) {
-		if (this.parent && this.parent.node.type === 'Atrule' && isKeyframesNode(this.parent.node)) return true;
+		if (this.parent && this.parent.node.type === 'Atrule' && isKeyframeNode(this.parent.node)) return true;
 
 		const attr = `.${id}`;
 
@@ -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') {
@@ -143,7 +145,7 @@ class Atrule {
 			});
 		}
 
-		else if (isKeyframesNode(this.node)) {
+		else if (isKeyframeNode(this.node)) {
 			this.children.forEach((rule: Rule) => {
 				rule.selectors.forEach(selector => {
 					selector.used = true;
@@ -168,7 +170,7 @@ class Atrule {
 			});
 
 			code.remove(c, this.node.block.start);
-		} else if (isKeyframesNode(this.node)) {
+		} else if (isKeyframeNode(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;
@@ -201,7 +203,7 @@ class Atrule {
 	}
 
 	transform(code: MagicString, id: string, keyframes: Map<string, string>) {
-		if (isKeyframesNode(this.node)) {
+		if (isKeyframeNode(this.node)) {
 			this.node.expression.children.forEach(({ type, name, start, end }: Node) => {
 				if (type === 'Identifier') {
 					if (name.startsWith('-global-')) {
@@ -288,7 +290,7 @@ export default class Stylesheet {
 							this.children.push(atrule);
 						}
 
-						if (isKeyframesNode(node)) {
+						if (isKeyframeNode(node)) {
 							node.expression.children.forEach((expression: Node) => {
 								if (expression.type === 'Identifier' && !expression.name.startsWith('-global-')) {
 									this.keyframes.set(expression.name, `${this.id}-${expression.name}`);

src/utils/removeCSSPrefix.ts

@@ -0,0 +1,3 @@
+export default function(name: string): string {
+	return name.replace(/^-((webkit)|(moz)|(o)|(ms))-/, '');
+}

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>