diff --git a/.editorconfig b/.editorconfig index 854167bbe..ed2a319d5 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 8dadc4e29..32052f50d 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) { - 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 4ce899ff9..000000000 --- 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 000000000..df1849f11 --- /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 a50a2b94d..d9866778a 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 dfe5dd457..1c0e1bc63 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; }