From b4f8e3952267f396999cb466762ca11abd52ae94 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Tue, 14 Nov 2017 17:33:59 +0800
Subject: [PATCH] fix animation value replacement

---
 lib/style-compiler/plugins/scope-id.js | 7 ++++---
 test/fixtures/scoped-css.vue           | 3 +++
 test/test.js                           | 1 +
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/lib/style-compiler/plugins/scope-id.js b/lib/style-compiler/plugins/scope-id.js
index 1ad7697bf..b8c217686 100644
--- a/lib/style-compiler/plugins/scope-id.js
+++ b/lib/style-compiler/plugins/scope-id.js
@@ -64,9 +64,10 @@ module.exports = postcss.plugin('add-id', ({ id }) => root => {
         decl.value = decl.value.split(',')
           .map(v => {
             const vals = v.trim().split(/\s+/)
-            const name = vals[0]
-            if (keyframes[name]) {
-              return [keyframes[name]].concat(vals.slice(1)).join(' ')
+            const i = vals.findIndex(val => keyframes[val])
+            if (i !== -1) {
+              vals.splice(i, 1, keyframes[vals[i]])
+              return vals.join(' ')
             } else {
               return v
             }
diff --git a/test/fixtures/scoped-css.vue b/test/fixtures/scoped-css.vue
index 7eacac8be..cd5f74676 100644
--- a/test/fixtures/scoped-css.vue
+++ b/test/fixtures/scoped-css.vue
@@ -15,6 +15,9 @@ h1 {
   animation-name: color;
   animation-duration: 5s;
 }
+.anim-3 {
+  animation: 5s color infinite, 5s other;
+}
 .anim-multiple {
   animation: color 5s infinite, opacity 2s;
 }
diff --git a/test/test.js b/test/test.js
index 51ec6019a..9af50afeb 100644
--- a/test/test.js
+++ b/test/test.js
@@ -211,6 +211,7 @@ describe('vue-loader', () => {
       // scoped keyframes
       expect(style).to.contain(`.anim[${id}] {\n  animation: color-${id} 5s infinite, other 5s;`)
       expect(style).to.contain(`.anim-2[${id}] {\n  animation-name: color-${id}`)
+      expect(style).to.contain(`.anim-3[${id}] {\n  animation: 5s color-${id} infinite, 5s other;`)
       expect(style).to.contain(`@keyframes color-${id} {`)
       expect(style).to.contain(`@-webkit-keyframes color-${id} {`)